Modul Menu na celú obrazovku v aplikácii Divi uľahčuje pridávanie nádherných farebných hlavičiek do hornej časti vašich stránok (alebo kamkoľvek na vašom webe, ak chcete). Tieto moduly je možné umiestniť iba do sekcií s plnou šírkou.

Ako pridať modul Divi Full Screen Menu

Pred pridaním modulu ponuky na celú obrazovku na svoju stránku 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 ponuky Celá obrazovka 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.

V zozname modulov vyhľadajte modul hlavičky celej obrazovky 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 „záhlavie celej obrazovky“ a potom kliknúť na tlačidlo „Enter“, čím automaticky vyhľadáte a pridáte modul záhlavia celej obrazovky! 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 prípadu použitia: Pridanie hlavičky celej obrazovky na stránku Informácie

V tomto príklade vám ukážem, ako používať modul záhlavia Fullwidth na pridanie záhlavia s vlastným textom a obrázkom na pozadí.

Všetky moduly na celú obrazovku sú k dispozícii iba pri použití sekcií na celú obrazovku. Pomocou programu Visual Builder vložte novú časť na celú obrazovku. Potom do sekcie pridajte modul Osoba.

Aktualizujte nastavenia hlavičky celej obrazovky takto:

Možnosti obsahu

Názov: O nás Text podnadpisu: Robíme veci inak ... URL obrázka na pozadí: [vložte obrázok 1920 x 800] Farba prekrytia Farba: rgba (0,0,0,0.2 , XNUMX)

Možnosti návrhu

Orientácia textu a loga: Stredné tlačidlo Posunúť nadol Tlačidlo: ÁNO Ikona: [vybrať ikonu] Posunúť ikonu nadol Farba: # fcbf00 Ikona posuvu: 50px Farba textu: Svetlá Farba textu: # fcbf00 Písmo Nadpis: Otvorené bez, tučné, veľké písmená Nadpis Veľkosť písma: 60px (desktop), 40px (tablet), 30px (telefón) Titulky Veľkosť písma: 25px

Rozšírené možnosti (vlastné CSS)

Hlavný prvok:
čalúnenie: 100px 0;

A je to!

Možnosti obsahu hlavičky celej obrazovky

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.

Názov

Tu zadajte názov svojej stránky.

Text titulkov

Ak chcete použiť titulky, pridajte ich sem. Váš titulok sa zobrazí pod nadpisom malým písmom.

Tlačidlo # 1 Text

Zadajte text tlačidla.

Tlačidlo # 2 Text

Zadajte text tlačidla.

Obsah

Tu môžete definovať obsah, ktorý sa umiestni pod hlavičku a text nadpisu.

Adresa URL tlačidla 1

Zadajte adresu URL tlačidla.

Adresa URL tlačidla 2

Zadajte adresu URL tlačidla.

Webová adresa obrázka loga

Nahrajte požadovaný obrázok alebo zadajte adresu URL obrázka, ktorý chcete zobraziť.

URL obrázka hlavičky

Nahrajte požadovaný obrázok alebo zadajte adresu URL obrázka, ktorý chcete zobraziť.

Adresa URL obrázka na pozadí

Ak je nastavený, tento obrázok sa použije ako pozadie pre tento modul. Ak chcete odstrániť obrázok na pozadí, stačí odstrániť adresu URL z poľa nastavení. Na pozadí farieb pozadia sa zobrazia obrázky pozadia, čo znamená, že pri použití obrázka pozadia nebude farba pozadia viditeľná.

Farba pozadia

Definujte pre svoj modul vlastnú farbu pozadia alebo nechajte predvolenú farbu prázdnu.

Farba prekrytia pozadia

Vyberte farbu prekrytia pozadia, ktorá bude umiestnená nad obrázkom pozadia. Polopriehľadné prekryvné obrázky môžu pri umiestnení nad obrázky na pozadí vytvárať chladné efekty.

Š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 hlavičky s plnou šírkou

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

Orientácia textu a loga

To riadi, ako je váš text zarovnaný v module.

Vytvorte celú obrazovku

Tu môžete zvoliť, či sa má hlavička rozšíriť na celú obrazovku.

Použite efekt Paralaxy

Ak je táto možnosť povolená, vaše obrázky na pozadí budú mať pevnú pozíciu ako váš zvitok, čo vytvorí zábavný paralaxný efekt.

Paralaxová metóda

Definujte metódu použitú pre efekt paralaxy.

Zobraziť posúvacie tlačidlo dole

Tu si môžete zvoliť, či sa má zobraziť posúvacie tlačidlo nadol.

ikona

Vyberte ikonu, ktorú chcete zobraziť pre tlačidlo posuvu nadol.

Posuňte zobrazenie nadol na ikonu Farba

Ikona rozbaľovacej ponuky predvolene dedí farbu textu nadpisu (bielu alebo sivú). Túto farbu môžete zmeniť úpravou farby v tejto možnosti pomocou výberu farieb.

Posuňte sa nadol Veľkosť ikony

Toto nastavenie použite na zväčšenie alebo zmenšenie veľkosti ikony rolovania nadol, ktorá sa zobrazuje v dolnej časti hlavičky.

Vertikálne zarovnanie obrázka

Toto riadi orientáciu obrazu v module.

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

Vertikálne zarovnanie textu

Toto nastavenie určuje vertikálne zarovnanie vášho obsahu. Váš obsah môže byť vycentrovaný vertikálne alebo zarovnaný dole.

Písmo názvu

Písmo textu nadpisu 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.

Veľkosť písma názvu

Tu môžete upraviť veľkosť textu nadpisu. 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 titulu

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

Rozmiestnenie hlavných písmen

Medzery medzi písmenami ovplyvňujú medzeru medzi jednotlivými písmenami. Ak chcete zväčšiť medzeru medzi jednotlivými písmenami v texte nadpisu, 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 riadku názvu

Výška riadku ovplyvňuje medzeru medzi každým riadkom textu nadpisu. 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.

Písmo obsahu

Písmo textu v obsahu 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.

Veľkosť písma obsahu

Tu môžete upraviť veľkosť textu obsahu. Posunutím posúvača rozsahu môžete zväčšiť alebo zmenšiť veľkosť textu alebo priamo zadať 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 obsahu

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

Rozlišovacie písmená obsahu

Medzery medzi písmenami ovplyvňujú medzeru medzi jednotlivými písmenami. Ak chcete zväčšiť medzeru medzi jednotlivými písmenami v texte obsahu, 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 obsahu

Výška riadku ovplyvňuje medzery medzi jednotlivými riadkami textu obsahu. Ak chcete zväčšiť medzery 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.

Písmo titulkov

Písmo textu titulkov 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.

Veľkosť písma titulkov

Tu môžete upraviť veľkosť textu titulkov. Posunutím posúvača rozsahu môžete zväčšiť alebo zmenšiť veľkosť textu alebo priamo zadať 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 titulkov

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

Rozostup písmen titulkov

Medzery medzi písmenami ovplyvňujú medzeru medzi jednotlivými písmenami. Ak chcete zväčšiť medzeru medzi každým písmenom v texte titulku, 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 titulkov

Výška riadku ovplyvňuje medzeru medzi jednotlivými riadkami textu titulkov. Ak chcete zväčšiť medzeru medzi jednotlivými riadkami, pomocou posúvača rozsahu upravte medzeru alebo zadajte požadovanú veľkosť medzery 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.

Maximálna šírka textu

Toto nastavenie sa používa na zmenšenie maximálnej šírky textu v module hlavičky. Napríklad hodnota 50% zabezpečí, že text nikdy nepresiahne 50% šírky celého modulu hlavičky.

Pre tlačidlo použite vlastné štýly

Povolenie tejto možnosti odhalí rôzne nastavenia prispôsobenia tlačidiel, ktoré môžete použiť na zmenu vzhľadu tlačidla vášho modulu.

Veľkosť textu tlačidla

Toto nastavenie je možné použiť na zväčšenie alebo zmenšenie veľkosti textu v tlačidle. Tlačidlo sa prispôsobuje podľa toho, ako sa zväčšuje a zmenšuje veľkosť textu.

Farba textu tlačidla

V predvolenom nastavení majú tlačidlá farbu zvýraznenia témy, ako je definované v nástroji Customizer Theme. Táto voľba umožňuje priradiť tlačidlu tohto modulu vlastnú farbu textu. Vyberte si svoju vlastnú farbu pomocou výberu farieb a zmeňte farbu tlačidla.

Farba pozadia tlačidla

Štandardne majú tlačidlá priehľadnú farbu pozadia. To je možné zmeniť výberom požadovanej farby pozadia vo výbere farieb.

Tlačidlo Šírka hranice

Všetky tlačidlá Divi majú predvolene okraj 2px. Túto hranicu je možné pomocou tohto nastavenia zväčšiť alebo zmenšiť. Okraje je možné odstrániť zadaním hodnoty 0.

Farba ohraničenia tlačidla

V predvolenom nastavení okraje tlačidiel preberajú farbu zvýraznenia témy, ako je definované v nástroji Customizer Theme. Táto možnosť vám umožňuje priradiť vlastnú farbu orámovania tlačidlu tohto modulu. Vyberte si svoju vlastnú farbu pomocou výberu farieb a zmeňte farbu orámovania tlačidla.

Polomer okraja tlačidla

Polomer orámovania ovplyvňuje zaoblenie rohov vašich tlačidiel. Predvolene majú tlačidlá v aplikácii Divi malý polomer okraja, ktorý zaobľuje rohy o 3 pixely. Túto hodnotu môžete znížiť na 0, ak chcete vytvoriť štvorcové tlačidlo, alebo ho výrazne zvýšiť, ak chcete vytvoriť tlačidlá s kruhovými okrajmi.

Rozostup písmen tlačidiel

Medzery medzi písmenami ovplyvňujú medzeru medzi jednotlivými písmenami. Ak chcete zväčšiť medzeru medzi jednotlivými písmenami v texte tlačidla, 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.

Button Font

Písmo textu vášho tlačidla 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.

Pridajte ikonu tlačidla

Zakázané, toto nastavenie odstráni ikony z vášho tlačidla. V predvolenom nastavení sa na všetkých tlačidlách Divi zobrazuje ikona šípky pri umiestnení kurzora myši.

Ikona tlačidla

Ak sú ikony povolené, môžete pomocou tohto nastavenia zvoliť, ktorá ikona sa bude vo vašom tlačidle používať. Divi má na výber rôzne ikony.

Tlačidlo s farebnou ikonou

Úpravou tohto nastavenia zmeníte farbu ikony, ktorá sa zobrazí na vašom tlačidle. V predvolenom nastavení je farba ikony rovnaká ako farba textu vášho tlačidla, ale toto nastavenie vám umožňuje upraviť farbu nezávisle.

Tlačidlo umiestnenia ikony

Môžete zvoliť zobrazenie ikony tlačidla vľavo alebo vpravo od tlačidla.

Zobraziť ikonu iba pri umiestnení kurzora myši na tlačidlo

Ikony tlačidiel sa predvolene zobrazujú iba pri umiestnení kurzora myši. Ak chcete, aby sa ikona vždy zobrazovala, vypnite toto nastavenie.

Tlačítko Presunúť farbu textu

Keď na tlačidlo umiestnite kurzor myši, použije sa táto farba. Farba sa zmení od základnej farby definovanej v predchádzajúcich nastaveniach.

Farba pozadia tlačidla myši (farba tlačidla myši)

Keď na tlačidlo umiestnite kurzor myši, použije sa táto farba. Farba sa zmení od základnej farby definovanej v predchádzajúcich nastaveniach.

Tlačidlo presunutie hranice farby (hover border color)

Keď na tlačidlo umiestnite kurzor myši, použije sa táto farba. Farba sa zmení od základnej farby definovanej v predchádzajúcich nastaveniach.

Presuňte kurzor na políčko

Keď na tlačidlo umiestnite kurzor myši, použije sa táto hodnota. Hodnota sa zmení od základnej hodnoty definovanej v predchádzajúcich nastaveniach.

Tlačidlo na oddelenie poznámok

Keď na tlačidlo umiestnite kurzor myši, použije sa táto hodnota. Hodnota sa zmení od základnej hodnoty definovanej v predchádzajúcich nastaveniach.

Pokročilé možnosti hlavičky celej šírky

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.

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]

Ď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