Kalo te përmbajtja kryesore

Krijimi i një rrjeti përfitimesh dinamike për produktet WooCommerce

Divi: tema më e lehtë për t'u përdorur nga WordPress

Divi: Tema më e mirë e WordPress të të gjitha kohërave!

më shumë Shkarkimet e 901.000, Divi është tema më e popullarizuar e WordPress në botë. Është i plotë, i lehtë për t'u përdorur dhe vjen me më shumë se shabllona falas 62. [Rekomanduar]

Mënyra se si e dizajnoni faqen e produktit tuaj ka një ndikim të menjëhershëm në sjelljen e vizitorëve tuaj. Një model i hartuar dhe i personalizuar i faqes së produktit mund ta bëjë më të lehtë për vizitorët të vendosin nëse duan të blejnë produktin tuaj. Nëse jeni duke kërkuar një mënyrë për ta bërë faqen tuaj të produktit më tërheqëse, 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 e avancuar të fushave të personalizuara. Ne do të fillojmë duke krijuar një grup fushash për përfitime. Ne më pas do të plotësojmë fushat e personalizuara në faqen tonë të produktit dhe do të përfshijmë përmbajtjen dinamike në modelin e faqes tonë të produktit. 

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.

Ndarja e rezultatit të mundshëm

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ë produkteve në pjesën e prapme të produkteve tona, ne do të përdorim shtojcën falas Fushat e Avancuara të Zonave. Hyni në tuaj WordPress backend> Plugins> Add new> Find ACF plugin> Install> Aktivizo .

Instaloni shtojcën e fushës së personalizuar të avancuar

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.

Krijoni fusha ACF

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"
Shto rregulla

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
Shto fushën AC
Përshtatja e fushës Divi

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
Konfiguroni fushat acf

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.

Krijimi i produktit Divi

Plotësoni fushat e Përfitimet e Produkteve

Dhe plotësoni përfitimet e produktit.

Plotësoni fushat e përparësive divi

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".

Ndërtuesi i temave Divi

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.

Shtoni të gjitha produktet e woocommerce

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".

Ndërtimi i trupit divi

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
Konfigurimi i sfondit të seksionit Divi

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
Konfigurimi i ndarjes së seksionit Divi

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:

Konfigurimi i paraqitjes së modulit të linjës

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%
Cilësimet e hapësirës së modulit të linjës

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
Cilësimet e ndarjes së modulit të linjës Divi

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.

Krijoni me lehtësi faqen tuaj të internetit me Elementor

Elementor ju lejon të krijoni me lehtësi çdo dizajn të faqes në internet me një pamje profesionale. Ndaloni të paguani shtrenjtë për ato që mund të bëni vetë. [Pa]

  • Produkti: Ky produkt
Cilësimet woo karrocë njoftim modul ndarje

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 ndarjes së modulit të karrocës

Cilësimet e tekstit

Kaloni në skedën "Design" dhe ndryshoni fontin e tekstit.

  • Shkronja e tekstit: Karla
Cilësimet e shkronjave të modulit Divi

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
Cilësimet e ngjyrave të modulit të njoftimit të karrocës
  • Shkronja e butonit: Oswald
  • Stili i shkronjave të butonit: Shift
Rregullimi i dizajnit të ngjyrës së modulit të njoftimit të karrocës
  • 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
Moduli i dizajnit të konfigurimit njoftimi i karrocës

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%
Rregullimi i pasmë i modulit të linjës Divi

ndarje

Le të shkojmë në skedën Design dhe të shtojmë një diferencë të lartë të brendshme.

  • Mbulesa e sipërme: 150px
Konfigurimi i ndarjes së modulit të vijës Divi

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ë:

Konfigurimi i stilit të linjës Divi

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
Moduli divi i konfigurimit të ullukut

ndarje

Ne gjithashtu do të heqim kufirin e lartë të brendshëm gjithashtu.

  • Mbulesa e sipërme: 0px
Konfigurimi i ndarjes së modulit Divi

Elementi kryesor

Dhe për të përqendruar përmbajtjen e kolonës në Desktop, ne do të përdorim dy rreshta të kodit CSS në elementin kryesor të modulit të rreshtit.

Desktop:

ekran: flex; align-artikuj: qendër;

Tablet & Telefon:

ekran: bllok;
Cilësimet e stilit të modulit të linjës Divi

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
Cilësimet e modulit të imazhit të produktit Woocommerce

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
Rregullimi i modulit të imazhit Divi

Shtoni modulin e titullit Woo në kolonën 2

Përmbajtja dinamike

Në kolonën 2, modi i parë që na duhet është një mod titull Woo. Sigurohuni që "Ky produkt" të jetë zgjedhur në zonën e përmbajtjes dinamike.

  • Produkti: Ky produkt
produkti përfiton nga rrjeti

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
Rregullimi i dizajnit të modulit të titullit Divi

ndarje

Plotësoni modulin e titullit Woo duke shtuar kufijtë e majtë dhe të djathtë.

A po kërkoni temat më të mira të WordPress dhe shtojcat?

Shkarkoni shtojcat më të mira dhe temat e WordPress në Envato dhe krijoni lehtësisht faqen tuaj te internetit. Tashmë më shumë se shkarkimet e 49.720.000. [EXCLUSIVE]

  • Marzhi i majtë: 5%
  • Marzhi i duhur: 5%
Cilësimi i modulit të titullit Divi

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 modulit të përshkrimit të produktit

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
Ndarja e përshkrimit të modulit të rregullimit të ngjyrave

sizing

Pastaj ndryshoni gjerësinë në madhësi të ndryshme të ekranit.

  • Gjerësia: 59% (desktop), 82% (tablet dhe telefon)
Rregullimi i gjerësisë së modulit përmbledhës Divi

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%
Moduli i përshkrimit të produktit Divi

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
Cilësimi i tekstit të modulit përmbledhës Divi

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.

Konfigurimi i divit përmbledhës të modulit të imazhit

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
Moduli i rregullimit të Divi

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
Konfiguro fontin e modulit përmbledhës divi

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
Konfiguro përmbledhjen e modulit të tekstit div i

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%
Konfiguroni madhësinë e modulit përmbledhës divi

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)
Konfiguroni hapësirën e modulit përmbledhës divi

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;
Shto modulin divi të kodit CSS

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.

Seksioni divi i emrit të produktit

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.

Imazhi i modulit përmbledhës Divi

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)
Rregullat e modulit përmbledhës Divi

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
Modul përmbledhës i konfigurimit të kufirit të rrumbullakosur

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
Konfiguroni kufirin e poshtëm divi
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
Divi përmbledhës i modulit të kufirit të konfigurimit
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.

Lehtë të krijoni Dyqanin tuaj Online

Shkarko pa pagesë WooCommerce, shtojcat më të mira të tregtisë elektronike për të shitur produktet tuaja fizike dhe digjitale në WordPress. [Rekomanduar]

  • Gjerësia e duhur e kufirit: 1px
  • Ngjyra e duhur e kufirit: # ffd623
produkti përfiton nga rrjeti

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
Shtoni në cilësimet e modulit divi të kartës

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
Konfiguroni stilin e ngjyrave shtoni në shportë modulin divi
  • 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
Konfiguroni ndarjen e ndarjes divi

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
Konfiguroni dizajnin e butonit divi
  • Shkronja e butonit: Oswald
  • Stili i shkronjave të butonit:
Konfiguro butonin divi
  • Mbushja e sipërme: 20px
  • Mbushja e poshtme: 20px
  • Mbushja e majtë: 50px
  • Mbushja e duhur: 50px
Konfiguroni madhësinë e modulit divi

ndarje

Dhe plotësoni parametrat e modulit duke shtuar vlera të marzhës me porosi.

  • Marzhi i sipërm: 100px
  • Marzhi i majtë: 5%
Konfiguroni ndarjen e ndarjeve

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!

Ruani dizajnin divi
Ruani modifikimet divi

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.

Rezultati demo

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ë.

Ky artikull përmban komente 0

Lini një koment

Adresa juaj e emailit nuk do të publikohet. Fusha e kërkuar janë shënuar *

Kjo faqe përdor Akismet për të zvogëluar padëshiruar. Mësoni më shumë për mënyrën se si përdoren të dhënat e komenteve tuaja.

Kthehu në fillim
0 aksionet
pjesë
cicërimë
Regjistrohem