Mënyra se si e dizajnoni faqen e produktit tuaj ka një ndikim të menjëhershëm në sjelljen tuaj vizitorët. Një dizajn i mirë-projektuar dhe i personalizuar i faqes së produktit mund të lejojë vizitorët për të vendosur më lehtë nëse duan të blejnë produktin tuaj. Nëse po kërkoni një mënyrë për ta bërë faqen e produktit tuaj më tërheqës, me siguri do t'ju pëlqejë ky tutorial.
Ne do t'ju tregojmë se si të përfshini një rrjet dinamik të përfitimeve të produktit në dizajnin tuaj duke përdorur Divi dhe shtojcën Advanced Custom Fields. Ne do të fillojmë duke krijuar një grup në terren për përfitime. Më pas do të plotësojmë fushat me porosi në faqen tonë të produktit dhe do ta përfshijmë atë përmbajtje dinamike në shabllonin e faqes së produktit tonë.
Rezultati i mundshëm
Para se të zhyteni në tutorial, le të hedhim një vështrim të shpejtë të rezultatit në madhësi të ndryshme të ekranit.
1. Instaloni shtojcën e shtojcës ACF Plugin And Benefit Field Field Group
Instaloni shtojcën Advanced Advanced Fields
Për të shfaqur përfitimet e ndryshme të produktit në pjesën e pasme të produkteve tona, ne do të përdorim shtesën falas Fushat e avancuara të personalizuara. Qasja juaj WordPress backend> Plugins> Add new> Find ACF plugin> Install> Aktivizo .
Shkoni në fushat me porosi dhe shtoni një grup të ri fushash
Pasi të keni instaluar dhe aktivizuar shtojcën ACF, do të keni mundësi të hyni në fushat tuaja të personalizuara dhe të shtoni një grup të ri fushash.
Cilësimet e grupit fushor
Jepni një titull grupit tuaj të ri të fushave dhe lejoni që ajo të shfaqet vetëm në faqet e produkteve.
- "Lloji i mesazhit" është i barabartë me "Produktin"
Shtoni një fushë të parë
Vazhdoni duke shtuar një fushë të re për titullin e përfitimit të produktit tuaj të parë.
- Etiketa në terren: Titulli i përfitimit 1
- Lloji i fushës: teksti
Përsëritni hapin për fushat e mbetura
Bëni të njëjtën gjë për përfitimet e tjera të produktit dhe përshkrimet e tyre. Të gjitha këto fusha kërkojnë llojin e fushës "Tekst" të caktuar për ta.
- Titulli i shërbimit 1
- Përshkrimi i përfitimeve 1
- Titulli i shërbimit 2
- Përshkrimi i përfitimeve 2
- Titulli i shërbimit 3
- Përshkrimi i përfitimeve 3
- Titulli i shërbimit 4
- Përshkrimi i përfitimeve 4
2. Shtoni përfitime për produktet
Hapni ose shtoni një produkt të ri
Pasi të krijohen grupi dhe fushat tuaja të fushës, ju mund të shtoni përfitimet e produkteve në produktet tuaja në një nivel individual. Hapni një produkt të zgjedhur nga ju ose krijoni një të ri.
Plotësoni fushat e Përfitimet e Produkteve
Dhe plotësoni përfitimet e produktit.
3. Krijoni një shabllon të faqeve të produkteve në Divi Theme Builder
Shkoni te Divi Theme Builder dhe shtoni një model të ri
Timeshtë koha të fillojmë me Divi! Për të krijuar një model të ri, shkoni te Ndërtuesi i Temave Divi dhe klikoni në "Shto një model të ri".
Përdorni një shabllon për të gjitha produktet
Ne e përdorim këtë model në të gjitha produktet, por mos ngurroni të zgjidhni produktet me një kategori ose etiketë specifike.
Futni redaktuesin e modelit të trupit
Pastaj futni trupin e modelit duke klikuar në "Shtoni një organ me porosi" dhe duke zgjedhur "Krijoni një trup me porosi".
Redaktoni seksionin # 1
Ngjyrë e sfondit
Pasi të keni brenda redaktorin e shabllonit, do të vëreni një seksion. Hapeni atë pjesë dhe ndryshoni ngjyrën e sfondit në të zezë.
- Ngjyra e sfondit: # 000000
ndarje
Kaloni tek skedari i dizajnit të seksionit dhe shtoni disa mbushje të sipërme dhe të poshtme.
- Mbulesa e sipërme: 10px
- Mbushja e poshtme: 10px
Shtoni një rresht të ri
Struktura e kolonës
Le të vazhdojmë duke shtuar një rresht të ri në seksionin që ka strukturën e mëposhtme:
ndarje
Pa shtuar ndonjë mod, le të hapim cilësimet e rreshtit dhe të bëjmë disa rregullime të hapësirës.
- Përdorni ulluqet e personalizuara: Po
- Gjerësia e zorrës së trashë: 1
- Gjerësia: 90%
- Gjerësia maksimale: 100%
ndarje
Hiqni të gjithë hapësirën e brendshme të sipërme dhe të poshtme.
- Marzhi i lartë i brendshëm: 0px
- Marzhi i ulët i brendshëm: 0px
Shtoni modulin e Njoftimit për Shporta Woo në kolonë
Përmbajtja dinamike
Moduli i vetëm që na duhet në këtë linjë dhe seksion është moduli Woo Cart Notice. Sigurohuni që "Ky Produkt" është zgjedhur në seksionin dinamik.
- Produkti: Ky produkt
Sfond me ngjyra
Pastaj hapni cilësimet e modulit dhe përdorni një sfond transparent.
- Ngjyra e Sfondit: rgba (0,0,0,0)
Cilësimet e tekstit
Kaloni në skedën "Design" dhe ndryshoni fontin e tekstit.
- Shkronja e tekstit: Karla
Vendosja e butonit
Përfundoni cilësimet e shtojcës duke përcaktuar cilësimet e stilit:
- Përdorni stilet e personalizuara për butonin: Po
- Madhësia e tekstit të butonit: 20px
- Ngjyra e tekstit të butonit: # 000000
- Sfondi i Butonit: # ffd623
- Gjerësia e kufirit të butonit: 0px
- Butoni i rrumbullakosur i kufirit: 0px
- Shkronja e butonit: Oswald
- Stili i shkronjave të butonit: Shift
- Marzhi i lartë i brendshëm: 20px
- Marzhi i ulët i brendshëm: 20px
- Margjina e brendshme e majtë: 50px
- Margjina e brendshme e djathtë: 50px
Shtoni seksionin # 2
Sfondi i gradientit
Shtoni një seksion tjetër të rregullt nën atë të mëparshëm. Pastaj hapni cilësimet dhe përdorni një sfond gradient si më poshtë:
- Ngjyra 1: # 000000
- Ngjyra 2: #ffffff
- Pozicioni i fillimit:
- Desktop: 30%
- Tableta: 57%
- Telefon: 54%
- Pozicioni i fundit:
- Desktop: 30%
- Tableta: 57%
- Telefon: 54%
ndarje
Le të shkojmë në skedën Design dhe të shtojmë një diferencë të lartë të brendshme.
- Mbulesa e sipërme: 150px
Shto një rresht të ri
Struktura e kolonës
Vazhdoni duke shtuar një linjë të re me të njëjtën strukturë siç tregohet më poshtë:
sizing
Pa shtuar asnjë mods akoma, ne do të hapim cilësimet dhe do të ndryshojmë hapësirën si më poshtë:
- Përdorni ulluqet me porosi: Po
- Hapësira e ulluqeve: 1
- Gjerësia: 95%
- Gjerësia maksimale: 2560px
- Rreshtimi i linjave: Qendra
ndarje
Ne gjithashtu do të heqim kufirin e lartë të brendshëm gjithashtu.
- Mbulesa e sipërme: 0px
Elementi kryesor
Dhe për të përqendruar përmbajtje kolona në DeskTop, ne do të përdorim dy rreshta të kodit CSS në elementin kryesor të linjës së modulit.
Desktop:
ekran: flex; align-artikuj: qendër;
Tablet & Telefon:
ekran: bllok;
Shtoni modulin Woo Image në kolonën 1
Përmbajtja dinamike
It'sshtë koha për të shtuar module, ne do të fillojmë me modulin Woo Images në kolonën 1. Sigurohuni që të zgjidhet "Ky produkt".
- Produkti: Ky produkt
Efekti i animacionit me lëvizje vertikale
Ne i shtojmë lëvizje delikate imazhit duke përdorur efektin lëvizës horizontal të lëvizjes në skedën e përparuar.
- Aktivizoni lëvizjen vertikale: Po
- Fillimi i kompensimit:
- Zyra: -4
- Tableta dhe telefoni: 0
- Kompensimi mesatar: 0
- Përfundimi i kompensimit: 0
- Efekti i lëvizjes së këmbëzës: mesi i elementit
Shtoni modulin e titullit Woo në kolonën 2
Përmbajtja dinamike
Në kolonën 2, moduli i parë që na nevojitet është një modul titulli Woo. Sigurohuni që "Ky produkt" të jetë zgjedhur në kuti përmbajtje dinamike.
- Produkti: Ky produkt
Cilësimet e tekstit të titullit
Pastaj shkoni në skedën e dizajnit dhe stiloni tekstin e titullit si më poshtë:
- Shkronja e titullit: Oswald
- Stili i shkronjave të titullit:
- Ngjyra e tekstit të titullit: # ffd623
- Madhësia e tekstit të titullit: 80px
ndarje
Plotësoni modulin e titullit Woo duke shtuar kufijtë e majtë dhe të djathtë.
- Marzhi i majtë: 5%
- Marzhi i duhur: 5%
Shtoni modulin e përshkrimit Woo në kolonën 2
Përmbajtja dinamike
Le të kalojmë te moduli tjetër, i cili është një modul i përshkrimit Woo. Ne përdorim përmbajtjen e mëposhtme dinamike për këtë:
- Produkti: Ky produkt
- Lloji i përshkrimit: Përshkrimi i shkurtër
Cilësimet e tekstit
Kaloni në skedën e dizajnit të modulit dhe ndryshoni rregullimet e tekstit në përputhje me rrethanat:
- Shkronja e tekstit: Karla
- Ngjyra e tekstit: #dbdbdb
- Madhësia e tekstit: 17 px (desktop dhe tablet), 15 px (telefon)
- Lartësia e vijës së tekstit: 1,9 em
sizing
Pastaj ndryshoni gjerësinë në madhësi të ndryshme të ekranit.
- Gjerësia: 59% (desktop), 82% (tablet dhe telefon)
ndarje
Përfundoni modulin e përshkrimit Woo duke shtuar vlerat e marzheve të personalizuara në cilësimet e hapësirës.
- Marzhi i sipërm: 50px
- Marzhi i poshtëm: 100px
- Marzhi i majtë: 5%
- Marzhi i duhur: 5%
Shtoni modulin Blurb në kolonën 2
Përmbajtja dinamike
Për të shfaqur përfitimet e produktit që shtuam në pjesën e parë të këtij udhëzimi, do të përdorim modulet Blurb. Shtoni një modul të parë Blurb dhe përdorni përmbajtjen dinamike të përfitimit të parë të prodhuar për titullin dhe trupin.
- Titulli: Titulli i përfitimeve 1
- Trupi: Përshkrimi i përfitimeve 1
Ngarkoni imazhin
Ngarko një imazh ose përdor një ikonë të zgjedhjes tënde tjetër. Ju mund t'i gjeni ato që kemi përdorur gjatë gjithë këtij tutoriali në dosjen e shkarkimit që keni qenë në gjendje të shkarkoni në fillim të këtij tutorial.
Cilësimet e figurës / ikonës
Kaloni në skedën e dizajnit të modulit dhe ndryshoni cilësimet e figurës / ikonës si më poshtë:
- Vendosja e figurës / ikonës: Në krye
- Përshtatja e imazhit / ikonës: Majtas
Cilësimet e tekstit të titullit
Ne po modifikojmë cilësimet e tekstit të titullit tjetër.
- Font Titulli: Oswald
- Stili i shkronjave të titullit:
- Madhësia e tekstit të titullit: 25px
Cilësimet e tekstit të trupit
Së bashku me cilësimet e tekstit të trupit.
- Font trupi: Karla
- Madhësia e tekstit: 17 px (desktop dhe tablet), 15 px (telefon)
- Lartësia e vijës së trupit: 1,9 em
sizing
Pastaj shkoni te cilësimet e madhësisë dhe ndryshoni gjerësitë. Shtë e rëndësishme të përdorni një gjerësi kryesore më pak se 50%, kjo do të na lejojë të tregojmë dy module Blurb krah për krah në hapat e ardhshëm.
- Gjerësia e imazhit: 25%
- Gjerësia: 49%
ndarje
Ne gjithashtu do të shtojmë hapësira rreth modulit Blurb duke përdorur vlera të personalizuara të mbushjes në madhësi të ndryshme të ekranit.
- Mbushje e sipërme: 8%
- Mbushje e poshtme: 8%
- Mbushja e majtë: 8% (desktop dhe tablet), 2% (telefon)
- Mbushja e duhur: 8% (desktop dhe tablet) 2% (telefon)
Elementi kryesor
Tani do të sigurohemi që moduli Përmbledhje të shfaqë tekstin pranë njëri-tjetrit, në dy hapa. Së pari, ne do të sigurohemi që gjerësia e modulit është më pak se 50% (siç bëmë në hapin e mëparshëm). Tjetra, ne do të përdorim pronën në rresht. Ne do ta shtojmë këtë veti CSS në elementin kryesor në seksionin e përparuar.
shfaq: inline-block;
Kloni modulin përmbledhës 3 herë
Pasi të keni përfunduar modin e parë të Blurb, mund ta klononi atë tri herë. Automatikisht do të vini re që modulet Blurb shfaqen në një rrjet.
Redaktoni imazhet e modulit Blurb
Redaktoni imazhin në secilën pod të kopjuar të Blurb. Mund t'i gjeni në dosjen e shkarkimit që mund të keni shkarkuar në fillim të këtij artikulli.
Modifikoni përmbajtjen dinamike të modulit Blurb
Ndryshoni gjithashtu përmbajtjen dinamike të secilit modul të kopjuar Blurb.
- Titulli: Titulli i shërbimit (2,3 ose 4)
- Trupi: përshkrimi i avantazheve (2,3 ose 4)
Shtoni kufijtë në modulet Blurb individualisht
Përcaktoni cilësimet e kufirit të modulit 1
Tani, për të përfunduar dizajnimin e rrjetit tonë, ne do të shtojmë kufij në modulet Blurb në një nivel individual. Hapni modin e parë të Blurb dhe përdorni një bordurë të drejtë.
- Gjerësia e duhur e kufirit: 1px
- Ngjyra e duhur e kufirit: # ffd623
Shtoni gjithashtu një kufi të poshtëm në modulin e parë Blurb.
- Gjerësia e poshtme e kufirit: 1px
- Ngjyra e poshtme e kufirit: # 000000
Përcaktoni cilësimet e kufirit të modulit 2
Pastaj hapni modulin e dytë Blurb dhe përdorni një kufi të poshtëm.
- Gjerësia e poshtme e kufirit: 1px
- Ngjyra e poshtme e kufirit: # 000000
Përcaktoni cilësimet e kufirit të modulit 3
Plotësoni modelin e rrjetit duke shtuar një kufi të drejtë në modulin e tretë Blurb.
- Gjerësia e duhur e kufirit: 1px
- Ngjyra e duhur e kufirit: # ffd623
Shtoni Woo Shto në shportë Modul në kolonën 2
Përmbajtja dinamike
Moduli i fundit që na duhet në dizajnin tonë është një modul Woo Add to Cart. Sigurohuni që "Ky produkt" të jetë zgjedhur në zonën e përmbajtjes dinamike.
- Produkti: Ky produkt
Cilësimet e fushës
Shkoni në skedën tjetër të dizajnit dhe ndryshoni cilësimet e fushës.
- Ngjyra e sfondit të fushave: #ffffff
- Ngjyra e tekstit në terren: # 000000
- Fushat e rrumbullakosura: 0px (të gjitha qoshet)
- Gjerësia e kufirit të poshtëm të fushave: 1px
- Ngjyra e kufirit të poshtëm të fushave: # 000000
Cilësimet e butonit
Pastaj, stiloni butonin në përputhje me rrethanat:
- Përdorni stilet me porosi për butonin: Po
- Madhësia e tekstit të butonit: 20 piksele
- Ngjyra e tekstit të butonit: # 000000
- Ngjyra e sfondit të butonit: # ffd623
- Gjerësia e kufirit të butonit: 0px
- Rrezja kufitare e butonit: 0px
- Shkronja e butonit: Oswald
- Stili i shkronjave të butonit:
- Mbushja e sipërme: 20px
- Mbushja e poshtme: 20px
- Mbushja e majtë: 50px
- Mbushja e duhur: 50px
ndarje
Dhe plotësoni parametrat e modulit duke shtuar vlera të marzhës me porosi.
- Marzhi i sipërm: 100px
- Marzhi i majtë: 5%
3. Ruani modifikimet e gjeneratorit të temës dhe shikoni paraprakisht rezultatin
Pasi të keni përfunduar hartimin e modelit të faqes së produktit, mund të ruani të gjitha ndryshimet tuaja në Builder Theme dhe të shfaqni rezultatet në produktet tuaja!
studim
Tani që kemi kaluar të gjithë hapat, le të hedhim një vështrim përfundimtar se si duket në madhësi të ndryshme të ekranit.
Mendimet e fundit
Në këtë artikull, ne ju kemi treguar se si të bëheni krijues me modelin tuaj të ardhshëm të faqes së produktit Divi. Në mënyrë të veçantë, ne ju kemi treguar se si të përfshini një rrjet dinamik të përfitimeve të produkteve për të shtuar përfitime shtesë në faqen e produktit tuaj. Ne e krijuam këtë udhëzues duke përdorur Divi në kombinim me shtojcën e avancuar të fushave të personalizuara. Ju gjithashtu mund të shkarkoni skedarin JSON falas! Nëse keni ndonjë pyetje ose sugjerim, mos ngurroni të lini një koment në seksionin e komenteve më poshtë.
