Divi byl navržen tak, aby byl kompatibilní s WooCommerce. Začlenit se WooCommerce, musíte nainstalovat nejnovější verzi WooCommerce.

WooCommerce je plugin e-commerce který doporučujeme, protože má nejhezčí sadu funkcí, rozhraní a dodržuje osvědčené postupy kódování. Po aktivaci pluginu uvidíte na váš ovládací panel WordPress dvě nové sekce „WooCommerce“ a „Produkty“. Tyto oblasti můžete použít k úpravě nastavení elektronického obchodu a publikování nových produktů. Můžete najít dokumentace kompletní na WooCommerce zde .

Vezměte prosím na vědomí, že i když stavitel obsahuje různé moduly WooCommerce, můžete také použít WooCommerce samostatně, aniž by byl stavitel v pořádku. Můžete vytvořit standardní stránky pro pokladnu, nákupní košík atd., Jak je uvedeno v jejich dokumentaci. Můžete také přímo odkazovat na své kategorie woocommerce nebo použít Krátké kódy WooCommerce v textovém modulu Divi. Dává vám svobodu dělat téměř cokoli.

Jak přidat modul úložiště na vaši stránku

Než budete moci přidat modul obchodu na svou stránku, musíte nejprve přejít do Divi Builderu. Jednou Divi téma nainstalované na vašem webu, všimnete si tlačítka Použijte nástroj Divi Builder nad editorem příspěvků, kdykoli vytvoříte novou stránku. Kliknutím na toto tlačítko aktivujete Divi Builder a získáte přístup ke všem modulům Divi Builder. Poté klikněte na tlačítko Použijte Visual Builder pro spuštění generátoru ve vizuálním režimu. Můžete také kliknout na tlačítko Použijte Visual Builder při procházení webu v popředí, pokud jste připojeni k hlavnímu panelu WordPress.

Jakmile zadáte Visual Builder, můžete kliknutím na šedé tlačítko plus přidat nový modul na svou stránku. Nové moduly lze přidávat pouze do řádků. Pokud začínáte novou stránku, nezapomeňte nejprve přidat na stránku řádek. Máme skvělé návody k používání prvků Divi's line and section.

Vyhledejte modul obchodu v seznamu modulů a kliknutím na něj jej přidejte na svou stránku. Seznam modulů je prohledávatelný, což znamená, že můžete také zadat slovo „shop“ a poté kliknout na Enter pro automatické vyhledávání a přidání modulu shopu! Jakmile je modul přidán, budete uvítáni seznamem možností modulu. Tyto možnosti jsou rozděleny do tří hlavních skupin: Obsah , Design et pokročilý .

Příklad případu: prezentace nejnovějších produktů na domovské stránce pomocí modulu Obchod

V tomto příkladu použiji modul obchodu k zobrazení nejnovějších produktů na domovské stránce.

Zde je stránka se čtyřmi prezentovanými produkty.

Začněme.

Pomocí vizuálního nástroje přidejte běžnou sekci s řádkem o celé šířce (1 sloupec). Změňte parametr řádku tak, aby byl plný s vlastní šířkou okapu 2.

Poté do řádku přidejte modul obchodu.

Aktualizujte nastavení modulu následujícím způsobem:

Možnosti obsahu

Typ: Poslední produkty
Počet produktů: 4

Možnosti návrhu

Ikona Umístění barvy: # ea1d63
Název Police: Open Without
Název písma: 24px
Policejní cena: Otevřeno bez
Cena Velikost písma: 20px

Pokročilé možnosti (vlastní CSS)

Název:

text-align: center;
pozadí: #fff;
okraj: -10px! významné;

Prix:

text-align: center;
pozadí: #fff;
čalounění dolů: 15px;

To je vše! Zde je konečný výsledek.

Obsahujte možnosti obsahu

Na kartě obsah najdete všechny prvky obsahu modulu, například text, obrázky a ikony. Vše, co ovládá co ve vašem modulu se vždy najde na této kartě.

Styl

Vyberte typ produktů, které chcete zobrazit ve zdroji produktů. Můžete si vybrat z Nedávných produktů, které budou zobrazovat všechny vaše produkty v chronologickém pořadí, Vybrané produkty, Prodejní produkty, Nejprodávanější produkty nebo Nejlépe hodnocené produkty.

Počet výrobků

Definujte počet produktů, které chcete zobrazit. Aby se v tomto modulu mohlo objevit cokoli, musíte si nechat vyrobit výrobky.

Zahrnout kategorie

Vyberte kategorie, které chcete zahrnout.

Počet sloupců

Vyberte počet sloupců, které se mají zobrazit ve vašem modulu obchodu. 4 sloupce by měly být použity pro řádek s 1 sloupcem. 3 sloupce by měly být použity pro sloupec, který zabírá 3/4 místa na řádku. Sloupec 2 by měl být použit pro sloup, který zabírá 1/2 prostoru světla. Jeden sloupec by měl být použit pro sloupec 1/4 prostoru řádku.

Přeskupit

Vyberte, jak chcete objednávat své výrobky. Zvolte třídění podle výchozího nastavení Seřadit, Popularita, Hodnocení, Datum, Cena vzestupně, Cena vzestupně, nejstarší nejnovější, nejnovější nejstarší.

Správce štítku

Tím se změní štítek modulu v konstruktoru pro snadnou identifikaci. Když použijete pohled WireFrame ve Visual Builderu, tyto popisky se zobrazí v bloku modulu rozhraní Divi Builder.

Možnosti designu dílny

Na kartě Návrh najdete všechny možnosti stylingu modulu, například písma, barvy, velikost a mezery. Toto je karta, kterou použijete ke změně vzhledu vašeho modulu. Každý modul Divi má dlouhý seznam nastavení designu, pomocí kterého můžete cokoli změnit.

Překryvná ikona

Když umístíte ukazatel myši na položku v modulu Shop, zobrazí se ikona překrytí. Barvu použitou pro tuto ikonu můžete upravit pomocí nástroje pro výběr barev v tomto nastavení.

Barva překryvu

Když podržíte ukazatel myši nad položkou v modulu Obchod, v horní části obrázku a pod textem a ikonou názvu obchodu se zobrazí barva překrytí. Ve výchozím nastavení se používá poloprůhledná bílá barva. Pokud chcete použít jinou barvu, můžete upravit barvu pomocí nástroje pro výběr barev v tomto nastavení

Ikona selektoru

Zde si můžete vybrat vlastní ikonu, která se zobrazí, když se návštěvník vznáší nad položkami obchodu v modulu.

Barva odznaku prodeje

Když je položka v prodeji, na obrázku produktu se zobrazí odznak prodeje. Pomocí tohoto nastavení můžete upravit barvu pozadí odznaku.

Font písma

Písmo textu nadpisu můžete změnit výběrem požadovaného písma z rozevírací nabídky. Divi nabízí desítky skvělých písem nabízených fonty Google. Ve výchozím nastavení používá Divi písmo Open Sans pro veškerý text na vaší stránce. Styl textu můžete také upravit pomocí možností tučně, kurzíva, velká a velká písmena a podtržení.

Velikost písma titulku

Zde můžete upravit velikost textu nadpisu. Tažením posuvníku rozsahu můžete zvětšit nebo zmenšit velikost textu nebo přímo zadat požadovanou hodnotu velikosti textu do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Barva textu titulku

Ve výchozím nastavení se všechny barvy textu v souboru Divi zobrazují v bílé nebo tmavě šedé barvě. Pokud chcete změnit barvu textu nadpisu, vyberte pomocí této možnosti požadovanou barvu ve výběru barev.

Rozestup hlavních písmen

Mezery mezi písmeny ovlivňují mezeru mezi jednotlivými písmeny. Chcete-li zvětšit mezeru mezi každým písmenem v textu nadpisu, upravte mezeru pomocí posuvníku rozsahu nebo zadejte požadovanou velikost mezery do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Výška řádku názvu

Výška řádku ovlivňuje mezeru mezi každým řádkem textu nadpisu. Chcete-li zvětšit mezeru mezi každým řádkem, upravte mezeru pomocí posuvníku rozsahu nebo do vstupního pole zadejte požadovanou velikost mezery. umístěný napravo od kurzoru. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Cenová politika

Písmo cenového textu můžete změnit výběrem požadovaného písma z rozevírací nabídky. Divi přichází s desítkami skvělých písem využívajících písma Google. Ve výchozím nastavení používá Divi písmo Open Sans pro veškerý text na vaší stránce. Styl textu můžete také přizpůsobit pomocí možností tučně, kurzíva, velká a velká písmena a podtržení.

Cena Velikost písma

Zde můžete upravit velikost textu ceny. Tažením posuvníku rozsahu můžete zvětšit nebo zmenšit velikost textu nebo přímo zadat požadovanou hodnotu velikosti textu do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Barva textu ceny

Ve výchozím nastavení se všechny barvy textu v souboru Divi zobrazují v bílé nebo tmavě šedé barvě. Pokud chcete změnit barvu textu ceny, vyberte pomocí této možnosti požadovanou barvu ve výběru barev.

Rozestup cenových dopisů

Mezery mezi písmeny ovlivňují mezeru mezi jednotlivými písmeny. Chcete-li zvětšit mezeru mezi každým písmenem v textu ceny, použijte posuvník rozsahu k úpravě mezery nebo zadejte požadovanou velikost mezery do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Výška cenové linie

Výška řádku ovlivňuje mezeru mezi každým řádkem textu ceny. Chcete-li zvětšit mezeru mezi každým řádkem, upravte mezeru pomocí posuvníku rozsahu nebo do vstupního pole zadejte požadovanou velikost mezery. umístěný napravo od kurzoru. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Pokročilé možnosti obchodu

Na kartě Upřesnit najdete možnosti, které by zkušenější weboví designéři mohli považovat za užitečné, například vlastní atributy CSS a HTML. Zde můžete použít vlastní CSS na kterýkoli z mnoha prvků modulu. Na modul můžete také použít vlastní třídy a ID CSS, které lze použít k přizpůsobení modulu v souboru style.css vašeho podřízeného motivu.

CSS ID

Zadejte volitelné ID CSS, které chcete použít pro tento modul. ID lze použít k vytvoření vlastního stylu CSS nebo k propojení s konkrétními částmi vaší stránky.

CSS třídy

Zadejte volitelné třídy CSS pro tento modul. Třídu CSS lze použít k vytvoření vlastního stylu CSS. Můžete přidat více tříd oddělených mezerou. Tyto třídy lze použít ve vašem podřízeném motivu Divi nebo ve vlastní šabloně stylů CSS, kterou přidáte na svou stránku nebo na svůj web pomocí možností motivu Divi nebo nastavení na stránce Divi Builder.

Vlastní CSS

Vlastní CSS lze také použít na modul a na libovolné interní součásti modulu. V sekci Vlastní CSS najdete textové pole, kde můžete přidat vlastní šablony stylů CSS přímo ke každému prvku. Položky CSS v tomto nastavení jsou již zabaleny do značek stylů. Stačí tedy zadat pravidla CSS oddělená středníky.

viditelnost

Tato možnost umožňuje ovládat zařízení, na kterých se váš modul zobrazuje. Můžete se rozhodnout deaktivovat svůj modul na tabletech, chytrých telefonech nebo stolních počítačích jednotlivě. To je užitečné, pokud chcete použít různé mody na různých zařízeních, nebo pokud chcete zjednodušit mobilní design odstraněním určitých prvků ze stránky.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" rozšířené "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] STÁHNOUT TÉMA DIVI [/ vcex_button] [/ width_column] [»v] » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right " TEM DOWNLOOWN DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Ostatní výukové programy Divi

• 5 webové stránky pro použití v hotelu Divi téma
• Jak přidat text na produkt Divi WooCommerce
• Jak změnit barvu nabídky mezi stránkami Divi
• Jak přizpůsobit mřížky blogu s Divi
• Jak používat role Divi editor na WordPress
• Jak vytvořit posuvník Divi na celé obrazovce
• Jak změnit barvu nabídek mezi stránkami Divi
• Funkce, které pravděpodobně nevíte o Divi
• Jak používat Divi Builder na WordPress
• Jak používat modul posunu videa Divi
• Jak používat modul Divi Builder Flip
• Jak přidat zkušební modul na Divi Builder
• Jak používat textový modul Divi
• Jak vytvořit posuvník na Divi
• Jak upravit roli uživatele Divi
• Jak používat modul Divi Social Media
• Jak používat modul obchodu na téma WordPress Divi
• Jak používat modul bočního panelu Divi
• Jak používat modul tabulky ceny Divi
• Jak používat titulní modul publikací Divi
• Jak přidat video modul Divi
• Jak používat navigační modul článku
• Jak používat vyhledávací modul Divi
• Jak používat modul peněženky Divi
• Jak používat modul osob na nástroji Divi Builder
• Jak používat modul peněz s filtrem Divi
• Jak používat posuvný modul s plnou šířkou
• Jak používat modul obrazu Divi Builder
• Jak používat navigační modul plné šířky nástroje Divi Builder
• Jak používat modul galerie obrázků
• Jak používat modul karty Divi Builder Full-Width Card
• Jak používat portálový modul Divi s plnou šířkou
• Jak používat modul záhlaví Divi s plnou šířkou
• Jak používat počítací modul Divi
• Jak používat posuvník článků v Divi Builderu
• Jak používat modul Divi Email Optin