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.

Chcete zobrazit modul Fullwidth Header z divi celá obrazovka ?

Záhlaví na celou obrazovku zabírají celou obrazovku bez ohledu na velikost obrazovky návštěvníka. To je skvělé pro upoutání pozornosti uživatelů. Naštěstí je snadné pomocí modulu vytvořit záhlaví na celou obrazovku Záhlaví plné šířky de 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

Celoobrazovkový modul Divi Fullwidth Header

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íka.

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

Elementor vám umožní tvořit Snadno a zdarma jakýkoli design webových stránek nebo blogu s profesionálním vzhledem. Přestaňte platit hodně za web, který si můžete udělat sami.

  • 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řte si svůj 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

Chcete prodávat své produkty na internetu?

Stáhněte si zdarma WooCommerce, nejlepší pluginy pro e-commerce pro prodej vašich fyzických a digitálních produktů na WordPress a snadné vytvoření vašeho online obchodu. Ideální pro začátečníky.

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ář

Celoobrazovkový modul Divi Fullwidth Header

tableta

Celoobrazovkový modul Divi Fullwidth Header

telefon

Celoobrazovkový modul Divi Fullwidth Header

Stáhněte si DIVI hned teď!!!

závěr

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.

...

%d blogerům se líbí tato stránka: