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.
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.
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.
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č“.
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
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
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í.
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úť
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
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
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
- 5 webové stránky pre použitie v hoteli Divi tému
- Ako pridať text na produktoch Divi WooCommerce
- Ako zmeniť farbu ponuky medzi stránkami Divi
- Ako si prispôsobiť mriežky blogu s Divi
- Ako používať role Divi editor na WordPress
- Ako vytvoriť posuvník Divi na celej obrazovke
- Ako zmeniť farbu ponúk medzi stránkami Divi
- Funkcie, ktoré pravdepodobne neviete o Divi
- Ako používať Divi Builder na WordPress
- Ako používať modul posúvania videa Divi
- Ako používať modul Divi Builder Flip
- Ako pridať modul posudkov na Divi Builder
- Ako používať textový modul Divi
- Ako vytvoriť posúvač na Divi
- Ako upraviť rolu používateľa Divi
- Ako používať modul Divi Social Media
- Ako používať modul obchodu na tému WordPress Divi
- Ako používať modul bočného panela Divi
- Ako používať modul tabuľky cien Divi
- Ako používať titulný modul publikácií Divi
- Ako pridať video modul Divi
- Ako používať navigačný modul článku
- Ako používať vyhľadávací modul Divi
- Ako používať modul peňaľenky Divi
- Ako používať osobný modul na nástroji Divi Builder
- Ako používať modul peňaženky s filtrom Divi
- Ako používať posuvný modul s plnou šírkou
- Ako používať modul obrazu Divi Builder
- Ako používať navigačný modul v celej šírke nástroja Divi Builder
- Ako používať modul galérie obrázkov
- Ako používať modul kariet Divi Builder s plnou šírkou
- Ako používať portálový modul Divi s plnou šírkou
- Ako používať modul záhlavia Divi s plnou šírkou
- Ako používať počítací modul Divi
- Ako používať posúvač článkov v aplikácii Divi Builder
- Ako používať modul Divi Email Optin