Spôsob, akým navrhujete svoju produktovú stránku, má okamžitý vplyv na jej správanie Návštevníci. Dobre navrhnutý a prispôsobený dizajn stránky produktu to môže umožniť Návštevníci ľahšie sa rozhodnúť, či chcú kúpiť váš produkt. Ak hľadáte spôsob, ako urobiť vašu produktovú stránku pútavejšou, pravdepodobne sa vám bude páčiť tento návod.
Ukážeme vám, ako do návrhu zahrnúť dynamickú mriežku výhod produktu pomocou Divi a doplnku Advanced Custom Fields. Začneme vytvorením terénnej skupiny pre výhody. Potom vyplníme vlastné polia na našej produktovej stránke a zahrnieme ich obsah dynamický v našej šablóne stránky produktu.
Možný výsledok
Predtým, ako sa ponoríme do tutoriálu, poďme sa rýchlo pozrieť na výsledok v rôznych veľkostiach obrazovky.
1. Nainštalujte doplnok FieldF Plugin A Product Benefit Field Group
Nainštalujte doplnok Advanced Custom Fields
Na zobrazenie rôznych výhod produktov v backende našich produktov použijeme doplnok zadarmo Rozšírené vlastné polia. Prístup k vášmu Backend WordPress> Pluginy> Pridať nové> Nájsť doplnok ACF> Inštalovať> Aktivovať .
Prejdite na vlastné polia a pridajte novú skupinu polí
Po nainštalovaní a aktivácii doplnku ACF budete mať prístup k svojim vlastným poliam a pridáte novú skupinu polí.
Nastavenia skupiny polí
Priraďte svojej novej skupine polí názov a umožnite jej zobrazovanie iba na stránkach produktov.
- „Typ správy“ sa rovná „Produkt“
Pridajte prvé pole
Pokračujte pridaním nového poľa pre názov prvej výhody produktu.
- Štítok poľa: Názov výhody 1
- Typ poľa: text
Opakujte krok pre zvyšné polia
To isté urobte pre ďalšie výhody produktu a ich popisy. Všetky tieto polia vyžadujú priradený typ poľa „Text“.
- Názov služby 1
- Opis dávok 1
- Názov služby 2
- Opis dávok 2
- Názov služby 3
- Opis dávok 3
- Názov služby 4
- Opis dávok 4
2. Pridávať výhody produktom
Otvorte alebo pridajte nový produkt
Po vytvorení skupiny polí a polí môžete pridať výhody svojich produktov na individuálnej úrovni. Otvorte produkt podľa vášho výberu alebo vytvorte nový.
Vyplňte polia Výhody produktu
A plniť výhody produktu.
3. Vytvorte šablónu stránky produktu v aplikácii Divi Theme Builder
Prejdite do Divi Theme Builder a pridajte novú šablónu
Je čas začať s Divi! Ak chcete vytvoriť novú šablónu, choďte do Divi Theme Builder a kliknite na „Pridať novú šablónu“.
Použite šablónu na všetky produkty
Túto šablónu používame na všetkých produktoch, ale môžete zvoliť produkty s konkrétnou kategóriou alebo štítkom.
Zadajte editor šablón tela modelu
Potom zadajte telo modelu kliknutím na „Pridať vlastné telo“ a výberom „Vytvoriť vlastné telo“.
Upraviť časť # 1
Farba pozadia
Keď sa nachádzate v editore šablón, všimnete si časť. Otvorte túto časť a zmeňte farbu pozadia na čiernu.
- Farba pozadia: # 000000
vzdialenosť
Prejdite na kartu dizajnu sekcie a pridajte nejaké vlastné čalúnenie vrchným a spodným polstrovaním.
- Vrchná výplň: 10px
- Spodné čalúnenie: 10px
Pridajte nový riadok
Štruktúra stĺpca
Pokračujme pridaním nového riadku do sekcie, ktorá má nasledujúcu štruktúru:
vzdialenosť
Bez pridania akýchkoľvek režimov otvorme nastavenia riadkov a urobme úpravy medzery.
- Použite prispôsobený žľab: Áno
- Šírka odkvapov: 1
- Šírka: 90%
- Maximálna šírka: 100%
vzdialenosť
Odstráňte všetky horné a spodné vnútorné medzery.
- Vysoká vnútorná marža: 0px
- Nízka vnútorná marža: 0px
Pridajte do stĺpca modul Woo Cart Notice
Dynamický obsah
Jediným modulom, ktorý v tomto riadku a sekcii potrebujeme, je modul Woo Cart Notice. Uistite sa, že je v dynamickej sekcii vybratý „Tento produkt“.
- Produkt: Tento produkt
Farebné pozadie
Potom otvorte nastavenia modulu a použite priehľadné pozadie.
- Farba pozadia: rgba (0,0,0,0)
Nastavenia textu
Prepnite na kartu „Dizajn“ a zmeňte písmo textu.
- Písmo textu: Karla
Nastavenie tlačidiel
Dokončite nastavenia doplnku definovaním nastavení štýlu:
- Použiť vlastné štýly pre tlačidlo: Áno
- Veľkosť textu tlačidla: 20 px
- Farba textu tlačidla: # 000000
- Pozadie tlačidla: # ffd623
- Šírka okraja tlačidla: 0px
- Tlačidlo Zaoblený okraj: 0 pixlov
- Písmo tlačidla: Oswald
- Štýl písma tlačidla: Shift
- Vysoká vnútorná marža: 20px
- Nízka vnútorná marža: 20px
- Ľavá vnútorná marža: 50px
- Vnútorná pravá marža: 50px
Pridajte časť # 2
Gradient pozadia
Pridajte ďalšiu pravidelnú časť pod predchádzajúcu. Potom otvorte nastavenia a použite gradientné pozadie nasledovne:
- Farba 1: # 000000
- Farba 2: #ffffff
- Počiatočná pozícia:
- Pracovná plocha: 30%
- Tableta: 57%
- Telefón: 54%
- Koncová pozícia:
- Pracovná plocha: 30%
- Tableta: 57%
- Telefón: 54%
vzdialenosť
Poďme na kartu Návrh a pridajme veľkú vnútornú rezervu.
- Vrchná výplň: 150px
Pridať nový riadok
Štruktúra stĺpca
Pokračujte pridaním nového riadku s rovnakou štruktúrou, ako je uvedené nižšie:
dimenzovanie
Bez pridania akýchkoľvek ďalších úprav otvoríme nastavenia a medzery zmeníme nasledovne:
- Použite vlastné odkvapy: Áno
- Odkvapový priestor: 1
- Šírka: 95%
- Maximálna šírka: 2560 px
- Zarovnanie čiary: Stred
riadkovanie
Odstránime tiež horný vnútorný okraj.
- Vrchná výplň: 0px
Hlavný prvok
A na stred obsah stĺpec na DeskTop, použijeme dva riadky kódu CSS v hlavnom prvku riadku modulu.
Desktop:
displej: flex; zarovnanie položiek: stred;
Tablet a telefón:
zobrazenie: blok;
Pridajte modul Woo Image do stĺpca 1
Dynamický obsah
Je čas pridať moduly, začneme s modulom Woo Images v stĺpci 1. Uistite sa, že je vybratý „Tento produkt“.
- Produkt: Tento produkt
Efekt vertikálnej rolovacej animácie
Jemný pohyb pridáme do obrázka pomocou efektu posúvania vodorovného pohybu na karte rozšírené.
- Aktivujte vertikálny pohyb: Áno
- Počiatočný posun:
- Kancelária: -4
- Tablet a telefón: 0
- Priemerný ofset: 0
- Koncový posun: 0
- Efekt spúšťacieho pohybu: stred prvku
Pridajte stĺpcový názov modulu Woo
Dynamický obsah
V stĺpci 2 je prvým modulom, ktorý potrebujeme, titulný modul Woo. Uistite sa, že v poli je vybratá možnosť „Tento produkt“. obsah dynamický.
- Produkt: Tento produkt
Nastavenia názvu nadpisu
Potom prejdite na kartu Dizajn a text nadpisu upravte nasledujúcim spôsobom:
- Písmo názvu: Oswald
- Štýl písma názvu: veľké písmená
- Farba textu názvu: # ffd623
- Veľkosť textu názvu: 80 pixlov
vzdialenosť
Vyplňte titulný modul Woo pridaním ľavého a pravého okraja.
- Ľavý okraj: 5%
- Pravý okraj: 5%
Pridajte modul popisu Woo do stĺpca 2
Dynamický obsah
Prejdime k ďalšiemu modulu, ktorým je modul popisu Woo. Používame na to nasledujúci dynamický obsah:
- Produkt: Tento produkt
- Typ opisu: Krátky popis
Nastavenia textu
Prepnite na kartu návrhu modulu a podľa toho zmeňte nastavenie textu:
- Písmo textu: Karla
- Farba textu: #dbdbdb
- Veľkosť textu: 17 px (stolné počítače a tablety), 15 px (telefóny)
- Výška riadku textu: 1,9 em
dimenzovanie
Potom zmeňte šírku na rôznych veľkostiach obrazovky.
- Šírka: 59% (pre počítače), 82% (pre tablety a telefóny)
vzdialenosť
Vyplňte modul popisu Woo pridaním vlastných hodnôt okrajov v nastaveniach medzery.
- Horný okraj: 50px
- Dolný okraj: 100px
- Ľavý okraj: 5%
- Pravý okraj: 5%
Pridajte modul Blurb do stĺpca 2
Dynamický obsah
Na zobrazenie výhod produktu, ktoré sme pridali v prvej časti tohto návodu, použijeme moduly Blurb. Pridajte prvý modul Blurb a použite dynamický obsah prvej výhody vytvorenej pre názov a telo.
- Názov: Benefit Hlava 1
- Telo: Opis výhody 1
Nahrať obrázok
Nahrajte obrázok alebo použite ikonu podľa vášho výberu. Tie, ktoré sme použili v tomto tutoriále, nájdete v priečinku na stiahnutie, ktoré ste si mohli stiahnuť na začiatku tohto tutoriálu.
Nastavenia obrázkov / ikon
Prejdite na kartu dizajnu modulu a zmeňte nastavenia obrázka / ikony takto:
- Umiestnenie obrázka / ikony: hore
- Zarovnanie obrázka / ikon: doľava
Názov textu Nastavenia
Ďalej upravujeme nastavenia textu nadpisu.
- Písmo názvu: Oswald
- Štýl písma názvu: veľké písmená
- Veľkosť textu názvu: 25 pixlov
Nastavenia textu tela
Spolu s nastavením textu tela.
- Text tela: Karla
- Veľkosť textu: 17 px (stolné počítače a tablety), 15 px (telefóny)
- Výška línie tela: 1,9 em
dimenzovanie
Potom prejdite na nastavenie veľkosti a zmeňte šírky. Je dôležité použiť hlavnú šírku menšiu ako 50%, čo nám umožní v nasledujúcich krokoch zobraziť dva moduly Blurb vedľa seba.
- Šírka obrázka: 25%
- Šírka: 49%
vzdialenosť
Rovnako pridáme medzery okolo modulu Blurb pomocou vlastných hodnôt výplne na rôznych veľkostiach obrazovky.
- Vrchná vypchávka: 8%
- Spodná vypchávka: 8%
- Čalúnenie vľavo: 8% (stolný počítač a tablet), 2% (telefón)
- Pravá výplň: 8% (stolný počítač a tablet) 2% (telefón)
Hlavný prvok
Teraz sa uistíme, že modul Summary zobrazuje text vedľa seba, a to v dvoch krokoch. Najprv skontrolujeme, či je šírka modulu menšia ako 50% (ako sme to urobili v predchádzajúcom kroku). Ďalej použijeme vlastnosť v riadku. Túto vlastnosť CSS pridáme na hlavný prvok v rozšírenej sekcii.
display: inline-block;
Zhrnutie modulu zhrnutia trikrát
Po dokončení prvého módu Blurb ho môžete klonovať trikrát. Automaticky si všimnete, že moduly Blurb sa zobrazujú v mriežke.
Upravte obrázky modulu Blurb
Upravte obrázok v každom duplikáte podložky Blurb. Nájdete ich v priečinku na stiahnutie, ktorý ste si možno stiahli na začiatku tohto článku.
Upravte dynamický obsah modulu Blurb
Upravte aj dynamický obsah každého duplikovaného modulu Blurb.
- Názov: Názov služby (2,3 alebo 4)
- Telo: opis výhod (2,3 alebo 4)
Pridajte hranice do modulov Blurb jednotlivo
Nastavenie okrajov modulu 1
Teraz, aby sme dokončili návrh našej mriežky, pridáme hranice k modulom Blurb na individuálnej úrovni. Otvorte prvý Blurb mód a použite rovný okraj.
- Šírka pravého okraja: 1px
- Farba pravého okraja: # ffd623
Do prvého modulu Blurb tiež pridajte dolnú hranicu.
- Šírka dolného okraja: 1px
- Farba dolného okraja: # 000000
Nastavenie okrajov modulu 2
Potom otvorte druhý modul Blurb a použite spodný okraj.
- Šírka dolného okraja: 1px
- Farba dolného okraja: # 000000
Nastavenie okrajov modulu 3
Dokončite návrh mriežky pridaním priameho okraja do tretieho modulu Blurb.
- Šírka pravého okraja: 1px
- Farba pravého okraja: # ffd623
Pridať Woo Pridať do košíka Modul v stĺpci 2
Dynamický obsah
Posledným modulom, ktorý v našom dizajne potrebujeme, je modul Woo Add to Cart. Uistite sa, že je v oblasti dynamického obsahu vybratá možnosť „Tento produkt“.
- Produkt: Tento produkt
Nastavenia poľa
Prejdite na nasledujúcu kartu návrhu a zmeňte nastavenia poľa.
- Farba pozadia polí: #ffffff
- Farba textu poľa: # 000000
- Zaoblené polia: 0px (všetky rohy)
- Šírka dolného okraja polí: 1px
- Farba dolného okraja polí: # 000000
Nastavenia tlačidiel
Potom podľa toho upravte tlačidlo:
- Pre tlačidlo použite vlastné štýly: Áno
- Veľkosť textu tlačidla: 20 pixlov
- Farba textu tlačidla: # 000000
- Farba pozadia tlačidla: # ffd623
- Šírka okraja tlačidla: 0px
- Polomer okraja tlačidla: 0 px
- Písmo tlačidla: Oswald
- Štýl písma tlačidla: veľké písmená
- Horná vypchávka: 20px
- Spodné čalúnenie: 20px
- Ľavé čalúnenie: 50px
- Pravá výplň: 50px
vzdialenosť
A dokončite parametre modulu pridaním vlastných hodnôt okrajov.
- Horný okraj: 100px
- Ľavý okraj: 5%
3. Uložte zmeny generátora témy a pozrite si výsledok
Po dokončení navrhovania šablóny stránky produktu môžete uložiť všetky zmeny nástroja Tvorca tém a zobraziť výsledky svojich produktov!
prehľad
Teraz, keď sme prešli všetkými krokmi, poďme sa konečne pozrieť na to, ako to vyzerá na rôznych veľkostiach obrazovky.
záverečné myšlienky
V tomto článku sme si ukázali, ako byť kreatívni pomocou svojej nasledujúcej šablóny stránky produktu Divi. Konkrétne sme vám ukázali, ako zahrnúť dynamickú mriežku výhod produktu a pridať tak na stránku produktu ďalšie výhody. Tento návod sme vytvorili pomocou programu Divi v kombinácii s doplnkom Advanced Custom Fields. Môžete si tiež zadarmo stiahnuť súbor JSON! Ak máte akékoľvek otázky alebo návrhy, neváhajte zanechať komentár v sekcii komentárov nižšie.