Način na koji dizajnirate svoju stranicu proizvoda ima neposredan utjecaj na vaše ponašanje posjetitelji. Dobro dizajniran i personaliziran dizajn stranice proizvoda može omogućiti posjetitelji kako bi lakše odlučili žele li kupiti vaš proizvod. Ako tražite način da svoju stranicu proizvoda učinite privlačnijom, vjerojatno će vam se svidjeti ovaj vodič.
Pokazat ćemo vam kako uključiti dinamičku mrežu prednosti proizvoda u vaš dizajn pomoću Divi i dodatka Advanced Custom Fields. Počet ćemo stvaranjem grupe polja za pogodnosti. Zatim ćemo ispuniti prilagođena polja na našoj stranici proizvoda i uključiti sadržaj dinamički u našem predlošku stranice proizvoda.
Mogući ishod
Prije nego što uđemo u tutorial, pogledajmo na brzinu rezultate na različitim veličinama zaslona.
1. Instalirajte dodatak ACF Plugin and Product Benefit Field Group
Instalirajte dodatak Advanced Custom Fields
Za prikaz različitih prednosti proizvoda u pozadini naših proizvoda koristit ćemo dodatak besplatno Napredna prilagođena polja. Pristupite svom WordPress pozadina> Dodaci> Dodaj novi> Pronađi dodatak ACF> Instaliraj> Aktiviraj .
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.
Postavke polja polja
Dajte svojoj novoj grupi polja naslov i dopustite da se prikazuje samo na stranicama proizvoda.
- "Vrsta poruke" jednaka je "Proizvod"
Dodajte prvo polje
Nastavite dodavanjem novog polja za naslov vašeg prvog proizvoda.
- Oznaka polja: naslov pogodnosti 1
- Vrsta polja: tekst
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
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.
Ispunite polja Prednosti proizvoda
I ispuniti prednosti proizvoda.
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".
Koristite predložak na svim proizvodima
Ovaj predložak koristimo na svim proizvodima, ali slobodno odaberite proizvode s određenom kategorijom ili oznakom.
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".
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
razmak
Idite na karticu dizajna odjeljka i dodajte nekoliko prilagođenih gornjih i donjih obloga.
- Gornja obloga: 10px
- Donja obloga: 10px
Dodajte novi redak
Struktura stupaca
Nastavimo dodavanjem novog retka odjeljku koji ima sljedeću strukturu:
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%
razmak
Uklonite sve gornje i donje unutarnje razmake.
- Visoka unutarnja marža: 0px
- Mala unutarnja marža: 0px
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.
- Proizvod: Ovaj proizvod
Boja pozadina
Zatim otvorite postavke modula i upotrijebite prozirnu pozadinu.
- Boja pozadine: rgba (0,0,0,0)
Postavke teksta
Prebacite se na karticu "Dizajn" i promijenite font teksta.
- Tekst teksta: Karla
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
- Font gumba: Oswald
- Stil fonta gumba: Shift
- Visoka unutarnja marža: 20px
- Mala unutarnja marža: 20px
- Lijeva unutarnja margina: 50px
- Interna desna margina: 50px
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:
- Stolno računalo: 30%
- Tableta: 57%
- Telefon: 54%
- Krajnji položaj:
- Stolno računalo: 30%
- Tableta: 57%
- Telefon: 54%
razmak
Idemo na karticu Dizajn i dodajte visoku unutarnju marginu.
- Gornja obloga: 150px
Dodajte novi redak
Struktura stupaca
Nastavite dodavanjem novog retka iste strukture kao što je prikazano u nastavku:
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
Razmještanje
Također ćemo ukloniti gornju unutarnju granicu.
- Gornja obloga: 0px
Glavni element
I srediti sadržaj stupcu na DeskTop, koristit ćemo dva retka CSS koda u glavnom elementu retka modula.
Desktop:
prikaz: fleksibilnost; poravnavanje predmeta: sredina;
Tablet i telefon:
Prikaz: blok;
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
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
Dodajte Woo naslov modul u stupac 2
Dinamični sadržaj
U stupcu 2, prvi modul koji nam treba je Woo naslovni modul. Provjerite je li u okviru odabran "Ovaj proizvod". sadržaj dinamičan.
- Proizvod: Ovaj proizvod
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
razmak
Ispunite Woo naslov modul dodavanjem lijeve i desne margine.
- Lijeva marža: 5%
- Desna marža: 5%
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 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
dimenzioniranje
Zatim promijenite širinu na različitim veličinama zaslona.
- Širina: 59% (radna površina), 82% (tablet i telefon)
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%
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
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.
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
Postavke teksta naslova
Sljedeće izmjenjujemo postavke teksta naslova.
- Font naslova: Oswald
- Stil naslova: Velika slova
- Veličina teksta naslova: 25px
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
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%
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)
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;
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.
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.
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)
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
Također dodajte donji rub prvom modulu Blur.
- Širina donje granice: 1px
- Boja donjeg obruba: # 000000
Postavke granice zamućenja 2 granice
Zatim otvorite drugi modul Blurb i koristite donju obrub.
- Širina donje granice: 1px
- Boja donjeg obruba: # 000000
Postavke granice zamućenja 3 granice
Dovršite dizajn rešetke dodavanjem izravnog obruba na treći modul Blurb.
- Širina desne granice: 1px
- Boja desne granice: # ffd623
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
Postavke polja
Idite na sljedeću karticu dizajna i promijenite postavke polja.
- Boja pozadine polja: #ffffff
- Boja teksta polja: # 000000
- Zaobljena polja: 0px (svi uglovi)
- Širina donje granice polja: 1 px
- Boja donje granice polja: # 000000
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
- Font gumba: Oswald
- Stil fonta gumba: velika slova
- Gornja obloga: 20px
- Donja obloga: 20px
- Lijevo oblaganje: 50px
- Desna obloga: 50px
razmak
Ispunite parametre modula dodavanjem prilagođenih vrijednosti margina.
- Gornja margina: 100px
- Lijeva marža: 5%
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!
pregled
Sad kad smo prošli sve korake, pogledajmo konačno kako to izgleda na različitim veličinama zaslona.
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.
