Přejít k hlavnímu obsahu

Divi tutorial: Jak používat obchodní modul

Divi: nejjednodušší téma WordPress k použití

Divi: Nejlepší WordPress téma všech dob!

více Stahování 901.000, Divi je nejoblíbenější téma WordPress na světě. Je kompletní, snadno použitelný a je dodáván s více než šablonami 62 zdarma. [Doporučeno]

Divi byl navržen tak, aby byl kompatibilní s WooCommerce. Chcete-li integrovat WooCommerce, musíte si nainstalovat nejnovější verzi WooCommerce.

WooCommerce je plugin elektronického obchodu, který doporučujeme, protože má nejhezčí sadu funkcí, rozhraní a dodržuje osvědčené postupy pro kódování. Po aktivaci pluginu uvidíte na svém panelu WordPress dvě nové sekce „WooCommerce“ a „Produkty“. V těchto oblastech můžete upravit nastavení elektronického obchodu a zveřejňovat nové produkty. 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

Před přidáním modulu obchodu na svou stránku musíte nejprve skočit do Divi Builderu. Jakmile je motiv Divi nainstalován 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.

divi stavitel

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.

shop modul divi.png

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.

zobrazovat produkty na stránce accel divi.jpg

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.

zóna volba divi.png

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

vložte butikový modul divi.png

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

Vytvořte si snadno svůj web pomocí Elementoru

Elementor vám umožní snadno vytvořit jakýkoli design webových stránek s profesionálním vzhledem. Přestaňte platit drahé za to, co můžete udělat sami. [Zdarma]

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.

produktová část divi.jpg

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

typ

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

Hledáte ty nejlepší témata a pluginy aplikace WordPress?

Stáhněte si ty nejlepší pluginy a témata aplikace WordPress na Envato a snadno si vytvořte své webové stránky. Již více než stahování 49.720.000. [EXCLUSIVE]

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.

set shop divi.png

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.

Snadno vytvořte svůj online obchod

Stáhněte si zdarma WooCommerce, nejlepší e-commerce pluginy pro prodej vašich fyzických a digitálních produktů na WordPress. [Doporučeno]

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.

předvolba boutique divi.png

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.

Ostatní výukové programy Divi

Tento článek obsahuje 1 komentář

  1. Vážený pane,

    Děkujeme za váš příspěvek.
    Mám dotaz ohledně modulu obchodu a byl bych velmi rád, kdybyste mi na něj mohl odpovědět.
    Chtěl bych, aby byly jednotlivě vybrané produkty viditelné v mém obchodním modulu. Myslel jsem, že toho lze dosáhnout přijetím „hvězdných produktů“. Ale po výběru této možnosti nemohu najít žádný způsob, jak vybrat požadované produkty pro modul. Uniká mi něco? Máte vysvětlení?

    S pozdravem, Frederiku

Zanechat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinné položky jsou označeny *

Tato stránka používá společnost Akismet ke snížení nežádoucích účinků. Přečtěte si další informace o tom, jak se používají vaše komentáře.

Zpět na začátek