Při vytváření stránky produktu v Divi můžeme použít akordeonový modul k zobrazení informací o produktu pomocí dynamického obsahu. Získáte tak jedinečný design pro stránky produktů, přičemž zachováte cenné místo na stránce.
V tomto kurzu vám ukážeme, jak použít funkci dynamického obsahu Divi k vytvoření akordeonu s informacemi o produktu a jak navrhnout akordeon (a jeho obsah) pomocí Divi Visual Builder.
Začněme.
přehled
Zde je ukázka designu, který postavíme v tomto tutoriálu.
Mějte na paměti, že pro dosažení stejných výsledků musíte mít konfiguraci produktu popsanou v tomto kurzu.
Commencer
Nejprve musíte provést následující kroky:
- Pokud jste tak ještě neučinili, nainstalujte a aktivujte Divi téma nainstalován (nebo plugin Divi Builder, pokud nepoužíváte Divi téma).
- Nainstalujte a aktivujte plugin WooCommerce. Pokud nakonfigurujete WooCommerce poprvé budete muset spustit průvodce základním nastavením a připravit obchod. Po dokončení jste připraveni přidat nové produkty.
- Vytvořte nový produkt, jak je znázorněno níže.
Nastavení vzorku produktu
Chcete-li nakonfigurovat ukázkový produkt pro tento kurz, přejděte do části Produkty> Přidat nový. Pojmenujte produkt „Masáž (jedna relace)“ a kliknutím použijte program Divi Builder.
Poté aktualizujte následující nastavení stránky produktu a informace o produktu:
1. V části Nastavení stránky Divi vyberte rozložení Žádný postranní panel.
2. Přidat / vybrat kategorii produktu
3. Přidejte obrázek produktu
4. Přidejte obsah popisu.
5. pod Data produktu, změňte typ produktu na Variabilní produkt.
6. Přidejte atribut s názvem „Typ“ s následujícími hodnotami: švédština | Horký kámen | Aromaterapie | Hluboká tkáň. Nezapomeňte vybrat možnost „Používá se pro variace“.
7. Poté na kartě Variace pod přepínačem données produktu, pomocí rozevíracího seznamu vytvořte varianty ze všech atributů.
8. Z rozbalovací nabídky vyberte možnost Nastavit běžné ceny a nastavte běžnou cenu pro tři proměnné.
9. V dialogovém okně zadejte hodnotu „50“ a vyberte OK.
10. Po dokončení uložte nebo publikujte produkt.
Nyní jste připraveni začít navrhovat rozvržení pomocí vlastního produktu Accordion.
Vytvoření akordeonu Info o produktu s dynamickým obsahem v Divi
Výchozí rozložení produktu zobrazuje informace o produktu pomocí různých modulů Woo. V tomto příkladu chceme pomocí akordeonu zobrazit tři hlavní informace o produktu: popis produktu, další informace o produktu a recenze produktu. Tyto tři části obsahu se aktuálně zobrazují v modulu woo tabs. Jediné, co musíme udělat, je odstranit modul woo tabs a nahradit jej akordeonovým modulem se stejnými informacemi zavedenými prostřednictvím dynamického obsahu.
Zde je návod, jak to udělat.
Nejprve klepnutím použijete Divi v systému front-end k nasazení vizuálního generátoru. Poté vyjměte modul Woo Tabs.
Poté přidejte nový modul Accordion, který nahradí karty.
V rozbalovacím okně Nastavení akordeonu kliknutím na ikonu ozubeného kola na první akordeon otevřete individuální nastavení akordeonu.
Zadejte název „O produktu“.
Dále umístěte ukazatel myši na vstupní pole obsahu těla a klikněte na ikonu dynamického obsahu.
V seznamu dynamického obsahu vyberte „Popis produktu“.
Zobrazí se dlouhý popis produktu, který jsme definovali pro produkt na pozadí.
Jakmile je první obsah harmoniky na místě, otevřete druhé nastavení harmoniky a aktualizujte následující:
- Název: Specifikace
Poté do těla přidejte dynamický obsah „Další informace o produktu“.
Jakmile je druhý obsah harmoniky připraven, přidejte nový prvek harmoniky a aktualizujte nastavení harmoniky následujícím způsobem:
- Název: Další informace
Poté do těla přidejte dynamický obsah „Recenze produktu“, který vloží položku / obsah recenze produktu.
POZNÁMKA: Ujistěte se, že jste přidali alespoň jednu recenzi produktu, abyste viděli obsah na aktivní stránce.
Návrh dohody o produktu a obsahu s Divi
Nyní, když má náš akordeon s informacemi o produktu dynamický obsah pro zobrazení informací o produktu, jsme připraveni jej přizpůsobit pomocí nastavení vestavěného modulu akordeonu.
Otevřete nastavení modulu Accordion a aktualizujte následující:
- Barva ikony: # ff9375
- Použijte velikost písma ikony: ANO
- Ikona Velikost písma: 26px
- Přepnout barvu pozadí: #ffffff
- Otevřete textový nadpis Barva: #ff9375
- Název textu: #222222
- Písmo názvu: Lato
- Název Police: Bold
- Název Styl písma: TT
- Velikost názvu textu: 20px
- Mezera písmen názvu: 0.2em
- Výška záhlaví: 2em
- Body Font: Lato
- Velikost textu těla: 16px
- Výška těla: 1.8em
- Barva textu odkazu: #ff9375
To zacílí na všechny odkazy, které máte v dynamickém obsahu pro každou akordeon, jako je hodnocení hvězdičkami.
- Barva textu neuspořádaného seznamu: # ff9375
- Neusměrněný typ stylu seznamu: Kruh
- Neuspořádané odsazení položky seznamu: 5%
- Šířka hranice: 0px
- Šířka horního okraje: 1px
- Barva horního okraje: #222222
A v posledním kroku přidáme malý extrakt css, který extrahuje výchozí okraj mezi akordeonovými měřítky.
Na kartě Upřesnit přidejte do prvku Přepnout následující CSS:
margin-bottom: 0px;
Nyní se podívejme na konečný design akordeonu s informacemi o produktu.
Konečné úpravy rozvržení
V rozložení lze provést několik úprav, které odpovídají designu akordeonu. Například můžeme upravit písmo každého z modulů na Lato, přidat vlastní ohraničení a poloměr ohraničení kolem rozevíracího seznamu proměnných a aktualizovat tlačítko Přidat do košíku plnou barvou pozadí, která vyhovuje mu.
Po dokončení je zde konečný výsledek.
Výše jsem tento návrh zahrnul ke stažení zdarma. Neváhejte a zkontrolujte si to sami. Upozorňujeme, že pro dosažení stejných výsledků musíte mít konfiguraci produktu popsanou v tomto kurzu.
POZNÁMKA: Výchozí barva pro většinu položek WooCommerce produktu v Divi se dědí ze sekundární hodnoty barvy v nastavení přizpůsobení motivu. Může být jednodušší aktualizovat tuto sekundární barvu, jakmile modul barev woo.
Závěrečné myšlenky
Jak jsme se dozvěděli, Woo Mods nejsou jediné věci, které lze použít k získání dynamických informací o produktu. Accordion s informacemi o produktu je skvělým příkladem toho, jak můžete pomocí libovolného modulu Divi zobrazit informace o produktu jedinečným a stručným způsobem. Nebojte se prozkoumat nové vzrušující vzory akordeonů pro vaše produktové stránky. A samozřejmě můžete použít více kolébkových modulů místo harmoniky, abyste dosáhli podobných výsledků.
