Predtým, ako budete môcť na svoju stránku pridať modul Toggle, musíte najskôr prejsť do Divi Buildera. Raz Divi téma nainštalovaný na vašom webové stránky, všimnete si tlačidlo Použite nástroj Divi Builder nad editorom príspevkov vždy, keď vytvoríte novú stránku. Kliknutím na toto tlačidlo aktivujete program Divi Builder a získate prístup ku všetkým modulom Divi Builder. Potom kliknite na tlačidlo Použite Visual Builder na spustenie generátora vo vizuálnom režime. Môžete tiež kliknúť na tlačidlo Povoliť Visual Builder keď si prezeráte svoje webové stránky v popredí, ak ste prihlásení do svojho hlavného panela WordPress.

prístup k vizuálnemu staviteľovi

Keď sa nachádzate v nástroji Visual Builder, môžete kliknutím na sivé tlačidlo plus pridať nový modul na svoju stránku. Nové moduly je možné pridávať iba do riadkov. Ak začínate novú stránku, nezabudnite najskôr na svoju stránku pridať riadok.

flip flop divi modul.png

Vyhľadajte prepínací modul v zozname modulov a kliknutím naň ho pridajte na svoju stránku. Zoznam modulov je prehľadateľný, čo znamená, že môžete tiež napísať „prepínač“ a potom stlačiť kláves Enter, aby ste vyhľadali a automaticky pridali prepínací modul! Po pridaní modulu vás privíta zoznam možností modulu. Tieto možnosti sú rozdelené do troch hlavných skupín: Obsah , Koncepcia et pokročilý .

Príklad použitia: stránka s často kladenými otázkami

Stránka s často kladenými otázkami je jedným z najlepších miest na konsolidáciu informácií pomocou modulu Toggle. Umožňuje používateľovi rýchlo identifikovať hľadanú otázku bez toho, aby musel čítať tony textu. V tomto príklade vám ukážem, ako môžete pomocou modulu Prepnúť navrhnúť modernú sekciu Časté otázky pre stránku Časté otázky v priebehu niekoľkých minút.
vzorová stránka FAQ.jpg

Pomocou nástroja Visual Builder pridajte novú sekciu s riadkom s plnou šírkou (1 stĺpec). Potom pridajte do riadku modul Oddeľovač. Na karte Obsah v nastaveniach modulu Oddeľovač vyberte možnosť „Zobraziť oddeľovač“.

napríklad tlačidlo flip-flop divi.png

Na karte Návrh zadajte nasledujúce možnosti:

Farba: # 000000 (čierna)
Štýl oddeľovača: Pevný
Pozícia oddeľovača:
Vertikálne vycentrovaný rozdeľovač Hmotnosť: 4px
Výška: 1

možnosti konfigurácie prepínať divi.png

Potom pridajte prepínací modul pod oddeľovač, ktorý som práve vytvoril v rovnakom riadku. V nastaveniach Prepnúť modul aktualizujte nasledujúce položky:

Karta Obsah

Názov: [zadajte svoj názov]
Obsah: [zadajte svoj obsah]
Stav: Zatvorené
Otvorená farba pozadia: #ffffff
Uzavreté Prepnúť farbu pozadia: #ffffff
Farba pozadia: #ffffff

Karta Návrh

Farba ikony: # 000000
Otvoriť Toggle Barva textu: # 000000
Uzavretá farba textu Toggle: # 000000
Písmo názvu: Open Sans, Bold
Veľkosť písma: 24px
Názov textu Farba: # 000000
Telo písma: Open Sans
Veľkosť písma tela: 18px
Farba tela textu: # 666666
Výška linky tela: 1.6em
Použite okraj: YES
Šírka ohraničenia: 0px
Vlastné čalúnenie: Najvyššia 2px, spodná 2px

nový obsah s divi.png rocker

Po uložení nastavenia prepínacieho modulu duplikujte vytvorený oddeľovač a umiestnite ho pod prepínací modul. To ohraničí hojdačku hornou a dolnou deliacou čiarou. Potom duplikujte svoj prepínací modul a umiestnite ho za spodný oddeľovací riadok. Pretože sa jedná o duplicitný prepínací modul, všetky návrhové nastavenia sa preniesli do nového prepínacieho modulu a všetko, čo musíte urobiť, je aktualizovať obsah nového prepínacieho modulu. Potom pokračujte v procese duplikovania modulov Division and Scale Modules a aktualizujte obsah svojich váh, kým nevyplníte celú časť FAQ.

To je všetko. Teraz máte modernú sekciu Časté otázky, ktorá používa modul Toggle na konsolidáciu vašich otázok a odpovedí.

prepnúť modul divi.gif

Teraz, keď ste videli prepínací modul v akcii, sa ponorte do VŠETKÝCH jeho nastavení v nižšie uvedených sekciách. Poskytli sme podrobný pohľad na to, čo nájdete na každej karte v nastaveniach modulu, a vysvetlenie, čo každý z nich robí.

Parametre obsahu modulu Prepnúť

parametre flip-flops divi.png

Záložka obsah prepínacieho modulu je usporiadaná do nasledujúcich skupín parametrov (ktoré sa tiež striedajú!).

Texty

Sem môžete pridať nadpis a prepnúť obsah.

Etat

Pri tomto nastavení si môžete vybrať, či chcete, aby sa vaše tlačidlo v predvolenom nastavení zobrazovalo otvorené alebo zatvorené.

kontext

Tu môžete zmeniť farbu pozadia, keď je prepínač otvorený, a farbu pozadia, keď je zatvorený. Môžete ich tiež ľahko vytvoriť rovnaké nastavením možnosti farby pozadia. K dispozícii je tiež možnosť nastaviť alebo nahrať obrázok na pozadí.

Správcovská značka

V predvolenom nastavení sa váš prepínací modul zobrazuje v generátore so štítkom s textom „Prepnúť“. Značka Admin umožňuje zmeniť túto značku pre ľahšiu identifikáciu.

Konštrukčné parametre modulu vahadla

voľba návrhu prepínať wordpress.png

Parametre návrhu prepínacieho modulu boli zoskupené do nasledujúcich rozbaľovacích prepínačov na karte Návrh.

ikona

Tu môžete zmeniť farbu ikony prepínača.

Texty

Tu môžete nastaviť farbu pre otvorený a uzavretý prepínací text.

Názov textu

Tu môžete upraviť písmo textu nadpisu, váhu, veľkosť, farbu, medzery, výšku riadku a ďalšie.

hlavný text

Tu môžete upraviť písmo, váhu, veľkosť, farbu, medzery, výšku riadku a ďalšie.

hranice

Tu si môžete zvoliť použitie ohraničenia. A ak sa rozhodnete použiť orámovanie, môžete tiež zvoliť jeho farbu, zmeniť jeho šírku a zvoliť jeho štýl.

vzdialenosť

V oblasti medzier môžete pridať vlastnú výplň do hornej, pravej, dolnej alebo ľavej časti prepínača. Tieto hodnoty môžete zmeniť aj pre počítače, tablety alebo mobilné zariadenia.

Rozšírené nastavenia prepínania modulov

flip-flop parameter divi.png

Na karte Spresnenie prepínacieho modulu môžete pridať jedinečný identifikátor a triedu css. Môžete tiež pridať vlastný css do rôznych preddefinovaných (a vopred vybraných) selektorov css vo vlastnom rozbaľovacom module videa css. Nakoniec v rozbaľovacom zozname viditeľnosti môžete upraviť viditeľnosť svojho modulu na telefónoch, tabletoch a stolových počítačoch.

To je z tohto tutoriálu všetko, dúfam, že vám umožní lepšie využívať 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”]STIAHNUŤ TÉMU DIVI [/vcex_button][/vc_column=][vc_column width] /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”]STIAHNUŤ TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Ďalšie výukové programy spoločnosti Divi