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.

Možný výsledok divi

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

Nainštalujte si rozšírený doplnok vlastného poľa

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

Vytvorte polia ACF

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 pravidlá

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
Pridajte pole ac
Prispôsobenie poľa Divi

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
Nakonfigurujte polia ACF

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

Tvorba produktov Divi

Vyplňte polia Výhody produktu

A plniť výhody produktu.

Vyplňte polia výhod divi

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

Tvorca tém Divi

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.

Pridajte všetky produkty woocommerce

Zadajte editor šablón tela modelu

Potom zadajte telo modelu kliknutím na „Pridať vlastné telo“ a výberom „Vytvoriť vlastné telo“.

Budovanie tela divi

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
Konfigurácia pozadia sekcie Divi

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
Konfigurácia rozstupov častí Divi

Pridajte nový riadok

Štruktúra stĺpca

Pokračujme pridaním nového riadku do sekcie, ktorá má nasledujúcu štruktúru:

Konfigurácia usporiadania riadkového modulu

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%
Nastavenia medzery medzi riadkovými modulmi

vzdialenosť

Odstráňte všetky horné a spodné vnútorné medzery.

  • Vysoká vnútorná marža: 0px
  • Nízka vnútorná marža: 0px
Nastavenia medzery medzi riadkami modulu Divi

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
Nastavenia modulu oznámenia woo košíka divi

Farebné pozadie

Potom otvorte nastavenia modulu a použite priehľadné pozadie.

  • Farba pozadia: rgba (0,0,0,0)
Nastavenia divi modulu Woo cart

Nastavenia textu

Prepnite na kartu „Dizajn“ a zmeňte písmo textu.

  • Písmo textu: Karla
Nastavenia písma modulu Divi

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
Nastavenia farieb modulu oznámenia oznámenia Woo
  • Písmo tlačidla: Oswald
  • Štýl písma tlačidla: Shift
Úprava farebného návrhu modulu Woo cart module
  • 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
Oznámenie o konfiguračnom dizajnovom module woo cart

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%
Zadné nastavenie modulu Divi line

vzdialenosť

Poďme na kartu Návrh a pridajme veľkú vnútornú rezervu.

  • Vrchná výplň: 150px
Konfigurácia rozstupov riadkových modulov Divi

Pridať nový riadok

Štruktúra stĺpca

Pokračujte pridaním nového riadku s rovnakou štruktúrou, ako je uvedené nižšie:

Konfigurácia štýlu Divi line

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
Divi modul konfigurácie odkvapu

riadkovanie

Odstránime tiež horný vnútorný okraj.

  • Vrchná výplň: 0px
Konfigurácia rozstupov modulov Divi

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;
Nastavenia štýlu modulu Divi line

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
Nastavenia obrazového modulu produktu Woocommerce

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
Úprava obrazového modulu Divi

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
mriežka výhod produktu

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
Dizajnová úprava názvu modulu Divi

vzdialenosť

Vyplňte titulný modul Woo pridaním ľavého a pravého okraja.

  • Ľavý okraj: 5%
  • Pravý okraj: 5%
Nastavenie modulu názvu Divi

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 modulu popisu produktu

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
Popis modulu úpravy farieb divi

dimenzovanie

Potom zmeňte šírku na rôznych veľkostiach obrazovky.

  • Šírka: 59% (pre počítače), 82% (pre tablety a telefóny)
Nastavenie šírky modulu Divi Summary

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%
Modul popisu produktu Divi

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
Nastavenie textu modulu Divi Summary

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.

Súhrnná konfigurácia divi obrazového modulu

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
Modul nastavenia Divi

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
Konfigurácia písma modulu súhrnu divi

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
Konfigurácia súhrnného oddielu textového modulu i

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%
Konfigurácia veľkosti súhrnného modulu divi

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)
Nakonfigurujte rozstup modulov súhrnu divi

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;
Pridajte modul divi kódu CSS

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.

Sekcia názvu produktu divi

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.

Obrázok modulu zhrnutia Divi

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)
Pravidlá modulu zhrnutia Divi

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
Modul súhrnu divi konfigurácie so zaobleným okrajom

Do prvého modulu Blurb tiež pridajte dolnú hranicu.

  • Šírka dolného okraja: 1px
  • Farba dolného okraja: # 000000
Nakonfigurujte dolný okraj divi
Nastavenie okrajov modulu 2

Potom otvorte druhý modul Blurb a použite spodný okraj.

  • Šírka dolného okraja: 1px
  • Farba dolného okraja: # 000000
Súhrnný modul konfiguračného ohraničenia divi
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
mriežka výhod produktu

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
Pridajte na kartu nastavenia modulu divi

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
Konfigurácia modulu farebných štýlov pridať do košíka divi
  • Zaoblené polia: 0px (všetky rohy)
  • Šírka dolného okraja polí: 1px
  • Farba dolného okraja polí: # 000000
Nakonfigurujte rozmiestnenie častí divi

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
Nakonfigurujte dizajn tlačidiel divi
  • Písmo tlačidla: Oswald
  • Štýl písma tlačidla: veľké písmená
Konfigurujte tlačidlo divi
  • Horná vypchávka: 20px
  • Spodné čalúnenie: 20px
  • Ľavé čalúnenie: 50px
  • Pravá výplň: 50px
Nakonfigurujte veľkosť modulu divi

vzdialenosť

A dokončite parametre modulu pridaním vlastných hodnôt okrajov.

  • Horný okraj: 100px
  • Ľavý okraj: 5%
Nakonfigurujte medzery medzi divmi

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!

Ušetrite divi dizajn
Uložiť divi úpravy

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.

Výsledok ukážky

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.