Chcete zobrazit modul Divi Fullwidth Header na celé obrazovce?
Záhlaví na celou obrazovku zabírají celou obrazovku bez ohledu na velikost obrazovky návštěvník. To je skvělé pro upoutání pozornosti uživatelů. Naštěstí je snadné vytvořit celoobrazovkovou hlavičku pomocí modulu Záhlaví plné šířky z Divi.
V tomto článku vám ukážeme, jak vytvořit záhlaví s plnou šířkou, přizpůsobit jej a zobrazit na celé obrazovce. Tento přístup můžete použít k vytvoření libovolné sekce hrdiny na celé obrazovce pro vaše stránky.
Začněme.
přehled
Podívejme se na náhled toho, co budeme navrhovat v tomto tutoriálu.
Kancelář
tableta
telefon
Jak udělat ze záhlaví Divi Fullwidth záhlaví na celou obrazovku
Začněte tím, že na stránku, na které pracujete, přidáte sekci v plné šířce.
Poté přidejte a Modul záhlaví s plnou šířkou do sekce v plné šířce.
Otevře se nastavení modulu. Vyberte kartu Design. Aktivujte volanou možnost Vytvořit celou obrazovku
Nyní máme záhlaví na celou obrazovku. Je to tak jednoduché.
Povolit ikonu posouvání
Můžeme také přidat tlačítko, které uživateli řekne, aby se posunul dolů. Musíme to však povolit. Toto tlačítko je vždy viditelné v režimu celé obrazovky. Možnost záhlaví na celou obrazovku vždy odpovídá výšce obrazovky návštěvník.
- Zobrazit tlačítko pro posun dolů: ANO
Příklad záhlaví Divi Fullwidth na celou obrazovku
Parametry modulu záhlaví s plnou šířkou
Zde jsou kroky pro každou sekci nastavení modulu Fullwidth Header.
Čtěte také: Divi: Jak kombinovat masky pozadí a oddělovače
Texty
Vše nejprve přidejte text který bude viditelný v záhlaví plné šířky. To zahrnuje název, podnadpis, obsah a text tlačítka.
- Název: Vytvořit váš blog s Divi
- Podtitul: Blogpascher
- Burron #1: Shrnutí
- Tlačítko č. 2: Plán
- Tělo: (výchozí)
snímky
pak přidat obrázek. To se zobrazí na pravé straně záhlaví v plné šířce a posune text doleva.
- Obrázek záhlaví: vaše volba
pozadí
Přejděte na Pozadí a nastavte barvu na #f6f5ee.
- Barva pozadí: #f6f5ee
Dispozice
Dále přejděte na kartu Návrh.
- Přepnout na celou obrazovku: ANO
Posuňte ikonu dolů
- Zobrazit tlačítko pro posun dolů: ANO
- Barva ikony rolování dolů: #000000 (stolní počítač a tablet), #ffffff (telefon)
- Velikost ikony posunutí dolů: 70 pixelů (počítač), 60 pixelů (tablet), 50 pixelů (telefon)
Název textu
Dále upravíme text nadpisu.
- Úroveň nadpisu: H1
- Písmo: Inter
- Tloušťka písma: Tučné
- Zarovnání textu: Střed
- Barva textu: #000000
- Velikost textu nadpisu: 75 pixelů (počítač), 40 pixelů (tablet), 24 pixelů (telefon)
- Výška řádku nadpisu: 1.2 em
Popisný text
Poté přejděte dolů na Hlavní text.
- Písmo: Open Sans
- Zarovnání: doleva
- Barva: #000000
- Velikost textu: 16 pixelů (počítač), 15 pixelů (tablet), 14 pixelů (telefon)
- Výška řádku: 1.8 m
podtitul
Poté přejděte dolů na Text titulků.
- Písmo: Inter
- Tloušťka písma: Tučné
- Styl: TT
- Zarovnání: Střed
- Barva: #ff5a17
- Velikost: 14px
- Mezera mezi písmeny: 1px
- Výška řádku: 1.8 m
Tlačítko #1
Poté přejděte dolů na Tlačítko jedna.
- Použít vlastní styly pro tlačítko: ANO
- Velikost textu: 20 pixelů (počítač), 18 pixelů (tablet), 16 pixelů (telefon)
- Barva textu: #000000
- Barva pozadí: #ffffff
- Šířka okraje: 0px
- Poloměr ohraničení: 0px
- Písmo: Inter
- Tloušťka písma: Tučné
- Ikona: vaše volba
- Barva ikony: #000000
- Umístění: Vpravo
- Zobrazit ikonu pouze při umístění kurzoru na tlačítko XNUMX: NE
Nakonec přejděte dolů na možnosti Tlačítko One Polstrování.
- Výplň:
- Počítač: 20 pixelů (nahoře a dole), 40 pixelů (vlevo a vpravo)
- Tablet: 16px (nahoře a dole), 40px (levý a pravý)
- Telefon: 12px (nahoře a dole), 40px (levý a pravý)
Tlačítko #2
Nakonec přejděte dolů na Tlačítko dvě.
- Použít vlastní styly pro tlačítko XNUMX: Ano
- Velikost textu: 20 pixelů (počítač), 18 pixelů (tablet), 16 pixelů (telefon)
- Barva textu: #ffffff
- Barva pozadí: #ff5a17
- Šířka okraje: 0px
- Poloměr ohraničení: 0px
- Písmo: Inter
- Tloušťka písma: Tučné
Vyberte si svou oblíbenou ikonu.
- Ikona: vaše volba
- Barva ikony: #000000
- Umístění: vlevo
- Zobrazit ikonu při umístění kurzoru pouze u tlačítka XNUMX: NE
Nakonec přejděte dolů k možnostem Tlačítko dvě polstrování.
- Výplň:
- Počítač: 20 pixelů (nahoře a dole), 40 pixelů (vlevo a vpravo)
- Tablet: 16px (nahoře a dole), 40px (levý a pravý)
- Telefon: 12px (nahoře a dole), 40px (levý a pravý)
Konečné výsledky
Takto vypadá naše záhlaví v plné šířce na počítačích, tabletech a telefonech.
Můžete se také poradit: Divi: Jak používat efekty stínu a vznášet se k vytváření interaktivního obsahu
Kancelář
tableta
telefon
Stáhněte si DIVI hned teď!!!
Proč investovat do čističky vzduchu?
Zde je náš pohled na to, jak vytvořit záhlaví s plnou šířkou pomocí modulu Divi Fullwidth záhlaví.
Proces je jednoduchý a vypadá skvěle na jakémkoli zařízení. Přidání tlačítka Posunout dolů je skvělý vizuál, který uživatelům říká, že mohou rolovat.
Návrh záhlaví na celou obrazovku je podobný návrhu sekce Hrdina. Dodržování několika jednoduchých pokynů vám může pomoci vytvořit úžasné celoobrazovkové záhlaví s modulem Divi Fullwidth Header.
Doufáme, že vás tento tutoriál inspiruje pro vaše další Divi projekty. Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.
Můžete se také poradit naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Mezitím sdílejte tento článek na různých sociálních sítích.
...
