Modul în care vă proiectați pagina de produs are un impact imediat asupra comportamentului dumneavoastră vizitatori. Un design bine conceput și personalizat de pagină de produs poate permite vizitatori pentru a decide mai ușor dacă vor să-ți cumpere produsul. Dacă sunteți în căutarea unei modalități de a face pagina de produs mai captivantă, probabil că vă va plăcea acest tutorial.
Vă vom arăta cum să includeți o grilă dinamică de beneficii ale produsului în designul dvs. folosind 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 cuprins 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.
1. Instalați pluginul ACF Plugin și grupul de beneficii pentru produse
Instalați pluginul Advanced Advanced Fields
Pentru a afișa diferitele beneficii ale produselor în backend-ul produselor noastre, vom folosi pluginul gratuit Câmpuri personalizate avansate. Accesați-vă Backend WordPress> Pluginuri> Adăugare nouă> Găsire plugin ACF> Instalare> Activare .
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.
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 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
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
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.
Completați câmpurile Beneficii pentru produse
Și îndepliniți beneficiile produsului.
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”.
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ă.
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”.
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
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
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ă:
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%
spaţierea
Eliminați toate distanțele interioare de sus și de jos.
- Marja internă mare: 0px
- Marja internă scăzută: 0px
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ă.
- Produs: Acest produs
Fundal de culoare
Apoi, deschideți setările modulului și utilizați un fundal transparent.
- Culoare fundal: rgba (0,0,0,0)
Setări text
Treceți la fila „Proiectare” și modificați fontul textului.
- Font de text: Karla
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
- Font de buton: Oswald
- Stil de font pentru butoane: Shift
- Marja internă mare: 20px
- Marja internă scăzută: 20px
- Marja internă stângă: 50px
- Marja dreaptă internă: 50px
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%
spaţierea
Să mergem la fila Design și să adăugăm o marjă internă ridicată.
- Garnitură de top: 150px
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:
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
spațiere
Vom elimina și marja internă superioară.
- Garnitură de top: 0px
Elementul principal
Și pentru a centra cuprins coloana de pe DeskTop, vom folosi două linii de cod CSS în elementul principal al liniei de modul.
Desktop:
afișare: flex; aliniere-elemente: centru;
Tabletă și telefon:
display: block;
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
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
Adăugați modulul de titlu Woo la coloana 2
Conținut dinamic
În coloana 2, primul modul de care avem nevoie este un modul Woo Title. Asigurați-vă că „Acest produs” este selectat în casetă. cuprins dinamic.
- Produs: Acest produs
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
spaţierea
Completați modulul de titlu Woo adăugând margini stânga și dreapta.
- Marja stângă: 5%
- Marja dreapta: 5%
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 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
dimensionarea
Apoi modificați lățimea pe diferite dimensiuni ale ecranului.
- Lățime: 59% (desktop), 82% (tabletă și telefon)
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%
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
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.
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
Setări text titlu
Modificăm în continuare setările textului titlului.
- Titlul fontului: Oswald
- Titlul Stil font
- Titlu Dimensiune text: 25px
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
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%
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)
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;
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ă.
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.
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)
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
Adăugați, de asemenea, un chenar de jos la primul modul Blurb.
- Lățimea marginii inferioare: 1px
- Culoarea marginii inferioare: # 000000
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
Setări de bord pentru modulul Blurb 3
Completați designul grilei adăugând un chenar drept la al treilea modul Blurb.
- Lățimea marginii drepte: 1px
- Culoarea marginii drepte: # ffd623
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
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
- Câmpuri rotunjite: 0px (toate colțurile)
- Lățimea marginii inferioare a câmpurilor: 1px
- Culoarea marginii de jos a câmpurilor: # 000000
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
- Font de buton: Oswald
- Stilul fontului cu buton: cu majuscule
- Garnitură superioară: 20px
- Garnitura de jos: 20px
- Plăcuță stângă: 50px
- Căptușire dreapta: 50px
spaţierea
Și completați parametrii modulului adăugând valori ale marjei personalizate.
- Marja superioară: 100px
- Marja stângă: 5%
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.!
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.
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.
