Než budete moci na svou stránku přidat modul Toggle, musíte nejprve přejít do Divi Builderu. Jednou Divi téma nainstalovaný na vašem Webové stránky, 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 Povolit Visual Builder když si prohlížíte své Webové stránky v popředí, pokud jste přihlášeni do svého řídicího panelu WordPress.

přístup k vizuálním stavitelům

Jakmile jste ve Visual Builderu, 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.

flip flop divi modul.png

Vyhledejte přepínací modul v seznamu modulů a kliknutím na něj jej přidejte na svou stránku. Seznam modulů lze prohledávat, což znamená, že můžete také zadat „přepnout“ a poté stisknout klávesu Enter pro automatické vyhledání a přidání přepínacího modulu! 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 použití: stránka FAQ

Stránka Časté dotazy je jedním z nejlepších míst ke konsolidaci informací pomocí modulu Přepnout. Umožňuje uživateli rychle identifikovat hledanou otázku, aniž by musel číst spoustu textu. V tomto příkladu vám ukážu, jak můžete pomocí modulu Přepnout navrhnout moderní sekci Časté dotazy pro stránku Časté dotazy během několika minut.
vzorová stránka FAQ.jpg

Pomocí nástroje Visual Builder přidejte novou sekci s řádkem s plnou šířkou (1 sloupec). Poté přidejte do řádku modul Oddělovač. Na kartě Obsah v nastavení modulu Oddělovač vyberte možnost „Zobrazit oddělovač“.

Příklad tlačítka flip-flop divi.png

Na kartě Návrh zadejte následující možnosti:

Barva: # 000000 (černá)
Styl oddělovače: Pevné
Pozice oddělovače:
Vertikálně rozdělovač Hmotnost: 4px
Výška: 1

možnosti konfigurace přepínají divi.png

Pak přidejte přepínací modul pod dělič, který jsem právě vytvořil ve stejném řádku. V nastavení Přepnout modul aktualizujte následující:

Karta Obsah

Název: [zadejte název]
Obsah: [zadejte svůj obsah]
Stav: Zavřeno
Otevřená barva pozadí: #ffffff
Uzavřeno Přepínej barvu pozadí: #ffffff
Barva pozadí: #ffffff

Karta Návrh

Barva ikony: # 000000
Otevřít Přepnout barvu textu: # 000000
Uzavřená barva textu přepínání: # 000000
Písmo titulu: Open Sans, Bold
Velikost písma: 24px
Název textu Barva: # 000000
Body písmo: Open Sans
Velikost písma těla: 18px
Barva textu těla: # 666666
Výška linie těla: 1.6em
Použijte okraj: ANO
Šířka hranice: 0px
Vlastní výplň: Top 2px, Bottom 2px

nový obsah s divi.png rocker

Po uložení nastavení přepínacího modulu duplikujte vytvořený oddělovací modul a umístěte jej pod přepínací modul. Tím bude houpačka orámována horní a dolní dělicí čarou. Poté duplikujte svůj přepínací modul a umístěte jej za spodní oddělovací řádek. Jelikož se jedná o duplikovaný Toggle modul, všechna nastavení designu byla přenesena do nového Toggle modulu a vše, co musíte udělat, je aktualizovat obsah nového Toggle modulu. Poté pokračujte v procesu duplikování modulů Division and Scale Modules a aktualizujte obsah svých váh, dokud nedokončíte celou sekci FAQ.

To je vše. Nyní máte k dispozici moderní sekci Časté dotazy pomocí modulu Přepnout ke konsolidaci vašich otázek a odpovědí.

modul přepnout divi.gif

Nyní, když jste viděli přepínací modul v akci, se ponořte do VŠECH jeho nastavení v následujících částech. Poskytli jsme podrobný pohled na to, co najdete na každé kartě nastavení modulu, a vysvětlení, co každý z nich dělá.

Parametry obsahu modulu Přepnout

parametry flip-flops divi.png

Záložka obsahu přepínacího modulu je uspořádána do následujících skupin parametrů (které se také střídají!).

Texty

Zde můžete přidat název a přepnout obsah.

etat

Můžete si vybrat, zda chcete, aby se toto tlačítko ve výchozím nastavení zobrazovalo otevřené nebo zavřené.

kontext

Zde můžete změnit barvu pozadí, když je přepínač otevřený, a barvu pozadí, když je zavřený. Můžete je také snadno udělat stejnými nastavením možnosti barvy pozadí. K dispozici je také možnost nastavit nebo nahrát obrázek na pozadí.

Správce štítku

Ve výchozím nastavení se váš přepínací modul zobrazí se štítkem, který v generátoru přečte „Přepnout“. Značka Admin umožňuje změnit tuto značku pro snadnou identifikaci.

Konstrukční parametry modulu vahadla

možnost přepnout přepínač wordpress.png

Nastavení návrhu přepínacího modulu byla seskupena do následujících rozevíracích přepínačů na kartě Návrh.

ikona

Zde můžete změnit barvu ikony přepínání.

Texty

Zde můžete nastavit barvu pro otevřený a uzavřený přepínací text.

Název textu

Zde můžete upravit písmo nadpisu, váhu, velikost, barvu, mezery, výšku řádku a další.

Tělo textu

Zde můžete upravit písmo, váhu, velikost, barvu, mezery, výšku řádků a další.

hranice

Zde můžete zvolit použití ohraničení. A pokud se rozhodnete použít ohraničení, můžete také vybrat jeho barvu, změnit jeho šířku a zvolit jeho styl.

vzdálenost

V oblasti mezer můžete přidat vlastní výplň do horní, pravé, dolní nebo levé části přepínače. Tyto hodnoty můžete také změnit pro stolní počítače, tablety nebo mobilní zařízení.

Pokročilá nastavení přepínače modulu

flip-flop parametr divi.png

Na kartě Upřesnit přepínacího modulu můžete přidat jedinečné ID a třídu css. Můžete také přidat vlastní css do různých předdefinovaných (a předvolených) selektorů css v modulu vlastního rozevíracího videa css. Nakonec můžete v rozevíracím seznamu viditelnosti upravit viditelnost svého modulu na telefonech, tabletech a počítačích.

To je pro tento výukový program vše, doufám, že vám umožní lépe využívat modul Divi Toggle.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” 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][/vc_column=][vc_column /1″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=2&url=23065&tid40632=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”1″ style=”flat” custom_background=”#c700e” custom_hover_background=”#4226d8f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]STAŽTE SI TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Ostatní výukové programy Divi