Preskoči na glavni sadržaj

Stvaranje dinamičke mreže pogodnosti za WooCommerce proizvode

Divi: najlakša tema za WordPress

Divi: najbolja WordPress tema svih vremena!

više 901.000 preuzimanja, Divi je najpopularnija WordPress tema na svijetu. Kompletan je, jednostavan za korištenje i dolazi s više od 62 besplatnih predložaka. [Preporučeno]

Način na koji dizajnirate stranicu proizvoda ima neposredan utjecaj na ponašanje posjetitelja. Dobro izrađen i personaliziran dizajn stranice proizvoda posjetiteljima može olakšati odluku žele li kupiti vaš proizvod. Ako tražite način da stranicu proizvoda učinite zanimljivijom, vjerojatno će vam se svidjeti ovaj vodič. 

Pokazat ćemo vam kako da u svoj dizajn uključite dinamičku mrežu pogodnosti proizvoda koristeći Divi i dodatak Napredna prilagođena polja. Za početak ćemo stvoriti grupu polja za pogodnosti. Zatim ćemo popuniti prilagođena polja na našoj stranici proizvoda i uključiti dinamički sadržaj u predložak stranice proizvoda. 

Mogući ishod

Prije nego što uđemo u tutorial, pogledajmo na brzinu rezultate na različitim veličinama zaslona.

Mogući rezultat divi

1. Instalirajte dodatak ACF Plugin and Product Benefit Field Group

Instalirajte dodatak Advanced Custom Fields

Da bismo prikazali razne prednosti proizvoda u pozadini naših proizvoda, koristit ćemo besplatni dodatak Napredna prilagođena polja. Pristupite svom WordPress pozadina> Dodaci> Dodaj novi> Pronađi dodatak ACF> Instaliraj> Aktiviraj .

Instalirajte napredni dodatak za prilagođeno polje

Idite na prilagođena polja i dodajte novu grupu polja

Nakon što instalirate i aktivirate ACF dodatak, moći ćete pristupiti svojim prilagođenim poljima i dodati novu grupu polja.

Stvorite acf polja

Postavke polja polja

Dajte svojoj novoj grupi polja naslov i dopustite da se prikazuje samo na stranicama proizvoda.

  • "Vrsta poruke" jednaka je "Proizvod"
Dodajte pravila

Dodajte prvo polje

Nastavite dodavanjem novog polja za naslov vašeg prvog proizvoda.

  • Oznaka polja: naslov pogodnosti 1
  • Vrsta polja: tekst
Dodaj ac polje
Prilagođavanje polja Divi

Ponovite korak za preostala polja

Učinite isto za ostale blagodati proizvoda i njihove opise. Sva ova polja zahtijevaju dodijeljenu vrstu polja "Tekst".

  • Naziv usluge 1
  • Opis pogodnosti 1
  • Naziv usluge 2
  • Opis pogodnosti 2
  • Naziv usluge 3
  • Opis pogodnosti 3
  • Naziv usluge 4
  • Opis pogodnosti 4
Konfigurirajte acf polja

2. Dodajte prednost proizvodima

Otvorite ili dodajte novi proizvod

Nakon što se kreira vaša grupa polja i polja, svojim proizvodima možete dodati prednosti proizvoda na pojedinačnoj razini. Otvorite proizvod po vašem izboru ili izradite novi.

Divi stvaranje proizvoda

Ispunite polja Prednosti proizvoda

I ispuniti prednosti proizvoda.

Ispunite polja s prednostima divi

3. Napravite predložak stranice proizvoda u Divi Builderu tema

Idite na Divi Builder tema i dodajte novi predložak

Vrijeme je da započnemo s Divijem! Da biste stvorili novi predložak, idite na Divi Theme Builder i kliknite na "Dodaj novi predložak".

Divi graditelj tema

Koristite predložak na svim proizvodima

Ovaj predložak koristimo na svim proizvodima, ali slobodno odaberite proizvode s određenom kategorijom ili oznakom.

Dodajte sve woocommerce proizvode

Uđite u uređivač predloška tijela modela

Zatim unesite tijelo modela klikom na "Dodaj prilagođeno tijelo" i odabirom opcije "Stvori prilagođeno tijelo".

Izgradnja tijela divi

Uređivanje odjeljka 1

Boja pozadine

Nakon što uđete u uređivač predložaka, primijetit ćete odjeljak. Otvorite taj odjeljak i boju pozadine promijenite u crnu.

  • Boja pozadine: # 000000
Konfiguracija pozadine odjeljka Divi

razmak

Idite na karticu dizajna odjeljka i dodajte nekoliko prilagođenih gornjih i donjih obloga.

  • Gornja obloga: 10px
  • Donja obloga: 10px
Konfiguracija razmaka odjeljka Divi

Dodajte novi redak

Struktura stupaca

Nastavimo dodavanjem novog retka odjeljku koji ima sljedeću strukturu:

Konfiguracija rasporeda linijskog modula

razmak

Bez dodavanja bilo kakvih modova, otvorimo postavke redaka i napravimo neke prilagodbe razmaka.

  • Koristite personalizirani oluk: Da
  • Širina oluka: 1
  • Širina: 90%
  • Maksimalna širina: 100%
Postavke razmaka linijskog modula

razmak

Uklonite sve gornje i donje unutarnje razmake.

  • Visoka unutarnja marža: 0px
  • Mala unutarnja marža: 0px
Postavke razmaka između modula Divi

Dodajte modul Obavijesti o košarici Woo u stupac

Dinamični sadržaj

Jedini modul koji nam treba u ovom retku i odjeljku je modul Woo Cart Notice. Obavezno odaberite "Ovaj proizvod" u dinamičkom odjeljku.

Jednostavno izradite svoju web stranicu s Elementor-om

Elementor vam omogućuje jednostavno stvaranje bilo kojeg dizajna web stranice s profesionalnim izgledom. Prestanite plaćati skupo za ono što možete učiniti sami. [Slobodni]

  • Proizvod: Ovaj proizvod
Postavke modul obavijesti o košarici divi

Boja pozadina

Zatim otvorite postavke modula i upotrijebite prozirnu pozadinu.

  • Boja pozadine: rgba (0,0,0,0)
Postavke divi modula Woo cart

Postavke teksta

Prebacite se na karticu "Dizajn" i promijenite font teksta.

  • Tekst teksta: Karla
Postavke fonta modula Divi

Postavka gumba

Dovršite postavke dodatka definiranjem postavki stila:

  • Upotrijebite prilagođene stilove za gumb: Da
  • Veličina teksta gumba: 20px
  • Boja teksta gumba: # 000000
  • Pozadina gumba: # ffd623
  • Širina obruba gumba: 0px
  • Gumb zaobljenog obruba: 0px
Postavke boje modula obavijesti o košarici Woo
  • Font gumba: Oswald
  • Stil fonta gumba: Shift
Prilagođavanje dizajna boje modula obavijesti o košarici Woo
  • Visoka unutarnja marža: 20px
  • Mala unutarnja marža: 20px
  • Lijeva unutarnja margina: 50px
  • Interna desna margina: 50px
Modul za dizajn konfiguracije obavijest o košarici

Dodajte odjeljak br. 2

Gradijentna pozadina

Dodajte još jedan redoviti odjeljak ispod prethodnog. Zatim otvorite postavke i upotrijebite pozadinu gradijenta na sljedeći način:

  • Boja 1: # 000000
  • Boja 2: #ffffff
  • Početna pozicija:
    • Desktop: 30%
    • Tableta: 57%
    • Telefon: 54%
  • Krajnji položaj:
    • Desktop: 30%
    • Tableta: 57%
    • Telefon: 54%
Divi line modul podešavanje straga

razmak

Idemo na karticu Dizajn i dodajte visoku unutarnju marginu.

  • Gornja obloga: 150px
Konfiguracija razmaka između modula Divi

Dodajte novi redak

Struktura stupaca

Nastavite dodavanjem novog retka iste strukture kao što je prikazano u nastavku:

Konfiguracija stila Divi linije

dimenzioniranje

Bez dodavanja bilo kakvih modova, otvorit ćemo postavke i promijeniti razmak na sljedeći način:

  • Koristite prilagođene oluke: Da
  • Prostor za oluk: 1
  • Širina: 95%
  • Maksimalna širina: 2560px
  • Poravnavanje linija: Središte
Divi modul za konfiguraciju žlijeba

Razmještanje

Također ćemo ukloniti gornju unutarnju granicu.

  • Gornja obloga: 0px
Konfiguracija razmaka modula Divi

Glavni element

A za centriranje sadržaja stupca na radnoj površini, upotrijebit ćemo dva retka CSS koda u glavnom elementu modula retka.

Desktop:

prikaz: fleksibilnost; poravnavanje predmeta: sredina;

Tablet i telefon:

Prikaz: blok;
Postavke stila modula Divi line

Dodajte Woo Image modul u stupac 1

Dinamični sadržaj

Vrijeme je za dodavanje modula, započet ćemo s modulom Woo Images u stupcu 1. Provjerite je li odabran "Ovaj proizvod".

  • Proizvod: Ovaj proizvod
Postavke modula slike Woocommerce proizvoda

Učinak animacije okomitog pomicanja

Slici dodajemo suptilno kretanje pomoću efekta vodoravnog pomicanja u naprednoj kartici.

  • Aktivirajte okomito kretanje: Da
  • Pokretanje:
    • Ured: -4
    • Tablet i telefon: 0
  • Prosječno odstupanje: 0
  • Krajnji odmak: 0
  • Učinak okidačkog pokreta: sredina elementa
Podešavanje modula slike Divi

Dodajte Woo naslov modul u stupac 2

Dinamični sadržaj

U stupcu 2, prvi mod koji nam treba je Woo naslov mod. Obavezno odaberite "Ovaj proizvod" u području dinamičkog sadržaja.

  • Proizvod: Ovaj proizvod
rešetka pogodnosti proizvoda

Postavke teksta naslova

Zatim idite na karticu dizajn i oblikujte tekst naslova na sljedeći način:

  • Font naslova: Oswald
  • Stil fonta naslova: veliko slovo
  • Boja teksta naslova: # ffd623
  • Veličina teksta naslova: 80px
Prilagođavanje dizajna naslovnog modula Divi

razmak

Ispunite Woo naslov modul dodavanjem lijeve i desne margine.

Tražite li najbolje WordPress teme i dodatke?

Preuzmite najbolje dodatke i WordPress teme na Envato i jednostavno stvorite svoju web stranicu. Već više od preuzimanja 49.720.000. [ISKLJUČIVO]

  • Lijeva marža: 5%
  • Desna marža: 5%
Postavka modula naslova Divi

Dodajte Woo opisni modul u stupac 2

Dinamični sadržaj

Prijeđimo na sljedeći modul, koji je modul opisa Woo. Za to koristimo sljedeći dinamički sadržaj:

  • Proizvod: Ovaj proizvod
  • Vrsta opisa: Kratki opis
Postavke modula opisa proizvoda

Postavke teksta

Prebacite se na karticu dizajna modula i u skladu s tim promijenite postavke teksta:

  • Tekst teksta: Karla
  • Boja teksta: #dbdbdb
  • Veličina teksta: 17 px (radna površina i tablet), 15 px (telefon)
  • Visina retka teksta: 1,9 em
Opis modula za podešavanje boje divi

dimenzioniranje

Zatim promijenite širinu na različitim veličinama zaslona.

  • Širina: 59% (radna površina), 82% (tablet i telefon)
Podešavanje širine modula Divi sažetak

razmak

Dovršite modul opisa Woo dodavanjem prilagođenih vrijednosti margina u postavke razmaka.

  • Gornja margina: 50px
  • Donja marža: 100px
  • Lijeva marža: 5%
  • Desna marža: 5%
Modul opisa proizvoda Divi

Dodajte modul Blurb u stupac 2

Dinamični sadržaj

Za prikaz pogodnosti proizvoda koje smo dodali u prvom dijelu ovog vodiča, koristit ćemo module Blurb. Dodajte prvi modul Blurb i koristite dinamički sadržaj prve pogodnosti proizvedene za naslov i tijelo.

  • Naslov: Benefit Title 1
  • Tijelo: Benefit Opis 1
Postavljanje teksta modula sažetka Divi

Postavi sliku

Učitajte sliku ili upotrijebite ikonu po vašem izboru. One koje smo koristili u ovom vodiču možete pronaći u mapi za preuzimanje koju ste mogli preuzeti na početku ovog vodiča.

Konfiguracija divi sažetka slikovnog modula

Postavke slike / ikone

Prijeđite na karticu dizajna modula i promijenite postavke slike / ikone na sljedeći način:

  • Položaj slike / ikone: Na vrh
  • Poravnanje slike / ikone: Lijevo
Modul za podešavanje Divi

Postavke teksta naslova

Sljedeće izmjenjujemo postavke teksta naslova.

  • Font naslova: Oswald
  • Stil naslova: Velika slova
  • Veličina teksta naslova: 25px
Konfigurirajte font divi sažetka modula

Postavke teksta tijela

Uz postavke teksta teksta

  • Krstionica za tijelo: Karla
  • Veličina teksta: 17 px (radna površina i tablet), 15 px (telefon)
  • Visina linije tijela: 1,9 em
Konfiguriranje sažetka tekstualnog modula div i

dimenzioniranje

Zatim idite na postavke veličine i promijenite širinu. Važno je koristiti glavnu širinu manju od 50%, što će nam omogućiti da u sljedećim koracima prikažemo dva Blurb modula jedan pored drugog.

  • Širina slike: 25%
  • Širina: 49%
Konfigurirajte veličinu modula sažetka divi

razmak

Također ćemo dodati razmake oko modula Blurb koristeći prilagođene vrijednosti umetanja na različitim veličinama zaslona.

  • Gornja obloga: 8%
  • Donja obloga: 8%
  • Lijevo padding: 8% (desktop i tablet), 2% (telefon)
  • Desna obloga: 8% (stolni i tablet) 2% (telefon)
Konfigurirajte razmak modula sažetka divi

Glavni element

Sada ćemo se pobrinuti da modul Sažetak prikazuje tekst jedan pored drugog, u dva koraka. Prvo ćemo se pobrinuti da širina modula bude manja od 50% (kao što smo učinili u prethodnom koraku). Dalje ćemo upotrijebiti svojstvo u redu. Dodati ćemo ovo CSS svojstvo na glavni element u naprednom odjeljku.

display: inline-block;
Dodajte modul csi code divi

Klonirajte modul sažetka 3 puta

Nakon što dovršite prvi Blurb mod, možete ga klonirati tri puta. Automatski ćete primijetiti da se Blurb moduli pojavljuju u mreži.

Odjeljak naziva proizvoda

Uredite slike modula Blur

Uredite sliku u svakom duplikatu Blurb mahune. Možete ih pronaći u mapi za preuzimanje koju ste možda preuzeli na početku ovog članka.

Slika modula sažetka Divi

Izmijenite dinamički sadržaj modula Blurb

Također izmijenite dinamički sadržaj svakog dupliciranog modula Blurb.

  • Naslov: Naslov usluge (2,3 ili 4)
  • Tijelo: opis prednosti (2,3 ili 4)
Pravila modula sažetka Divi

Pojedino dodajte obrise modulima Blurb

Postavke granice zamućenja 1 granice

Sada, da bismo završili s dizajniranjem naše mreže, dodati ćemo obrube Blurb modulima na pojedinačnoj razini. Otvorite prvi Blurb mod i upotrijebite ravni obrub.

  • Širina desne granice: 1px
  • Boja desne granice: # ffd623
Divi sažetak modula za konfiguraciju zaobljene granice

Također dodajte donji rub prvom modulu Blur.

  • Širina donje granice: 1px
  • Boja donjeg obruba: # 000000
Konfigurirajte donju marginu divi
Postavke granice zamućenja 2 granice

Zatim otvorite drugi modul Blurb i koristite donju obrub.

  • Širina donje granice: 1px
  • Boja donjeg obruba: # 000000
Sažetak modula konfiguracijskog modula divi
Postavke granice zamućenja 3 granice

Dovršite dizajn rešetke dodavanjem izravnog obruba na treći modul Blurb.

Jednostavno izradite svoju mrežnu trgovinu

Preuzmite besplatnu WooCommerce, najbolji e-trgovinski dodatak za prodaju fizičkih i digitalnih proizvoda na WordPressu. [Preporučeno]

  • Širina desne granice: 1px
  • Boja desne granice: # ffd623
rešetka pogodnosti proizvoda

Dodajte Woo Dodaj u košaricu Modul u stupcu 2

Dinamični sadržaj

Posljednji modul koji nam treba u našem dizajnu je modul Woo Add to Cart. Obavezno odaberite "Ovaj proizvod" u području dinamičkog sadržaja.

  • Proizvod: Ovaj proizvod
Dodaj na postavke modula divi kartice

Postavke polja

Idite na sljedeću karticu dizajna i promijenite postavke polja.

  • Boja pozadine polja: #ffffff
  • Boja teksta polja: # 000000
Konfigurirajte stil boja dodajte u modul divi košarice
  • Zaobljena polja: 0px (svi uglovi)
  • Širina donje granice polja: 1 px
  • Boja donje granice polja: # 000000
Konfigurirajte razmak dijelova odjeljka

Postavke gumba

Zatim, stil u skladu s tim:

  • Upotrijebite prilagođene stilove za gumb: Da
  • Veličina teksta gumba: 20 piksela
  • Boja teksta gumba: # 000000
  • Boja pozadine gumba: # ffd623
  • Širina obruba gumba: 0px
  • Polumjer obruba gumba: 0px
Konfigurirajte dizajn divi gumba
  • Font gumba: Oswald
  • Stil fonta gumba: velika slova
Konfiguriranje gumba za divi
  • Gornja obloga: 20px
  • Donja obloga: 20px
  • Lijevo oblaganje: 50px
  • Desna obloga: 50px
Konfigurirajte veličinu modula divi

razmak

Ispunite parametre modula dodavanjem prilagođenih vrijednosti margina.

  • Gornja margina: 100px
  • Lijeva marža: 5%
Konfigurirajte razmak divi

3. Spremite modifikacije generatora tema i pregledajte rezultat

Nakon što završite s dizajniranjem predloška stranice proizvoda, možete spremiti sve promjene programa Builder tema i prikazati rezultate na svojim proizvodima!

Spremi dizajn divi
Spremi izmjene divi

pregled

Sad kad smo prošli sve korake, pogledajmo konačno kako to izgleda na različitim veličinama zaslona.

Demo rezultat

Završne misli

U ovom smo članku pokazali kako postati kreativan sa sljedećim predloškom stranice proizvoda Divi. Točnije, pokazali smo vam kako uključiti dinamičnu mrežu pogodnosti proizvoda kako biste dodali dodatne pogodnosti na stranicu proizvoda. Ovaj smo vodič stvorili koristeći Divi u kombinaciji s dodatkom Napredna prilagođena polja. Također možete besplatno preuzeti datoteku JSON! Ako imate pitanja ili prijedloge, slobodno ostavite komentar u odjeljku za komentare u nastavku.

Ovaj članak sadrži komentare 0

Ostavi komentar

Vaša email adresa neće biti objavljena. Obavezna polja su označena *

Ova web stranica koristi Akismet kako bi smanjila neželjene. Saznajte više o načinu upotrebe podataka o vašim komentarima.

Povratak na vrh
0 dionice
udio
cvrkut
Prijaviti