Ako používať navigačný modul s plnou šírkou v aplikácii Divi Builder

Modul Divi's Full Width Menu vám umožňuje umiestniť navigačné menu kamkoľvek na stránku. To by sa dalo použiť na pridanie ponuky druhej stránky na stránku alebo by sa to dalo použiť v spojení s funkciou Prázdna stránka na presunutie vašej hlavnej navigácie do dolnej časti stránky. Môžete napríklad presunúť ponuku pod svoju prvú sekciu, aby ste vyhoveli ľuďom s veľkým úvodným obrázkom. Toto v zásade umožňuje vašej navigácii v hlavičke pohybovať sa po stránke pomocou nástroja na tvorbu!

Ako na svoju stránku pridať modul ponuky na celú obrazovku

Predtým, ako budete môcť na svoju stránku pridať modul ponuky s plnou šírkou, musíte najskôr prejsť do Divi Builder. 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.

Po zadaní nástroja Visual Builder môžete kliknutím na sivé tlačidlo plus pridať na svoju stránku nový modul. Nové moduly s plnou šírkou je možné pridať iba do sekcií s plnou šírkou. Ak začínate novú stránku, nezabudnite na svoju stránku najskôr pridať sekciu s plnou šírkou. Máme niekoľko skvelých návodov, ako používať prvky sekcie Divi.

V zozname modulov vyhľadajte modul ponuky s plnou šírkou a kliknutím na ňu ho pridajte na svoju stránku. V zozname modulov je možné prehľadávať, čo znamená, že môžete tiež napísať slovo „Fullwith menu“ alebo „full-width menu“ (v závislosti od verzie) a potom kliknúť na Enter, aby ste automaticky vyhľadali a pridali modul ponuky na celú šírku ! 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: Pridanie ponuky Úplná šírka pod hlavičkou stránky

V tomto príklade vám ukážem, ako pridať ponuku celej šírky v sekcii hlavičky stránky.

Tu je príklad:

Pretože táto nová ponuka na celú stránku nahradí predvolenú hlavnú navigačnú ponuku, je potrebné zvoliť šablónu prázdnej stránky, aby sa okrem ponuky na celú šírku nezobrazila v hornej časti stránky ani predvolená navigačná ponuka. že doplním.

Ak chcete upraviť šablónu stránky, prejdite do editora stránky a v oblasti Atribúty stránky na pravom bočnom paneli vyberte šablónu „prázdna stránka“.

Pretože tento modul zobrazí ponuku, ktorá už existuje, je dôležité, aby ste ju už vytvorili pred pridaním do modulu ponuky na celú šírku.

Po vytvorení ponuky použite vizuálny nástroj na pridanie sekcie Plná šírka pod sekciu hlavičky stránky. Potom do sekcie pridajte modul ponuky s plnou šírkou.

Aktualizujte nastavenia ponuky Fullwidth takto:

Možnosti obsahu

Ponuka: [vyberte ponuku, ktorá sa má v module použiť] Kontext: # 333333

Možnosti návrhu

Farba textu: Svetlá Orientácia textu: Stredové menu Písmo: Roboto Menu Veľkosť písma: 20px

A je to!

Trik : Môžete použiť možnosti zobrazenia na karte Rozšírené na skrytie tejto ponuky v mobilných zariadeniach a zobrazenie inej ponuky nad hlavičkou, aby používatelia mobilných zariadení videli túto ponuku bez toho, aby museli posúvať stránku nadol .

Možnosti obsahu ponuky Fullwidth

Na karte Obsah nájdete všetky obsahové prvky modulu, napríklad text, obrázky a ikony. Všetko, čo ovláda čo vo vašom module sa vždy nájde na tejto karte.

Farba pozadia

Modul ponuky má predvolene bielu farbu pozadia. Ak chcete pre pozadie ponuky použiť inú farbu, môžete ju tu zvoliť pomocou výberu farieb.

Farba pozadia rozbaľovacej ponuky

V predvolenom nastavení dedia rozbaľovacie ponuky vo vašom module ponuky farbu pozadia definovanú v predchádzajúcom nastavení. Ak chcete, aby rozbaľovacie ponuky mali svoju vlastnú farbu, môžete pomocou tohto nastavenia zvoliť vlastnú farbu.

Farba pozadia mobilnej ponuky

V mobilných zariadeniach sa modul ponuky transformuje do iného dizajnu a je viac prispôsobený mobilným telefónom. Farbu pozadia mobilnej rozbaľovacej ponuky môžete ovládať nezávisle od jej náprotivku na pracovnej ploche.

Štítok správy

Toto zmení štítok modulu v konštruktore na ľahšiu identifikáciu. Keď použijete zobrazenie WireFrame v programe Visual Builder, tieto štítky sa zobrazia v bloku modulu rozhrania Divi Builder.

Možnosti návrhu v celej šírke

Na karte Dizajn nájdete všetky možnosti štýlov modulu, ako sú písma, farby, veľkosť a medzery. Toto je karta, ktorú použijete na zmenu vzhľadu vášho modulu. Každý modul Divi má dlhý zoznam nastavení dizajnu, pomocou ktorých môžete čokoľvek meniť.

Otvorte podmenu

Všetky podmenu sa predvolene otvárajú ako rozbaľovacia ponuka pod lištou hlavnej ponuky. Ak umiestnite ponuku do dolnej časti stránky a vaša ponuka obsahuje dlhé rozbaľovacie ponuky, môžete ich otvoriť nad modulom ponuky, aby ponuka nepresahovala okno prehliadača.

Vytvorte odkazy na celú šírku

Odkazy na najvyššiu úroveň s modulom ponuky sú predvolene umiestnené v rámci predvolenej šírky obsahu. Ak chcete odstrániť toto obmedzenie a nechať svoje odkazy bežať po celej šírke stránky, počínajúc od ľavého krajného okraja obrazovky, môžete povoliť túto možnosť.

Farba rozbaľovacej ponuky

V rozbaľovacích ponukách sú odkazy oddelené riadkom s veľkosťou 1 pixel. Ak chcete prispôsobiť farbu tohto riadku, môžete si zvoliť vlastnú farbu pomocou výberu farieb v tomto nastavení.

Farba textu

Tu môžete zvoliť hodnotu svojho textu. Ak pracujete na tmavom pozadí, váš text by mal byť zapnutý. Ak pracujete na svetlom pozadí, text by mal byť tmavý.

Textová orientácia

Toto určuje, ako je váš text zarovnaný v module. Môžete si vybrať medzi ľavou, pravou a stredovou.

Aktívna farba odkazu

Farby aktívnych odkazov sú zvýraznené v module ponuky, aby sa užívateľovi zobrazila ich aktuálna poloha. Pomocou tohto nastavenia môžete zmeniť farbu zvýraznenia použitú pre tieto aktívne odkazy.

Farba textu rozbaľovacej ponuky

V predvolenom nastavení text v rozbaľovacích ponukách modulu dedí farbu textu hlavnej ponuky. Túto farbu však môžete zmeniť, ak ste si definovali vlastnú farbu pozadia rozbaľovacej ponuky.

Farba textu ponuky pre mobilné zariadenia

V predvolenom nastavení text v rozbaľovacích ponukách modulu dedí farbu textu hlavnej ponuky. Túto farbu však môžete zmeniť, ak ste nastavili vlastnú farbu pozadia mobilnej ponuky.

Písmo ponuky

Písmo písma ponuky môžete zmeniť výberom požadovaného písma v rozbaľovacej ponuke. Divi prichádza s desiatkami skvelých typov písma, ktoré používajú písma Google. Divi predvolene používa pre všetok text na svojej stránke písmo Open Sans. Štýl textu môžete tiež prispôsobiť pomocou možností tučné písmo, kurzíva, veľké písmená a podčiarknutie.

Ponuka veľkosti písma

Tu môžete upraviť veľkosť písma ponuky. Posunutím posúvača rozsahu môžete zväčšiť alebo zmenšiť veľkosť textu alebo priamo zadajte požadovanú hodnotu veľkosti textu do vstupného poľa vpravo od posúvača. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.

Farba textu ponuky

V predvolenom nastavení sa všetky farby textu v Divi zobrazujú ako biele alebo tmavošedé. Ak chcete zmeniť farbu digitálneho textu, vyberte pomocou tejto možnosti požadovanú farbu vo výbere farieb.

Rozstup písmen v ponuke

Medzery medzi písmenami ovplyvňujú medzeru medzi jednotlivými písmenami. Ak chcete zväčšiť medzeru medzi jednotlivými písmenami v číselnom texte, pomocou jazdca rozsahu upravte medzeru alebo zadajte požadovanú veľkosť medzery do vstupného poľa vpravo od jazdca. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.

Výška linky ponuky

Výška riadku ovplyvňuje medzeru medzi každým riadkom numerického textu. Ak chcete zväčšiť medzeru medzi jednotlivými riadkami, upravte medzeru pomocou posúvača rozsahu alebo do vstupného poľa zadajte požadovanú veľkosť medzery. sa nachádza napravo od kurzora. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.

Možnosti rozšírenej šírky pásma ponuky

Na karte rozšírené nájdete možnosti, ktoré by sa mohli hodiť skúsenejším webovým dizajnérom, napríklad vlastné atribúty CSS a HTML. Tu môžete použiť vlastné CSS na ktorýkoľvek z mnohých prvkov modulu. Na modul môžete tiež použiť vlastné triedy a identifikátory CSS, ktoré sa dajú použiť na prispôsobenie modulu v súbore style.css vašej detskej témy.

CSS ID

Zadajte voliteľné ID CSS, ktoré sa použije pre tento modul. ID je možné použiť na vytvorenie vlastného štýlu CSS alebo na prepojenie s konkrétnymi sekciami vašej stránky.

Triedu CSS

Zadajte voliteľné triedy CSS, ktoré sa majú použiť pre tento modul. Na vytvorenie vlastného štýlu CSS možno použiť triedu CSS. Môžete pridať viacero tried oddelených medzerou. Tieto triedy možno použiť vo vašej podradenej téme Divi alebo vo vlastnej šablóne so štýlmi CSS, ktorú pridáte na svoju stránku alebo web. webové stránky pomocou možností témy Divi alebo nastavení stránky Divi Builder.

Vlastné CSS

Vlastné CSS je možné použiť aj na modul a na ktorékoľvek z jeho vnútorných častí. V sekcii Vlastné CSS nájdete textové pole, kde môžete priamo do každého prvku pridať vlastné šablóny štýlov CSS. Záznamy CSS v týchto nastaveniach sú už zabalené v značkách štýlov. Stačí teda zadať pravidlá CSS oddelené bodkočiarkami.

Animácia rozbaľovacej ponuky

Môžete si vybrať medzi rôznymi animáciami, ktoré sa majú použiť, keď je povolená rozbaľovacia ponuka. Animácia je predvolene nastavená na postupné zosvetlenie, ale vy ju zmeníte na: zväčšenie, pretiahnutie alebo prevrátenie.

viditeľnosť

Táto možnosť vám umožňuje ovládať zariadenia, na ktorých sa modul zobrazuje. Môžete sa rozhodnúť deaktivovať svoj modul na tabletoch, smartfónoch alebo stolových počítačoch jednotlivo. To je užitočné, ak chcete používať rôzne módy na rôznych zariadeniach alebo ak chcete zjednodušiť mobilný dizajn odstránením určitých prvkov zo stránky.

[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]

Ako používať navigačný modul Divi Builder Full-Width