Treci la conținutul principal

Crearea unei grile de beneficii dinamice pentru produsele WooCommerce

Divi: cea mai ușoară temă WordPress de utilizat

Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62. [Recomandat]

Modul în care proiectați pagina produsului dvs. are un impact imediat asupra comportamentului vizitatorilor dvs. Un design personalizat și personalizat al paginii de produs poate face mai ușor vizitatorii să decidă dacă doresc să cumpere produsul dvs. Dacă sunteți în căutarea unei modalități de a face pagina produsului mai atrăgătoare, probabil vă va plăcea acest tutorial. 

Vă vom arăta cum să includeți o grilă dinamică de beneficii pentru produs în proiectarea dvs. utilizând Divi și pluginul Advanced Custom Fields. Vom începe prin a crea un grup de câmpuri pentru beneficii. Apoi vom completa câmpurile personalizate de pe pagina noastră de produs și vom include conținutul dinamic în șablonul nostru de pagină de produs. 

Rezultat posibil

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Posibil rezultat divi

1. Instalați pluginul ACF Plugin și grupul de beneficii pentru produse

Instalați pluginul Advanced Advanced Fields

Pentru a afișa diferitele avantaje ale produsului în backend-ul produselor noastre, vom folosi pluginul gratuit Advanced Custom Fields. Accesați-vă Backend WordPress> Pluginuri> Adăugare nouă> Găsire plugin ACF> Instalare> Activare .

Instalați un plugin de câmp personalizat avansat

Accesați câmpurile personalizate și adăugați un nou grup de câmpuri

După ce ați instalat și activat pluginul ACF, veți putea accesa câmpurile dvs. personalizate și adăugați un nou grup de câmpuri.

Creați câmpuri ACF

Setările grupului de câmp

Dați noului grup de câmpuri un titlu și permiteți-i să apară numai pe paginile produsului.

  • „Tip de mesaj” este egal cu „Produs”
Adăugați reguli

Adăugați un prim câmp

Continuați adăugând un câmp nou pentru titlul primului dvs. produs.

  • Etichetă de câmp: Titlul beneficiului 1
  • Tipul câmpului: text
Adăugați un câmp ac
Personalizare câmp Divi

Repetați pasul pentru câmpurile rămase

Faceți același lucru pentru celelalte avantaje ale produsului și descrierile acestora. Toate aceste câmpuri necesită tipul de câmp „Text” atribuit acestora.

  • Titlul serviciului 1
  • Descrierea beneficiilor 1
  • Titlul serviciului 2
  • Descrierea beneficiilor 2
  • Titlul serviciului 3
  • Descrierea beneficiilor 3
  • Titlul serviciului 4
  • Descrierea beneficiilor 4
Configurați câmpurile ACF

2. Adăugați beneficii produselor

Deschideți sau adăugați un produs nou

Odată ce grupul și câmpurile dvs. de câmp sunt create, puteți adăuga avantajele produselor la produsele dvs. la nivel individual. Deschideți un produs la alegere sau creați unul nou.

Crearea produsului Divi

Completați câmpurile Beneficii pentru produse

Și îndepliniți beneficiile produsului.

Completați câmpurile avantaje Divi

3. Creați un model de pagină de produs în Divi Theme Builder

Accesați Divi Theme Builder și adăugați un nou șablon

Este timpul să începem cu Divi! Pentru a crea un șablon nou, accesați Divi Theme Builder și faceți clic pe „Adăugați un șablon nou”.

Constructor de teme Divi

Utilizați un șablon pe toate produsele

Folosim acest șablon pentru toate produsele, dar nu ezitați să selectați în schimb produse cu o anumită categorie sau etichetă.

Adăugați toate produsele woocommerce

Introduceți editorul șablonului corpului modelului

Apoi introduceți corpul modelului făcând clic pe „Adăugați un corp personalizat” și selectând „Creați un corp personalizat”.

Construirea corpului div

Modificați secțiunea # 1

Culoare de fundal

Odată ajuns în editorul de șabloane, veți observa o secțiune. Deschideți acea secțiune și schimbați culoarea de fundal la negru.

  • Culoare fundal: # 000000
Configurarea fundalului secțiunii Divi

spaţierea

Accesați fila de design a secțiunii și adăugați niște căptușeli personalizate de sus și de jos.

  • Garnitură de top: 10px
  • Garnitura de jos: 10px
Configurarea distanțării secțiunii Divi

Adăugați o nouă linie

Structura coloanei

Să continuăm adăugând o nouă linie la secțiunea care are următoarea structură:

Configurarea aspectului modulului de linie

spaţierea

Fără a adăuga modificări, să deschidem setările rândului și să facem câteva ajustări ale spațiului.

  • Folosiți Jgheabul personalizat: Da
  • Lățimea jgheabului: 1
  • Lățime: 90%
  • Lățimea maximă: 100%
Setări de spațiere a modulului de linie

spaţierea

Eliminați toate distanțele interioare de sus și de jos.

  • Marja internă mare: 0px
  • Marja internă scăzută: 0px
Setări de spațiere a modulului de linie Divi

Adăugați modulul Woo Cart Notice la coloană

Conținut dinamic

Singurul modul de care avem nevoie pe această linie și secțiune este modulul Woo Cart Notice. Asigurați-vă că „Acest produs” este selectat în secțiunea dinamică.

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați cu ușurință orice design de site web cu un aspect profesionist. Nu mai plătiți scump pentru ceea ce puteți face singur. [Gratuit]

  • Produs: Acest produs
Setări woo cart notice module divi

Fundal de culoare

Apoi, deschideți setările modulului și utilizați un fundal transparent.

  • Culoare fundal: rgba (0,0,0,0)
Woo cart modul setări divi

Setări text

Treceți la fila „Proiectare” și modificați fontul textului.

  • Font de text: Karla
Setările fontului modulului Divi

Setarea butoanelor

Finalizați setările pluginului definind setările de stil:

  • Utilizați stiluri personalizate pentru buton: Da
  • Dimensiunea butonului text: 20px
  • Culoare text buton: # 000000
  • Fundal buton: # ffd623
  • Lățimea marginii butonului: 0px
  • Buton rotunjit: 0px
Setări de culoare pentru modulul Woo Cart Notice
  • Font de buton: Oswald
  • Stil de font pentru butoane: Shift
Reglarea designului culorii modulului Woo Cart Notice
  • Marja internă mare: 20px
  • Marja internă scăzută: 20px
  • Marja internă stângă: 50px
  • Marja dreaptă internă: 50px
Modulul de proiectare a configurației vă atrage atenția asupra coșului

Adăugați secțiunea # 2

Fundal gradient

Adăugați o altă secțiune obișnuită sub cea anterioară. Apoi, deschideți setările și utilizați un fundal de gradient după cum urmează:

  • Culoare 1: # 000000
  • Culoarea 2: #ffffff
  • Poziția de pornire:
    • Desktop: 30%
    • Tabletă: 57%
    • Telefon: 54%
  • Poziția finală:
    • Desktop: 30%
    • Tabletă: 57%
    • Telefon: 54%
Reglare spate a modulului liniei Divi

spaţierea

Să mergem la fila Design și să adăugăm o marjă internă ridicată.

  • Garnitură de top: 150px
Configurarea spațiului modulului Divi line

Adăugați o linie nouă

Structura coloanei

Continuați adăugând o nouă linie cu aceeași structură ca în imaginea de mai jos:

Configurare stil linie Divi

dimensionarea

Fără a adăuga încă modificări, vom deschide setările și vom schimba spațiul după cum urmează:

  • Folosiți jgheaburi personalizate: Da
  • Spațiu de jgheab: 1
  • Lățime: 95%
  • Lățime maximă: 2560px
  • Aliniere linie: centru
Modulul de configurare a canalului divi

spațiere

Vom elimina și marja internă superioară.

  • Garnitură de top: 0px
Configurarea spațiului modulului Divi

Elementul principal

Și pentru a centra conținutul coloanei pe desktop, vom folosi două linii de cod CSS în elementul principal al modulului rând.

Desktop:

afișare: flex; aliniere-elemente: centru;

Tabletă și telefon:

display: block;
Setările stilului modulului de linie Divi

Adăugați modulul Woo Image la coloana 1

Conținut dinamic

Este timpul să adăugăm module, vom începe cu modulul Woo Images din coloana 1. Asigurați-vă că este selectat „Acest produs”.

  • Produs: Acest produs
Setările modulului de imagine produs Woocommerce

Efect de animație cu defilare verticală

Adăugăm mișcare subtilă imaginii folosind efectul de derulare a mișcării orizontale din fila avansată.

  • Activați mișcarea verticală: Da
  • Start offset:
    • Birou: -4
    • Tabletă și telefon: 0
  • Offset mediu: 0
  • Decalaj final: 0
  • Efect de declanșare a mișcării: mijlocul elementului
Reglarea modulului de imagine Divi

Adăugați modulul de titlu Woo la coloana 2

Conținut dinamic

În coloana 2, primul mod de care avem nevoie este un mod de titlu Woo. Asigurați-vă că „Acest produs” este selectat în zona de conținut dinamic.

  • Produs: Acest produs
grila de beneficii a produsului

Setări text de titlu

Apoi accesați fila de design și stilizați textul titlului după cum urmează:

  • Titlul fontului: Oswald
  • Stilul fontului: majuscule
  • Culoarea textului titlului: # ffd623
  • Dimensiunea textului titlului: 80px
Reglarea designului modulului titlu Divi

spaţierea

Completați modulul de titlu Woo adăugând margini stânga și dreapta.

Căutați cele mai bune teme și pluginuri WordPress?

Descărcați cele mai bune pluginuri și teme WordPress pe Envato și creați cu ușurință site-ul dvs. Web. Deja mai mult de descărcări 49.720.000. [EXCLUSIV]

  • Marja stângă: 5%
  • Marja dreapta: 5%
Setarea modulului titlu Divi

Adăugați modulul descriere Woo la coloana 2

Conținut dinamic

Să trecem la modulul următor, care este un modul de descriere Woo. Pentru aceasta folosim următorul conținut dinamic:

  • Produs: Acest produs
  • Tip descriere: Scurtă descriere
Setări modul descriere produs

Setări text

Treceți la fila de proiectare a modulului și modificați setările de text în consecință:

  • Font de text: Karla
  • Culoarea textului: #dbdbdb
  • Dimensiunea textului: 17 px (desktop și tabletă), 15 px (telefon)
  • Înălțimea liniei de text: 1,9 em
Descrierea modulului de reglare a culorii divi

dimensionarea

Apoi modificați lățimea pe diferite dimensiuni ale ecranului.

  • Lățime: 59% (desktop), 82% (tabletă și telefon)
Reglarea lățimii modulului rezumat Divi

spaţierea

Completați modulul de descriere Woo adăugând valori de marjă personalizate în setările de spațiere.

  • Marja superioară: 50px
  • Marja de jos: 100px
  • Marja stângă: 5%
  • Marja dreapta: 5%
Modulul de descriere a produsului Divi

Adăugați modulul Blurb la coloana 2

Conținut dinamic

Pentru a afișa beneficiile produsului pe care le-am adăugat în prima parte a acestui tutorial, vom folosi modulele Blurb. Adăugați un prim modul Blurb și utilizați conținutul dinamic al primului beneficiu produs pentru titlu și corp.

  • Titlu: Titlul beneficiului 1
  • Corp: Descrierea beneficiului 1
Setarea textului modulului rezumat Divi

Incarca imaginea

Încarcă o imagine sau folosește o pictogramă la alegere. Puteți găsi cele pe care le-am folosit pe parcursul acestui tutorial în folderul de descărcare pe care l-ați putut descărca la începutul acestui tutorial.

Configurarea divi a rezumatului modulului de imagine

Setări imagine / pictogramă

Accesați fila de design a modulului și schimbați setările imagine / pictogramă după cum urmează:

  • Poziție imagine / pictogramă: partea de sus
  • Aliniere imagine / pictogramă: stânga
Modul de reglare Divi

Setări text titlu

Modificăm în continuare setările textului titlului.

  • Titlul fontului: Oswald
  • Titlul Stil font
  • Titlu Dimensiune text: 25px
Configurați fontul modulului rezumat divi

Setări text corp

Alături de setările textului corpului.

  • Font de corp: Karla
  • Dimensiunea textului: 17 px (desktop și tabletă), 15 px (telefon)
  • Înălțimea liniei corpului: 1,9 em
Configurați rezumatul modulului text div i

dimensionarea

Apoi accesați setările de dimensionare și modificați lățimile. Este important să utilizați o lățime principală mai mică de 50%, acest lucru ne va permite să afișăm două module Blurb unul lângă altul în următorii pași.

  • Lățimea imaginii: 25%
  • Lățime: 49%
Configurați dimensiunea modulului rezumat divi

spaţierea

De asemenea, vom adăuga spații în jurul modulului Blurb folosind valori de umplere personalizate pe diferite dimensiuni de ecran.

  • Înveliș superior: 8%
  • Înveliș inferior: 8%
  • Căptușire stânga: 8% (desktop și tabletă), 2% (telefon)
  • Căptușire dreapta: 8% (desktop și tabletă) 2% (telefon)
Configurați spațiul modulului rezumat divi

Elementul principal

Acum ne vom asigura că modulul Rezumat afișează textul unul lângă celălalt, în doi pași. În primul rând, ne vom asigura că lățimea modulului este mai mică de 50% (așa cum am făcut în pasul anterior). Apoi, vom folosi proprietatea de pe rând. Vom adăuga această proprietate CSS pe elementul principal din secțiunea avansată.

display: inline-block;
Adăugați modul civi cod civi

Clonați modulul sumar de 3 ori

După ce ați finalizat primul mod Blurb, îl puteți clona de trei ori. Veți observa automat că modulele Blurb apar într-o grilă.

Denumirea produsului secțiunea divi

Editați imaginile modulului Blurb

Editați imaginea în fiecare pod duplicat Blurb. Le puteți găsi în folderul de descărcare pe care este posibil să îl fi descărcat la începutul acestui articol.

Imagine modul modul rezumat Divi

Modificați conținutul dinamic al modulului Blurb

De asemenea, modificați conținutul dinamic al fiecărui modul duplicat Blurb.

  • Titlu: Titlul serviciului (2,3 sau 4)
  • Corp: descrierea avantajelor (2,3 sau 4)
Regulile modulului rezumat Divi

Adăugați chenare la modulele Blurb individual

Setări de bord pentru modulul Blurb 1

Acum, pentru a termina de proiectat grila noastră, vom adăuga chenare la modulele Blurb la nivel individual. Deschideți primul mod Blurb și utilizați o margine dreaptă.

  • Lățimea marginii drepte: 1px
  • Culoarea marginii drepte: # ffd623
Modul sumar divi de configurare a chenarului rotunjit

Adăugați, de asemenea, un chenar de jos la primul modul Blurb.

  • Lățimea marginii inferioare: 1px
  • Culoarea marginii inferioare: # 000000
Configurați marginea de jos a divi
Setări de bord pentru modulul Blurb 2

Apoi deschideți al doilea modul Blurb și utilizați un chenar de jos.

  • Lățimea marginii inferioare: 1px
  • Culoarea marginii inferioare: # 000000
Configurare modul rezumat modul rezumat divi
Setări de bord pentru modulul Blurb 3

Completați designul grilei adăugând un chenar drept la al treilea modul Blurb.

Creați ușor magazinul dvs. online

Descărcați gratuit WooCommerce, cele mai bune pluginuri de e-commerce pentru a vă vinde produsele fizice și digitale pe WordPress. [Recomandat]

  • Lățimea marginii drepte: 1px
  • Culoarea marginii drepte: # ffd623
grila de beneficii a produsului

Adăugați Woo Adaugă în coș Modulul din coloana 2

Conținut dinamic

Ultimul modul de care avem nevoie în proiectarea noastră este un modul Woo Add to Cart. Asigurați-vă că „Acest produs” este selectat în zona de conținut dinamic.

  • Produs: Acest produs
Adăugați la card setările modulului divi

Setări câmp

Mergeți la următoarea filă de proiectare și modificați setările câmpului.

  • Culoarea fundalului câmpurilor: #ffffff
  • Culoarea textului câmpului: # 000000
Configurați modulul de culoare stil adăugați în coș divi
  • Câmpuri rotunjite: 0px (toate colțurile)
  • Lățimea marginii inferioare a câmpurilor: 1px
  • Culoarea marginii de jos a câmpurilor: # 000000
Configurați distanța dintre secțiunile Divi

Setări buton

Apoi, stilează butonul în consecință:

  • Utilizați stiluri personalizate pentru buton: Da
  • Dimensiunea butonului: 20 pixeli
  • Culoarea textului butonului: # 000000
  • Culoarea fundalului butonului: # ffd623
  • Lățimea marginii butonului: 0px
  • Raza de margine a butonului: 0px
Configurați designul butonului divi
  • Font de buton: Oswald
  • Stilul fontului cu buton: cu majuscule
Configurați butonul divi
  • Garnitură superioară: 20px
  • Garnitura de jos: 20px
  • Plăcuță stângă: 50px
  • Căptușire dreapta: 50px
Configurați dimensiunea modulului divi

spaţierea

Și completați parametrii modulului adăugând valori ale marjei personalizate.

  • Marja superioară: 100px
  • Marja stângă: 5%
Configurați spațiul div

3. Salvați modificările generatorului de temă și previzualizați rezultatul

După ce ați terminat de proiectat șablonul de pagină al produsului, puteți salva toate modificările dvs. Builder de temă și puteți afișa rezultatele pe produsele dvs.!

Salvați designul divi
Salvați modificările divi

studiu

Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra modului în care arată pe diferite dimensiuni de ecran.

Rezultatul demonstrației

Ultimele gânduri

În acest articol, ți-am arătat cum să devii creativ cu următorul șablon de pagină de produs Divi. Mai exact, v-am arătat cum să includeți o grilă dinamică de beneficii pentru produs, pentru a adăuga beneficii suplimentare paginii dvs. de produs. Am creat acest tutorial folosind Divi în combinație cu pluginul Advanced Custom Fields. De asemenea, puteți descărca gratuit fișierul JSON! Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Acest articol conține comentarii 0

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate *

Acest site folosește Akismet pentru a reduce nedorite. Aflați mai multe despre modul în care sunt utilizate datele dvs. de comentarii.

Inapoi in top