Způsob, jakým navrhujete stránku produktu, má okamžitý dopad na její chování Návštěvníci. Dobře navržený a personalizovaný design stránky produktu může umožnit Návštěvníci aby se snáze rozhodli, zda chtějí váš produkt koupit. Pokud hledáte způsob, jak udělat stránku produktu poutavější, pravděpodobně se vám bude líbit tento tutoriál.
Ukážeme vám, jak zahrnout dynamickou mřížku výhod produktu do vašeho návrhu pomocí Divi a pluginu Advanced Custom Fields. Začneme vytvořením terénní skupiny pro výhody. Poté vyplníme vlastní pole na naší produktové stránce a zahrneme je obsah dynamický v naší šabloně stránky produktu.
Možný výsledek
Než se ponoříme do tutoriálu, pojďme se rychle podívat na výsledek na různých velikostech obrazovky.
1. Nainstalujte zásuvný modul ACF Plugin A Product Benefit Field Group
Nainstalujte si plugin Advanced Custom Fields
K zobrazení různých výhod produktů v backendu našich produktů použijeme plugin zdarma Pokročilá vlastní pole. Přístup k vašemu Backend WordPressu> Pluginy> Přidat nové> Najít plugin ACF> Instalovat> Aktivovat .
Přejděte na vlastní pole a přidejte novou skupinu polí
Po instalaci a aktivaci pluginu ACF budete mít přístup ke svým vlastním polím a přidáte novou skupinu polí.
Nastavení skupiny polí
Přiřaďte své nové skupině polí název a povolte, aby se zobrazovala pouze na stránkách produktů.
- „Typ zprávy“ se rovná „Produkt“
Přidejte první pole
Pokračujte přidáním nového pole pro název první výhody produktu.
- Štítek pole: Název výhody 1
- Typ pole: text
Opakujte krok pro zbývající pole
Totéž proveďte pro další výhody produktu a jejich popisy. Všechna tato pole vyžadují přiřazený typ pole „Text“.
- Název služby 1
- Popis výhod 1
- Název služby 2
- Popis výhod 2
- Název služby 3
- Popis výhod 3
- Název služby 4
- Popis výhod 4
2. Přidejte výhody do produktů
Otevřete nebo přidejte nový produkt
Jakmile vytvoříte skupinu polí a pole, můžete přidat výhody svých produktů na jednotlivé úrovni. Otevřete produkt podle svého výběru nebo vytvořte nový.
Vyplňte pole Výhody produktu
A plní výhody produktu.
3. Vytvořte šablonu stránky produktu v Divi Theme Builder
Přejděte do Divi Theme Builder a přidejte novou šablonu
Je čas začít s Divi! Chcete-li vytvořit novou šablonu, přejděte do Tvůrce motivů Divi a klikněte na „Přidat novou šablonu“.
Použijte šablonu na všechny produkty
Tuto šablonu používáme u všech produktů, ale můžete místo toho vybrat produkty s konkrétní kategorií nebo štítkem.
Vstupte do editoru šablon těla modelu
Poté zadejte tělo modelu kliknutím na „Přidat vlastní tělo“ a výběrem „Vytvořit vlastní tělo“.
Upravit sekci # 1
Barva pozadí
Jakmile se dostanete do editoru šablon, všimnete si sekci. Otevřete tuto sekci a změňte barvu pozadí na černou.
- Barva pozadí: # 000000
vzdálenost
Přejděte na záložku návrhu sekce a přidejte vlastní polstrování nahoře a dole.
- Horní výplň: 10px
- Spodní výplň: 10px
Přidejte nový řádek
Struktura sloupce
Pokračujme přidáním nového řádku do sekce, která má následující strukturu:
vzdálenost
Bez přidání jakýchkoli modů otevřete nastavení řádků a proveďte několik úprav mezer.
- Použít přizpůsobený žlab: Ano
- Šířka okapu: 1
- Šířka: 90%
- Maximální šířka: 100%
vzdálenost
Odstraňte všechny horní a spodní vnitřní mezery.
- Vysoká vnitřní marže: 0px
- Nízká vnitřní marže: 0px
Do sloupce přidejte modul oznámení vozíku Woo
Dynamický obsah
Jediným modulem, který na tomto řádku a v této sekci potřebujeme, je modul Woo Cart Notice. Ujistěte se, že je v dynamické sekci vybrán „Tento produkt“.
- Produkt: Tento produkt
Barva pozadí
Poté otevřete nastavení modulu a použijte průhledné pozadí.
- Barva pozadí: rgba (0,0,0,0)
Nastavení textu
Přepněte na kartu „Návrh“ a změňte písmo textu.
- Textové písmo: Karla
Nastavení tlačítka
Dokončete nastavení pluginu definováním nastavení stylu:
- Použít vlastní styly pro tlačítko: Ano
- Velikost textu tlačítka: 20 px
- Barva textu tlačítka: # 000000
- Pozadí tlačítka: # ffd623
- Šířka ohraničení tlačítka: 0px
- Tlačítko zaoblené ohraničení: 0px
- Tlačítko písmo: Oswald
- Styl písma tlačítka: Shift
- Vysoká vnitřní marže: 20px
- Nízká vnitřní marže: 20px
- Levá vnitřní marže: 50px
- Vnitřní pravá marže: 50px
Přidat oddíl # 2
Přechodové pozadí
Přidejte další pravidelnou sekci pod předchozí. Poté otevřete nastavení a použijte gradient pozadí takto:
- Barva 1: # 000000
- Barva 2: #ffffff
- Počáteční pozice:
- Stolní počítač: 30%
- Tablet: 57 %
- Telefon: 54%
- Koncová pozice:
- Stolní počítač: 30%
- Tablet: 57 %
- Telefon: 54%
vzdálenost
Pojďme na kartu Návrh a přidejme vysokou vnitřní marži.
- Horní výplň: 150px
Přidat nový řádek
Struktura sloupce
Pokračujte přidáním nového řádku se stejnou strukturou, jak je znázorněno níže:
dimenzování
Aniž bychom přidali nějaké mody, otevřeme nastavení a změníme mezery následujícím způsobem:
- Použít vlastní žlaby: Ano
- Okapový prostor: 1
- Šířka: 95%
- Maximální šířka: 2560 px
- Zarovnání čáry: Střed
Vzdálenost
Také odstraníme horní vnitřní okraj.
- Horní výplň: 0px
Hlavní prvek
A na střed obsah sloupec na DeskTop, použijeme dva řádky kódu CSS v hlavním prvku řádku modulu.
Desktop:
displej: flex; zarovnání-položky: střed;
Tablet a telefon:
zobrazení: blok;
Přidejte modul Woo Image do sloupce 1
Dynamický obsah
Je čas přidat moduly, začneme s modulem Woo Images ve sloupci 1. Zkontrolujte, zda je vybrán „Tento produkt“.
- Produkt: Tento produkt
Efekt vertikální rolování animace
Přidáme jemný pohyb do obrazu pomocí efektu posouvání vodorovného pohybu na kartě Upřesnit.
- Aktivujte svislý pohyb: Ano
- Počáteční posun:
- Kancelář: -4
- Tablet a telefon: 0
- Průměrný offset: 0
- Koncový offset: 0
- Efekt spouštěcího pohybu: střed prvku
Do sloupce 2 přidejte titulní modul Woo
Dynamický obsah
Ve sloupci 2 je prvním modulem, který potřebujeme, modul titulku Woo. Ujistěte se, že je v rámečku vybráno „Tento produkt“. obsah dynamický.
- Produkt: Tento produkt
Nastavení textu nadpisu
Poté přejděte na kartu Návrh a stylujte název textu takto:
- Písmo názvu: Oswald
- Styl písma nadpisu: velká písmena
- Barva textu nadpisu: # ffd623
- Velikost textu nadpisu: 80 pixelů
vzdálenost
Dokončete titulní modul Woo přidáním levého a pravého okraje.
- Levý okraj: 5%
- Pravý okraj: 5%
Do sloupce 2 přidejte modul popisu Woo
Dynamický obsah
Pojďme k dalšímu modulu, kterým je modul popisu Woo. K tomu používáme následující dynamický obsah:
- Produkt: Tento produkt
- Typ popisu: Krátký popis
Nastavení textu
Přepněte na kartu návrhu modulu a odpovídajícím způsobem změňte nastavení textu:
- Textové písmo: Karla
- Barva textu: #dbdbdb
- Velikost textu: 17 px (stolní počítač a tablet), 15 px (telefon)
- Výška textového řádku: 1,9 em
dimenzování
Poté změňte šířku na různých velikostech obrazovky.
- Šířka: 59% (stolní), 82% (tablet a telefon)
vzdálenost
Vyplňte modul popisu Woo přidáním vlastních hodnot okrajů v nastavení mezer.
- Horní okraj: 50px
- Dolní okraj: 100px
- Levý okraj: 5%
- Pravý okraj: 5%
Přidejte modul Blurb do sloupce 2
Dynamický obsah
Pro zobrazení výhod produktu, které jsme přidali v první části tohoto tutoriálu, použijeme moduly Blurb. Přidejte první modul Blurb a použijte dynamický obsah první výhody vytvořené pro titul a tělo.
- Název: Benefit Název 1
- Tělo: Benefit Popis 1
Nahrát obrázek
Nahrajte obrázek nebo použijte další ikonu. Ty, které jsme použili v tomto tutoriálu, najdete ve složce ke stažení, kterou jste si mohli stáhnout na začátku tohoto tutoriálu.
Nastavení obrázku / ikony
Přejděte na kartu návrhu modulu a změňte nastavení obrázku / ikony následujícím způsobem:
- Umístění obrázku / ikony: nahoru
- Zarovnání obrázku / ikony: Vlevo
Nastavení textu nadpisu
Dále upravujeme nastavení textu nadpisu.
- Písmo názvu: Oswald
- Styl písma nadpisu: Velká písmena
- Velikost textu nadpisu: 25 pixelů
Nastavení textu těla
Spolu s nastavením základního textu.
- Tělo Písmo: Karla
- Velikost textu: 17 px (stolní počítač a tablet), 15 px (telefon)
- Výška linie těla: 1,9 em
dimenzování
Poté přejděte na nastavení velikosti a změňte šířky. Je důležité použít hlavní šířku menší než 50%, což nám umožní v následujících krocích ukázat vedle sebe dva Blurb moduly.
- Šířka obrázku: 25%
- Šířka: 49%
vzdálenost
Také přidáme mezery kolem modulu Blurb pomocí vlastních hodnot výplně na různých velikostech obrazovky.
- Horní výplň: 8%
- Dolní výplň: 8%
- Výplň vlevo: 8% (stolní počítač a tablet), 2% (telefon)
- Pravá výplň: 8% (stolní počítač a tablet) 2% (telefon)
Hlavní prvek
Nyní se ujistíme, že modul Souhrn zobrazuje text vedle sebe ve dvou krocích. Nejprve se ujistíme, že šířka modulu je menší než 50% (jako v předchozím kroku). Dále použijeme vlastnost na řádku. Tuto vlastnost CSS přidáme na hlavní prvek v pokročilé části.
zobrazení: inline-block;
Souhrnný modul klonujte třikrát
Jakmile dokončíte první Blurb mod, můžete jej klonovat třikrát. Automaticky si všimnete, že se moduly Blurb objevují v mřížce.
Upravte obrázky modulu Blurb
Upravte obrázek v každém duplikátu Blurb pod. Najdete je ve složce pro stahování, kterou jste si možná stáhli na začátku tohoto článku.
Upravte dynamický obsah modulu Blurb
Upravte také dynamický obsah každého duplikovaného modulu Blurb.
- Název: Název služby (2,3 nebo 4)
- Tělo: popis výhod (2,3 nebo 4)
Přidejte hranice k Blurb modulům individuálně
Nastavení okrajů modulu 1
Nyní, abychom dokončili návrh naší mřížky, přidáme hranice modulům Blurb na individuální úrovni. Otevřete první Blurb mod a použijte přímý okraj.
- Šířka pravého okraje: 1px
- Barva pravého okraje: # ffd623
Také přidejte spodní okraj k prvnímu modulu Blurb.
- Šířka dolního okraje: 1px
- Barva dolního okraje: # 000000
Nastavení okrajů modulu 2
Poté otevřete druhý modul Blurb a použijte spodní ohraničení.
- Šířka dolního okraje: 1px
- Barva dolního okraje: # 000000
Nastavení okrajů modulu 3
Dokončete návrh mřížky přidáním přímého okraje do třetího modulu Blurb.
- Šířka pravého okraje: 1px
- Barva pravého okraje: # ffd623
Přidat Woo Přidat do košíku Modul ve sloupci 2
Dynamický obsah
Posledním modulem, který v našem designu potřebujeme, je modul Woo Add to Cart. Zkontrolujte, zda je v oblasti dynamického obsahu vybrán „Tento produkt“.
- Produkt: Tento produkt
Nastavení pole
Přejděte na další kartu návrhu a změňte nastavení pole.
- Barva pozadí polí: #ffffff
- Barva textu pole: # 000000
- Zaoblená pole: 0px (všechny rohy)
- Šířka dolního okraje polí: 1px
- Barva dolního okraje polí: # 000000
Nastavení tlačítek
Poté tlačítko odpovídajícím způsobem upravte:
- Pro tlačítko použijte vlastní styly: Ano
- Velikost textu tlačítka: 20 pixelů
- Barva textu tlačítka: # 000000
- Barva pozadí tlačítka: # ffd623
- Šířka ohraničení tlačítka: 0px
- Poloměr ohraničení tlačítka: 0px
- Tlačítko písmo: Oswald
- Styl písma tlačítka: velká písmena
- Horní výplň: 20px
- Spodní výplň: 20px
- Levá výplň: 50px
- Pravá výplň: 50px
vzdálenost
A dokončete parametry modulu přidáním vlastních hodnot okrajů.
- Horní okraj: 100px
- Levý okraj: 5%
3. Uložte změny generátoru motivu a zobrazte náhled výsledku
Po dokončení navrhování šablony stránky produktu můžete uložit všechny své změny Tvůrce motivů a zobrazit výsledky svých produktů!
přehled
Nyní, když jsme prošli všemi kroky, pojďme se konečně podívat, jak to vypadá na různých velikostech obrazovky.
Závěrečné myšlenky
V tomto článku jsme vám ukázali, jak získat kreativitu s vaší další šablonou stránky produktu Divi. Konkrétně jsme vám ukázali, jak zahrnout dynamickou mřížku výhod produktu a přidat na stránku produktu další výhody. Tento tutoriál jsme vytvořili pomocí Divi v kombinaci s pluginem Advanced Custom Fields. Můžete si také stáhnout soubor JSON zdarma! Máte-li jakékoli dotazy nebo návrhy, neváhejte zanechat komentář v sekci komentáře níže.
