Când creăm o pagină de produs în Divi, putem folosi modulul acordeon pentru a afișa informații despre produs folosind conținut dinamic. Acest lucru vă va oferi un design unic pentru paginile produsului, păstrând în același timp spațiu valoros pe pagină.
În acest tutorial, vă vom arăta cum să utilizați funcția de conținut dinamic Divi pentru a crea un acordeon cu informații despre produs, precum și cum să proiectați acordeonul (și conținutul acestuia) folosind Divi Visual Builder.
Să începem.
studiu
Iată o previzualizare a designului pe care îl vom construi în acest tutorial.
Rețineți că trebuie să aveți o configurație de produs așa cum este descris în acest tutorial pentru a obține aceleași rezultate.
start
Pentru început, va trebui să faceți următoarele:
- Dacă nu ați făcut-o deja, instalați și activați Divi tema instalat (sau pluginul Divi Builder dacă nu utilizați Divi tema).
- Instalați și activați pluginul WooCommerce. Dacă configurați WooCommerce pentru prima dată, va trebui să rulați expertul de configurare de bază pentru a vă pregăti magazinul. Odată terminat, sunteți gata să adăugați noile produse.
- Creați un produs nou așa cum se arată mai jos.
Configurarea produsului probă
Pentru a configura exemplul de produs pentru acest tutorial, accesați Produse> Adăugați un nou. Dați produsului titlul „Masaj (sesiune simplă)” și faceți clic pentru a utiliza Divi Builder.
Apoi actualizați următoarele setări ale paginii de produs și informațiile despre produs:
1. În Setări pagina Divi, selectați aspectul No Bara laterală.
2. Adăugați / selectați o categorie de produse
3. Adăugați imaginea produsului
4. Adăugați conținutul descrierii.
5. sub date al produsului, schimbați tipul de produs în Produs variabil.
6. Adăugați un atribut numit „Tip” cu următoarele valori: suedeză | Piatra fierbinte | Aromaterapie | Țesut adânc. Asigurați-vă că selectați „Folosit pentru variante”.
7. Apoi, în fila Variații sub comutatorul de données al produsului, utilizați intrarea derulantă pentru a crea variații din toate atributele.
8. Selectați „Setați prețuri regulate” din meniul derulant pentru a seta prețul obișnuit pentru cele trei variabile.
9. În caseta de dialog, introduceți valoarea "50" și selectați OK.
10. o După ce ați terminat, salvați sau publicați produsul.
Acum sunteți gata să începeți să vă proiectați macheta cu un acordon de produse personalizat.
Crearea acordeonului Informații despre produs cu conținut dinamic în Divi
Aspectul implicit al produsului afișează informații despre produs utilizând diferite module Woo. Pentru acest exemplu, dorim să folosim acordeonul pentru a afișa trei informații principale despre produs: descrierea produsului, informații suplimentare despre produs și recenzii despre produs. Aceste trei bucăți de conținut sunt afișate în prezent în modulul tab-urilor Woo. Tot ce trebuie să facem este să îndepărtăm modulul Woo Tabs și să îl înlocuim cu un modul acordeon cu aceleași informații introduse prin conținut dinamic.
Iată cum să faceți acest lucru.
Mai întâi, faceți clic pentru a utiliza Divi pe sistemul front-end pentru a implementa generatorul vizual. Apoi eliminați modulul Woo Tabs.
Apoi adăugați un nou modul Accordion pentru a înlocui file.
În fereastra pop-up Setări acordeon, faceți clic pe pictograma roată de pe primul acordeon pentru a deschide setările individuale de acordeon.
Introduceți titlul „Despre produs”.
Apoi, plasați cursorul peste caseta de introducere a conținutului corpului și faceți clic pe pictograma conținut dinamic.
Selectați „Descrierea produsului” din lista de conținut dinamic.
Aceasta va afișa pe backend descrierea lungă a produsului pe care l-am definit pentru produs.
Odată ce primul conținut de acordeon este în loc, deschideți a doua setare de acordeon și actualizați următoarele:
- Titlu: Specificații
Apoi adăugați conținutul dinamic „Informații suplimentare despre produs” în corp.
După ce al doilea conținut de acordeon este gata, adăugați un nou element de acordeon și actualizați setările acordeonului după cum urmează:
- Titlu: Informații suplimentare
Apoi adăugați conținutul dinamic „Recenzii produs” în corp pentru a încorpora articolul / conținutul recenziei produsului.
NOTĂ: Asigurați-vă că ați adăugat cel puțin o recenzie a produsului pentru a vedea conținutul pe pagina live.
Proiectarea acordului de produs și conținut cu Divi
Acum, când acordeonul nostru de informații despre produs are conținutul dinamic pentru a afișa informații despre produs, suntem gata să îl personalizăm folosind setările modulului de acordeon încorporat.
Deschideți setările modulului acordeon și actualizați următoarele:
- Culoare pictogramă: # ff9375
- Utilizați dimensiunea fontului pictogramei: DA
- Icon Dimensiune font: 26px
- Comutați culoarea de fundal: #ffffff
- Deschideți titlul textului Culoare: #ff9375
- Titlul textului: #222222
- Titlul fontului: Lato
- Poliția Titlu: Bold
- Titlu Font Style: TT
- Dimensiune text text: 20px
- Spațiul literelor din titlu: 0.2em
- Înălțimea liniei de titlu: 2em
- Font pentru corp: Lato
- Dimensiunea textului corpului: 16px
- Înălțimea corpului: 1.8em
- Culoarea textului linkului: #ff9375
Acest lucru va viza toate linkurile pe care le aveți în conținutul dinamic pentru fiecare acordeon, cum ar fi ratingul stelei.
- Culoarea textului din lista neordonată: # ff9375
- Tipul de stil de listă neordonat: Cerc
- Indentare neordonată a articolului din listă: 5%
- Lățimea marginii: 0px
- Lățimea marginii superioare: 1px
- Culoarea marginii superioare: #222222
Și pentru ultimul pas, să adăugăm un mic extract css pentru a extrage marja implicită între cântarul acordeonului.
În fila Advanced, adăugați următorul CSS la elementul Toggle:
margin-bottom: 0px;
Acum să aruncăm o privire la designul final al acordeonului cu informații despre produs.
Ajustări finale ale aspectului
Se pot face câteva ajustări ale aspectului pentru a se potrivi cu designul acordeonului. De exemplu, putem ajusta fontul fiecărui modul la Lato, putem adăuga o margine personalizată și o rază de margine în jurul listei derulante variabile și putem actualiza butonul Adăugați în coș cu o culoare de fundal solidă care i se potriveste.
Odată finalizat, iată rezultatul final.
Am inclus acest design ca descărcare gratuită de mai sus. Vă rugăm să nu ezitați să o verificați singuri. Rețineți că trebuie să aveți configurația produsului descrisă în acest tutorial pentru a obține aceleași rezultate.
NOTĂ: Culoarea implicită pentru majoritatea articolelor WooCommerce a unui produs în Divi este moștenit din valoarea secundară a culorii a setărilor de personalizare a temei. Ar putea fi mai ușor să actualizați această culoare secundară odată cu modulul de culori prin woo.
Ultimele gânduri
După cum am aflat, Woo Mods nu sunt singurele lucruri care pot fi utilizate pentru a extrage informații dinamice despre produs. Acordionul cu informații despre produs este un exemplu excelent al modului în care puteți utiliza orice modul Divi pentru a afișa informațiile despre produs într-un mod unic și concis. Simțiți-vă liber să explorați modele noi și interesante de acordeon pentru paginile dvs. de produse. Și, desigur, puteți utiliza mai multe module rocker în loc de un acordeon pentru a obține rezultate similare.
