Kur krijojmë një faqe produkti në Divi, ne mund të përdorim modulin fizarmonikë për të shfaqur informacionin e produktit duke përdorur përmbajtje dinamike. Kjo do t'ju japë një dizajn unik për faqet e produkteve, duke ruajtur hapësirën e vlefshme në faqe.
Në këtë manual, ne do t'ju tregojmë se si të përdorni tiparin dinamik të përmbajtjes së Divi për të krijuar një fizarmonikë me informacione mbi produktin, si dhe mënyrën e dizajnimit të fizarmonikës (dhe përmbajtjen e saj) duke përdorur Divi Visual Builder.
Le të fillojë.
studim
Këtu është një vrojtim i dizajnit që do të ndërtojmë në këtë tutorial.
Mbani në mend se duhet të keni një konfigurim produkti siç përshkruhet në këtë manual për të arritur të njëjtat rezultate.
fillim
Për të filluar, do të duhet të bëni sa më poshtë:
- Nëse nuk e keni bërë tashmë, instaloni dhe aktivizoni Tema divi instaluar (ose shtojcën Divi Builder nëse nuk e përdorni Tema divi).
- Instaloni dhe aktivizoni shtojcën WooCommerce. Nëse konfiguroni WooCommerce për herë të parë, do t'ju duhet të ekzekutoni magjistarin bazë të konfigurimit për të përgatitur dyqanin tuaj. Pasi të keni mbaruar, jeni gati të shtoni produktet tuaja të reja.
- Krijoni një produkt të ri siç tregohet më poshtë.
Vendosja e produktit të mostrës
Për të konfiguruar produktin shembull për këtë manual, shkoni te Produktet> Shto të Re. Jepni produktit titullin "Masazh (sesion i vetëm)" dhe klikoni për të përdorur Divi Builder.
Pastaj azhurnoni cilësimet e mëposhtme të faqes së produktit dhe informacionin e produktit:
1. Nën Parametrat e Faqe Divi, zgjidhni paraqitjen No Sidebar.
2. Shtoni / zgjidhni një kategori produkti
3. Shtoni imazhin e produktit
4. Shtoni përmbajtjen e përshkrimit.
5. sous Të dhëna të produktit, ndryshoni llojin e produktit në Produkt të ndryshueshëm.
6. Shtoni një atribut me emrin "Type" me vlerat e mëposhtme: Suedisht | Gur i nxehtë | Aromaterapia | Ind i thellë. Sigurohuni që të zgjidhni "Përdoret për variacione".
7. Më pas në skedën Variacione nën ndryshimin e données të produktit, përdorni hyrjen rënëse për të krijuar variacione nga të gjitha atributet.
8. Zgjidhni "Caktoni Pricesmime të Rregullta" nga menyja rënëse për të vendosur çmimin e rregullt për të tre variablat.
9. Në kutinë e dialogut, vendosni vlerën "50" dhe zgjidhni OK.
10. një Pasi të keni mbaruar, ruani ose publikoni produktin.
Tani jeni gati për të filluar hartimin e paraqitjes tuaj me një Acordion të Produkteve të personalizuara.
Krijimi i fizarmonikës Info Produkt me përmbajtje dinamike në Divi
Paraqitja e paracaktuar e produktit shfaq informacionin e produktit duke përdorur module të ndryshme Woo. Për këtë shembull, ne duam të përdorim fizarmonikën për të shfaqur tre informacione kryesore në lidhje me produktin: përshkrimin e produktit, informacion shtesë të produktit dhe rishikime të produktit. Këto tre pjesë të përmbajtjes shfaqen aktualisht në modulin e skedave woo. E tëra çfarë duhet të bëjmë është të heqim modulin e skedave woo dhe ta zëvendësojmë atë me një modul fizarmonikë me të njëjtin informacion të prezantuar përmes përmbajtjes dinamike.
Ja se si ta bëjmë atë.
Së pari, klikoni për të përdorur Divi në sistemin front-end për të vendosur gjeneratorin vizual. Pastaj hiqni modulin Woo Tabs.
Pastaj shtoni një modul të ri Akordion për të zëvendësuar skedat.
Në dritaren pop-up Settings të fizarmonikës, klikoni në ikonën e ingranazhit në fizarmonikën e parë për të hapur cilësimet individuale të fizarmonikës.
Vendosni titullin "Rreth produktit".
Pastaj rri pezull mbi kutinë e futjes së përmbajtjes së trupit dhe kliko në ikonën e përmbajtjes dinamike.
Zgjidhni "Përshkrimi i produktit" nga lista dinamike e përmbajtjes.
Kjo do të shfaq përshkrimin e gjatë të produktit që kemi përcaktuar për produktin në sfondin e prapme.
Pasi të jetë vendosur përmbajtja e parë e fizarmonikës, hapni cilësimet e dytë të fizarmonikës dhe azhurnoni si vijon:
- Titulli: Specifikimet
Pastaj shtoni përmbajtjen dinamike "Informacione shtesë të produktit" në trup.
Pasi të jetë gati përmbajtja e dytë fizarmonike, shtoni një element të ri fizarmonik dhe azhurnoni cilësimet e fizarmonikës si më poshtë:
- Titulli: Informacion shtesë
Pastaj shtoni përmbajtjen dinamike "Shqyrtime të Produkteve" në trup për të vendosur sendin / përmbajtjen e rishikimit të produktit.
SHENIM: Sigurohuni që të keni shtuar të paktën një përmbledhje të produktit në mënyrë që të shihni përmbajtjen në faqen e drejtpërdrejtë.
Dizajni i marrëveshjes së produktit dhe përmbajtjes me Divi
Tani që fizarmonika jonë e informacionit të produktit ka përmbajtje dinamike për të shfaqur informacionin e produktit, ne jemi gati ta rregullojmë atë duke përdorur cilësimet e modulit fizarmonikë të integruar.
Hapni cilësimet e modulit Acordion dhe azhurnoni sa vijon:
- Ngjyra e ikonës: # ff9375
- Përdorni madhësinë e shkronjave të ikonës: PO
- Madhësia e fontit të ikonave: 26px
- Ndërro ngjyrën e sfondit: #ffffff
- Titulli i tekstit i hapur Ngjyra: #ff9375
- Titulli i tekstit: #222222
- Font Titulli: Lato
- Titulli Policia: Bold
- Titulli Stili i Fonts: TT
- Titulli i tekstit Titulli: 20px
- Hapësira e shkronjave të titullit: 0.2em
- Lartësia e linjës së titullit: 2em
- Font trupi: Lato
- Madhësia e tekstit të trupit: 16px
- Lartësia e trupit: 1.8em
- Ngjyra e tekstit të lidhjes: #ff9375
Kjo do të synojë të gjitha lidhjet që keni në përmbajtjen dinamike për secilën fizarmonikë, si vlerësimi i yjeve.
- Ngjyra e tekstit të listës së pakontrolluar: # ff9375
- Lloji i stilit të listës së pakontrolluar: Rrethi
- Gërmimi i artikullit të parenditur të listës: 5%
- Gjerësia e kufirit: 0px
- Gjerësia e kufirit të lartë: 1px
- Ngjyra e kufirit të lartë: #222222
Dhe për hapin e fundit, le të shtojmë një ekstrakt të vogël css për të nxjerrë diferencën e parazgjedhur midis peshoreve fizarmonike.
Në skedën Advanced, shtoni CSS të mëposhtme në elementin Toggle:
margin-bottom: 0px;
Tani le të shohim modelin përfundimtar të fizarmonikës së informacionit të produktit.
Rregullimet përfundimtare në paraqitjen
Disa rregullime mund të bëhen në paraqitjen që të përputhen me modelin e fizarmonikës. Për shembull, ne mund të rregullojmë fontin e secilit prej moduleve në Lato, të shtojmë një kufi të personalizuar dhe rrezen e kufirit rreth listës zbritëse të ndryshueshme dhe të azhurnojmë butonin Shto në shportë me një ngjyrë të qëndrueshme të sfondit që i përshtatet atij.
Pasi të jetë bërë, këtu është rezultati përfundimtar.
Unë e kam përfshirë këtë dizajn si një shkarkim falas më lart. Ju lutem mos ngurroni ta kontrolloni vetë. Vini re se duhet të keni konfigurimin e produktit të përshkruar në këtë manual për të arritur të njëjtat rezultate.
SHËNIM: Ngjyra e paracaktuar për shumicën e artikujve WooCommerce i një produkti në Divi trashëgohet nga vlera dytësore e ngjyrave të cilësimeve të personalizimit të temës. Mund të jetë më e lehtë të përditësohet kjo ngjyrë dytësore pasi të bëhet moduli i ngjyrave nga woo.
Mendimet e fundit
Siç kemi mësuar, modulet Woo nuk janë të vetmet gjëra që mund të përdoren për të nxjerrë informacion dinamik të produktit. Akordoni i Informacionit të Produktit është një shembull i shkëlqyeshëm se si mund të përdorni çdo modul Divi për të shfaqur informacionin e produktit në një mënyrë unike dhe koncize. Mos ngurroni të eksploroni dizajne të reja dhe emocionuese të fizarmonikës për faqet e produkteve tuaja. Dhe, sigurisht, ju mund të përdorni shumë module lëkundëse në vend të fizarmonikës për të arritur rezultate të ngjashme.
