Přejít k hlavnímu obsahu

Divi tutorial: Jak používat modul nabídky celé obrazovky

Divi: nejjednodušší téma WordPress k použití

Divi: Nejlepší WordPress téma všech dob!

více Stahování 901.000, Divi je nejoblíbenější téma WordPress na světě. Je kompletní, snadno použitelný a je dodáván s více než šablonami 62 zdarma. [Doporučeno]

Modul Menu na celou obrazovku v Divi usnadňuje přidávání krásných barevných záhlaví do horní části vašich stránek (nebo kamkoli na váš web, chcete-li). Tyto moduly lze umístit pouze do sekcí s plnou šířkou.

hlavičkový modul s celkovou šířkou divi.png

Jak přidat modul Divi Full Screen Menu

Než budete moci na stránku přidat modul Menu na celou obrazovku, musíte nejprve skočit do Divi Builderu. Jakmile si téma Divi nainstalujete na svůj web, uvidíte tlačítko 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 při procházení webu v popředí, pokud jste připojeni k hlavnímu panelu WordPress.

použijte divi builder

Jakmile zadáte Visual Builder, můžete kliknutím na šedé tlačítko plus přidat nový modul na svou stránku. Nové moduly nabídky Celá obrazovka lze přidat pouze do sekcí s plnou šířkou. Pokud spouštíte novou stránku, nezapomeňte nejprve přidat na stránku sekci s plnou šířkou.

plná nabídka divi.png

Vyhledejte modul záhlaví celé obrazovky v seznamu modulů a kliknutím na něj jej přidejte na svou stránku. Seznam modulů je prohledávatelný, což znamená, že můžete také napsat slovo „záhlaví celé obrazovky“ a poté kliknout na „Enter“, abyste automaticky našli a přidali modul záhlaví celé obrazovky! 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í: Přidání záhlaví celé obrazovky na stránku About

V tomto příkladu vám ukážu, jak použít modul záhlaví Fullwidth k přidání záhlaví s vlastním textem a obrázkem na pozadí.

Všechny moduly na celou obrazovku jsou k dispozici pouze při použití sekcí na celou obrazovku. Pomocí nástroje Visual Builder vložte novou sekci na celou obrazovku. Poté do sekce přidejte modul Osoba.

Aktualizujte nastavení záhlaví celé obrazovky následujícím způsobem:

Možnosti obsahu

Název: O nás Text podnadpisu: Děláme věci jinak ... URL obrázku na pozadí: [vložte obrázek 1920 x 800] Pozadí překrytí Barva: rgba (0,0,0,0.2 XNUMX)

Možnosti návrhu

Orientace textu a loga: Střední tlačítko Posunout dolů Tlačítko: ANO Ikona: [vybrat ikonu] Posunout ikonu dolů Barva: # fcbf00 Ikona posouvání: 50px Barva textu: Světlá Barva textu: # fcbf00 Písmo Nadpis: Otevřít bez, tučně, velká písmena Nadpis Velikost písma: 60px (desktop), 40px (tablet), 30px (telefon) Titulky Velikost písma: 25px

Pokročilé možnosti (vlastní CSS)

Hlavní prvek:
čalounění: 100px 0;

sekci obsah divi modul full screen.png

A je to!

příklad záhlaví divi.jpg

Možnosti obsahu záhlaví celé obrazovky

Na kartě obsah najdete všechny prvky obsahu modulu, například text, obrázky a ikony. Vše, co ovládá co ve vašem modulu se vždy najde na této kartě.

sekci obsahu divi.png

Titul

Zde zadejte název své stránky.

Text titulků

Pokud chcete použít titulky, přidejte je sem. Titulek se zobrazí pod nadpisem malým písmem.

Tlačítko # 1 Text

Zadejte text tlačítka.

Tlačítko # 2 Text

Zadejte text tlačítka.

Obsah

Zde můžete definovat obsah, který bude umístěn pod záhlaví a text nadpisu.

Tlačítko URL 1

Zadejte adresu URL tlačítka.

Tlačítko URL 2

Zadejte adresu URL tlačítka.

Adresa URL obrázku loga

Nahrajte požadovaný obrázek nebo zadejte adresu URL obrázku, který chcete zobrazit.

URL obrázku záhlaví

Nahrajte požadovaný obrázek nebo zadejte adresu URL obrázku, který chcete zobrazit.

Adresa URL obrázku na pozadí

Pokud je nastaven, bude tento obrázek použit jako pozadí pro tento modul. Chcete-li odebrat obrázek na pozadí, jednoduše odeberte adresu URL z pole nastavení. Obrázky pozadí se objeví nad barvami pozadí, což znamená, že při použití obrázku pozadí nebude barva pozadí viditelná.

Barva pozadí

Definujte vlastní barvu pozadí pro svůj modul nebo ponechte prázdné, chcete-li použít výchozí barvu.

Vytvořte si snadno svůj web pomocí Elementoru

Elementor vám umožní snadno vytvořit jakýkoli design webových stránek s profesionálním vzhledem. Přestaňte platit drahé za to, co můžete udělat sami. [Zdarma]

Barva překryvného pozadí

Vyberte barvu překrytí pozadí, která bude umístěna nad obrázkem pozadí. Poloprůhledné překryvné obrázky mohou při umístění na obrázky na pozadí vytvářet skvělé efekty.

Štítek správy

Tím se změní štítek modulu v konstruktoru pro snadnou identifikaci. Když použijete pohled WireFrame ve Visual Builderu, tyto popisky se zobrazí v bloku modulu rozhraní Divi Builder.

Možnosti návrhu záhlaví s plnou šířkou

Na kartě Návrh najdete všechny možnosti stylingu modulu, například písma, barvy, velikost a mezery. Toto je karta, kterou použijete ke změně vzhledu vašeho modulu. Každý modul Divi má dlouhý seznam nastavení designu, pomocí kterého můžete cokoli změnit.

modul konstrukce profilu celá šířka divi.png

Orientace textu a loga

To řídí, jak je váš text v modulu zarovnán.

Vytvořte celou obrazovku

Zde můžete zvolit, zda se záhlaví rozbalí na celou obrazovku.

Použijte efekt Paralaxy

Pokud je povoleno, vaše obrázky na pozadí budou mít pevnou pozici, jako je váš svitek, což vytvoří zábavný paralaxový efekt.

Paralaxa

Definujte metodu použitou pro paralaxový efekt.

Zobrazit tlačítko dolů

Zde si můžete vybrat, zda se má zobrazit tlačítko posouvání dolů.

ikona

Vyberte ikonu, kterou chcete zobrazit pro tlačítko posuvu dolů.

Přejděte dolů Barevná ikona

Ve výchozím nastavení ikona rozevíracího seznamu zdědí barvu textu záhlaví (bílou nebo šedou). Tuto barvu můžete změnit úpravou barvy v této možnosti pomocí nástroje pro výběr barvy.

Přejděte dolů Velikost ikony

Toto nastavení použijte ke zvětšení nebo zmenšení velikosti ikony posouvání dolů, která se zobrazuje v dolní části záhlaví.

zarovnání modulu divi celé šířky v hlavě.png

Svislé zarovnání obrazu

Tím se řídí orientace obrazu v modulu.

Barva textu

Zde si můžete vybrat hodnotu svého textu. Pokud pracujete na tmavém pozadí, měl by být váš text zapnutý. Pokud pracujete na světlém pozadí, měl by být váš text tmavý.

Vertikální zarovnání textu

Toto nastavení určuje svislé zarovnání obsahu. Váš obsah lze vycentrovat svisle nebo zarovnat dole.

Font písma

Písmo textu nadpisu můžete změnit výběrem požadovaného písma z rozevírací nabídky. Divi přichází s desítkami skvělých písem využívajících písma Google. Ve výchozím nastavení používá Divi písmo Open Sans pro veškerý text na vaší stránce. Styl textu můžete také přizpůsobit pomocí možností tučně, kurzíva, velká písmena a podtržení.

Velikost písma titulku

Zde můžete upravit velikost textu nadpisu. Tažením posuvníku rozsahu můžete zvětšit nebo zmenšit velikost textu nebo přímo zadat požadovanou hodnotu velikosti textu do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Barva textu titulku

Ve výchozím nastavení se všechny barvy textu v souboru Divi zobrazují v bílé nebo tmavě šedé barvě. Pokud chcete změnit barvu textu nadpisu, vyberte pomocí této možnosti požadovanou barvu ve výběru barev.

Rozestup hlavních písmen

Mezery mezi písmeny ovlivňují mezeru mezi jednotlivými písmeny. Chcete-li zvětšit mezeru mezi každým písmenem v textu nadpisu, upravte mezeru pomocí posuvníku rozsahu nebo zadejte požadovanou velikost mezery do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

návrhový modul pro titulní sekci v hlavním panelu divi.png

Výška řádku názvu

Výška řádku ovlivňuje mezeru mezi každým řádkem textu nadpisu. Chcete-li zvětšit mezeru mezi každým řádkem, upravte mezeru pomocí posuvníku rozsahu nebo do vstupního pole zadejte požadovanou velikost mezery. umístěný napravo od kurzoru. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Písmo obsahu

Písmo textu v obsahu můžete změnit výběrem požadovaného písma z rozevírací nabídky. Divi přichází s desítkami skvělých písem využívajících písma Google. Ve výchozím nastavení používá Divi písmo Open Sans pro veškerý text na vaší stránce. Styl textu můžete také upravit pomocí možností tučně, kurzíva, velká a velká písmena a podtržení.

Hledáte ty nejlepší témata a pluginy aplikace WordPress?

Stáhněte si ty nejlepší pluginy a témata aplikace WordPress na Envato a snadno si vytvořte své webové stránky. Již více než stahování 49.720.000. [EXCLUSIVE]

Velikost písma obsahu

Zde můžete upravit velikost textu obsahu. Tažením posuvníku rozsahu můžete zvětšit nebo zmenšit velikost textu nebo přímo zadat požadovanou hodnotu velikosti textu do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Barva textu obsahu

Ve výchozím nastavení se všechny barvy textu v souboru Divi zobrazují v bílé nebo tmavě šedé barvě. Pokud chcete změnit barvu textu obsahu, vyberte pomocí této možnosti požadovanou barvu ve výběru barev.

Rozdělení písmen obsahu

Mezery mezi písmeny ovlivňují mezeru mezi jednotlivými písmeny. Chcete-li zvětšit mezeru mezi každým písmenem v textu obsahu, upravte mezeru pomocí posuvníku rozsahu nebo zadejte požadovanou velikost mezery do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Výška řádku obsahu

Výška řádku ovlivňuje mezeru mezi každým řádkem textu obsahu Pokud chcete zvětšit mezeru mezi jednotlivými řádky, upravte mezeru pomocí posuvníku rozsahu nebo do vstupního pole zadejte požadovanou velikost mezery. umístěný napravo od kurzoru. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Písmo titulků

Písmo textu titulků můžete změnit výběrem požadovaného písma z rozevírací nabídky. Divi přichází s desítkami skvělých písem využívajících písma Google. Ve výchozím nastavení používá Divi písmo Open Sans pro veškerý text na vaší stránce. Styl textu můžete také upravit pomocí možností tučně, kurzíva, velká a velká písmena a podtržení.

Velikost písma titulků

Zde můžete upravit velikost textu titulků. Tažením posuvníku rozsahu můžete zvětšit nebo zmenšit velikost textu nebo přímo zadat požadovanou hodnotu velikosti textu do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Barva textu titulků

Ve výchozím nastavení se všechny barvy textu v souboru Divi zobrazují v bílé nebo tmavě šedé barvě. Pokud chcete změnit barvu textu titulků, vyberte pomocí této možnosti požadovanou barvu ve výběru barev.

Rozteč písmen titulků

Mezery mezi písmeny ovlivňují mezeru mezi jednotlivými písmeny. Chcete-li zvětšit mezeru mezi každým písmenem v textu titulku, upravte mezeru pomocí posuvníku rozsahu nebo zadejte požadovanou velikost mezery do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Výška řádku titulků

Výška řádku ovlivňuje mezeru mezi každým řádkem textu titulku. Chcete-li zvětšit mezeru mezi jednotlivými řádky, upravte mezeru pomocí posuvníku rozsahu nebo zadejte požadovanou velikost mezery do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Maximální šířka textu

Toto nastavení použijte ke snížení maximální šířky textu v modulu záhlaví. Například hodnota 50% zajistí, že text nikdy nepřesáhne 50% šířky celkového modulu záhlaví.

sekce design modul divi hlava full width.png

Pro tlačítko použijte vlastní styly

Povolení této možnosti odhalí různá nastavení přizpůsobení tlačítek, která můžete použít ke změně vzhledu tlačítka vašeho modulu.

Velikost textu tlačítka

Toto nastavení lze použít ke zvětšení nebo zmenšení velikosti textu v tlačítku. Tlačítko se přizpůsobuje, jak se zvětšuje a zmenšuje velikost textu.

Barva textu tlačítka

Ve výchozím nastavení přijímají tlačítka barvu zvýraznění motivu, jak je definována v nástroji Customizer Theme. Tato možnost umožňuje přiřadit vlastní barvu textu tlačítku tohoto modulu. Vyberte svou vlastní barvu pomocí nástroje pro výběr barvy a změňte barvu tlačítka.

Barva pozadí tlačítka

Ve výchozím nastavení mají tlačítka průhlednou barvu pozadí. To lze změnit výběrem požadované barvy pozadí z výběru barev.

Tlačítko Šířka hranice

Všechna tlačítka Divi mají ve výchozím nastavení ohraničení 2px. Toto ohraničení lze pomocí tohoto nastavení zvýšit nebo snížit. Okraje lze odstranit zadáním hodnoty 0.

Barva ohraničení tlačítek

Ve výchozím nastavení okraje tlačítek převezmou akcentní barvu motivu, jak je definována v nástroji Customizer Theme. Tato možnost umožňuje přiřadit vlastní barvu ohraničení tlačítku tohoto modulu. Vyberte svou vlastní barvu pomocí nástroje pro výběr barvy a změňte barvu ohraničení tlačítka.

Okraj okraje tlačítka

Poloměr ohraničení ovlivňuje zaoblení rohů vašich tlačítek. Ve výchozím nastavení mají tlačítka v Divi malý poloměr ohraničení, který zaobluje rohy o 3 pixely. Tuto hodnotu můžete snížit na 0, abyste vytvořili čtvercové tlačítko, nebo ji výrazně zvýšit, abyste vytvořili tlačítka s kruhovými okraji.

Rozestup tlačítek

Mezery mezi písmeny ovlivňují mezeru mezi jednotlivými písmeny. Chcete-li zvětšit mezeru mezi každým písmenem v textu tlačítka, upravte mezeru pomocí posuvníku rozsahu nebo zadejte požadovanou velikost mezery do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ v závislosti na hodnotě velikosti a změnit typ jednotky.

Button Font

Písmo textu tlačítka můžete změnit výběrem požadovaného písma z rozevírací nabídky. Divi přichází s desítkami skvělých písem využívajících písma Google. Ve výchozím nastavení používá Divi písmo Open Sans pro veškerý text na vaší stránce. Styl textu můžete také přizpůsobit pomocí možností tučně, kurzíva, velká a velká písmena a podtržení.

Přidejte ikonu tlačítka

Zakázáno, toto nastavení odstraní ikony z vašeho tlačítka. Ve výchozím nastavení všechna tlačítka Divi zobrazují na ukazateli ikonu šipky.

Ikona tlačítka

Pokud jsou ikony povoleny, můžete pomocí tohoto nastavení vybrat, která ikona se ve vašem tlačítku použije. Divi má na výběr různé ikony.

Tlačítko barevné ikony

Úpravou tohoto nastavení změníte barvu ikony, která se zobrazí na vašem tlačítku. Ve výchozím nastavení je barva ikony stejná jako barva textu tlačítka, ale toto nastavení vám umožňuje upravit barvu nezávisle.

Tlačítko pro umístění ikony

Můžete zvolit zobrazení ikony tlačítka vlevo nebo vpravo od tlačítka.

Zobrazit pouze ikonu při najetí myší na tlačítko

Ve výchozím nastavení se ikony tlačítek zobrazují pouze při najetí myší. Pokud chcete, aby se ikona vždy zobrazovala, vypněte toto nastavení.

Tlačítko Barva textu na ukazatel myši

Když na tlačítko najedete myší návštěvníka, použije se tato barva. Barva se změní od základní barvy definované v předchozím nastavení.

Hover barva pozadí tlačítka (hover button color)

Když na tlačítko najedete myší návštěvníka, použije se tato barva. Barva se změní od základní barvy definované v předchozím nastavení.

Tlačítko Hover Border Border (barva hranice myši)

Když na tlačítko najedete myší návštěvníka, použije se tato barva. Barva se změní od základní barvy definované v předchozím nastavení.

Tlačítko Hover Border Radius

Když na tlačítko najedete myší návštěvníka, použije se tato hodnota. Hodnota se změní od základní hodnoty definované v předchozím nastavení.

Tlačítko pro oddálení poznámek

Když na tlačítko najedete myší návštěvníka, použije se tato hodnota. Hodnota se změní od základní hodnoty definované v předchozím nastavení.

Pokročilé možnosti záhlaví celé šířky

Na kartě Upřesnit najdete možnosti, které by zkušenější weboví designéři mohli považovat za užitečné, například vlastní atributy CSS a HTML. Zde můžete použít vlastní CSS na kterýkoli z mnoha prvků modulu. Na modul můžete také použít vlastní třídy a ID CSS, které lze použít k přizpůsobení modulu v souboru style.css vašeho podřízeného motivu.

hlavička modulu divi section advance.png

CSS ID

Zadejte volitelné ID CSS, které chcete použít pro tento modul. ID lze použít k vytvoření vlastního stylu CSS nebo k propojení s konkrétními částmi vaší stránky.

CSS třídy

Zadejte volitelné třídy CSS pro tento modul. Třídu CSS lze použít k vytvoření vlastního stylu CSS. Můžete přidat více tříd oddělených mezerou. Tyto třídy lze použít ve vašem podřízeném motivu Divi nebo ve vlastní šabloně stylů CSS, kterou přidáte na svou stránku nebo na svůj web pomocí možností motivu Divi nebo nastavení na stránce Divi Builder.

Vlastní CSS

Vlastní CSS lze také použít na modul a na libovolné interní součásti modulu. V sekci Vlastní CSS najdete textové pole, kde můžete přidat vlastní šablony stylů CSS přímo ke každému prvku. Položky CSS v tomto nastavení jsou již zabaleny do značek stylů. Stačí tedy zadat pravidla CSS oddělená středníky.

viditelnost

Tato možnost umožňuje ovládat zařízení, na kterých se váš modul zobrazuje. Můžete se rozhodnout deaktivovat svůj modul na tabletech, chytrých telefonech nebo stolních počítačích jednotlivě. To je užitečné, pokud chcete použít různé mody na různých zařízeních, nebo pokud chcete zjednodušit mobilní design odstraněním určitých prvků ze stránky.

Ostatní výukové programy Divi

Tento článek obsahuje komentáře 2

Zanechat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinné položky jsou označeny *

Tato stránka používá společnost Akismet ke snížení nežádoucích účinků. Přečtěte si další informace o tom, jak se používají vaše komentáře.

Zpět na začátek