Divi: Jak používat modul Fullwidth Header k vytvoření sekce Hero

Chcete vytvořit sekci Hero Divi s modulem Fullwidth Header nebo si ji sami navrhnout?

Vytvořte sekci hrdiny Webové stránky od začátku nebo pomocí modulu Divi Fullwidth Header jsou dva způsoby, jak vytvořit poutavý design pro váš webové stránky. 

V tomto článku se podíváme na výhody a nevýhody používání modulu Fullwidth Header oproti vytváření vlastní sekce Hero s Divi.

Pojďme!

Význam sekcí hrdinů webu

Sekce Hrdina je úplně první sekcí, kterou máte Návštěvníci uvidíte, kdy dorazí k vám Webové stránky. Často se jedná o banner s plnou šířkou a může se také nazývat Hero Header. Je to prominentní místo na vašem webu, protože má schopnost zanechat trvalý první dojem.

Čtěte také: Divi: Jak zobrazit modul Fullwidth Header na celou obrazovku

Je proto důležité, aby byl koncipován tak, aby byl dobře čitelný a zároveň poutavý a přesvědčivý. Sekce hrdinů na webu jsou důležité, protože mohou upoutat pozornost potenciálních zákazníků, rychle nastínit stránku a vést k dalšímu zapojení a potenciálním potenciálním zákazníkům. Sekce hrdinů by měly být značkové, obsahovat titul H1 a CTA.

Vytvořte sekci Hrdina od začátku

Navrhování sekce Hrdina od začátku vám umožní mít úplnou kontrolu nad designem a obsah. V závislosti na vaší situaci a potřebách to může být skvělé řešení pro váš web. 

Pojďme se podívat na výhody a nevýhody tohoto přístupu.

Výhody tohoto přístupu

Nejprve se podívejme na výhody vytvoření sekce Hero webu od nuly pomocí Divi.

• Plná kontrola designu
• Použijte jakýkoli modul Divi

Nevýhody tohoto přístupu

Nyní se podívejme na nevýhody vytvoření sekce hrdiny od začátku.

• Musíte stavět od nuly
• Vyžaduje více modů

Vytvořte sekci Hrdina pomocí modulu Divi Fullwidth Header

Vytvoření sekce hrdiny pomocí modulu Divi Fullwidth Header usnadňuje vytvoření poutavého, mobilního responzivního designu během několika minut. 

Pojďme se podívat na výhody a nevýhody tohoto přístupu.

Výhody tohoto přístupu

Pojďme se podívat na výhody budování sekce Hero s modulem Divi Fullwidth Header.

• Všechny vaše obsah je v jediném modulu
• Design je již optimalizován

Nevýhody tohoto přístupu

Nyní zhodnotíme nevýhody návrhu sekce Hero s modulem Divi Fullwidth Header.

• Menší flexibilita s designem

Modul Divi Fullwidth Header je dodáván s možnostmi pro obsah předdefinované, zatímco mnohé lze omezit, pokud chcete přidat část obsahu, která není v modulu k dispozici. To znamená, že budete mít menší flexibilitu s celkovým designem.

Stavba dvou sekcí Hero krok za krokem

Nyní, když rozumíte výhodám a nevýhodám obou přístupů, pojďme sestavit jednotlivé části hrdiny, abyste přesně viděli, jak každý přístup funguje.

Vytvořte novou stránku pomocí Divi Builder

Chcete-li začít, budete muset provést následující:

1. Nainstalujte Divi  na vašem webu WordPress.
2. Přidejte stránku a pojmenujte ji.
3. Povolit vizuální tvůrce

Vytvořte si sekci Hrdina od začátku

Nyní, když je naše stránka nastavena, začněme vytvářet sekci hrdiny od začátku.

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

Aktivujte "Divi Builder"

Abychom mohli používat Divi's drag and drop builder, budeme muset aktivovat Visual Builder kliknutím na tlačítko „Použít DiviBuilder“. Tím se stránka znovu načte pomocí Divi Visual Builderu.

Vyberte: Sestavit od začátku

Nyní, když se vaše stránka znovu načetla s povoleným vizuálním tvůrcem, klikněte na možnosti „ STAVIT OD SKLÁTKY abychom měli při návrhu prázdnou stránku, se kterou můžeme pracovat.

Přidejte řádek a nakonfigurujte sloupce

Vytvořte řádek s následující strukturou sloupců.

Přidejte mody

Nyní přidáme obsahové moduly, které budeme potřebovat.

• 2 Textové moduly, oddělovač, tlačítko v levém sloupci
• 1 Obrazový modul ve středním sloupci
• 1 Image Module v pravém sloupci

Stylová sekce

Nyní nakonfigurujeme nastavení sekce.

Přidejte sekci a poté nakonfigurujte následující nastavení:

• Pozadí: #1d1d25

Styl textu záhlaví

Přizpůsobit text záhlaví:

• Nadpis 1:
  • Tloušťka písma: Polotučné
  • Barva textu: #ffffff
  • Velikost textu: 90px
  • Výška řádku: 1,1 em

oddělovač

Nakonfigurujte nastavení rozdělovače:

• Barva čáry: rgba (255,255,255,0.3)
• Hmotnost oddělovače: 10px
• Maximální šířka: 260 pixelů

hlavní text

Přizpůsobit text těla:

• Barva textu: rgba (255,255,255,0.7)
• Velikost textu: 13px
• Výška řádku: 1,8 em

knoflík

Nyní přizpůsobíme tlačítko.

Na kartě Tlačítko:

• Použít vlastní styly pro tlačítko: Ano
• Velikost textu tlačítka: 14px
• Barva textu: #ffffff
• Pozadí tlačítka:
• Šířka okraje: 0 pixelů
• Poloměr okraje: 0 pixelů

Na kartě Mezery:

• Nahoře a dole: 40 pixelů
• Vlevo a vpravo: 20px

Přidejte obrázky

Přidejte obrázky do obrazových modulů.

Upravte nastavení linky

Parametry řádku:

• Okraj (vlevo): 15vw

Upravte 2. sloupec

Ve druhém sloupci nakonfigurujte tato nastavení:

Vlastní CSS

Vložte následující kód do části kódu hlavního prvku:

argin-right: -15vw!important;
z-index: 100!important;

vzdálenost

Přidejte 100 pixelů horní výplně.

Je to tady ! Nyní máte plně navrženou vlastní sekci Hrdina.

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

Vytvořte si sekci Hrdina pomocí modulu Divi's Fullwidth Header

Nyní se podívejme, jak znovu vytvořit tuto sekci Hero pomocí modulu Divi Fullwidth Header.

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

Přidejte stránku a vyberte možnost Build From Scratch

Přidejte novou stránku, pojmenujte ji, klikněte na „Použít Divi Builder“ a poté vyberte Vytvořit od nuly.

Vložte sekci s plnou šířkou a záhlaví s plnou šířkou

Vložte sekci Plná šířka, poté vyberte Záhlaví plné šířky v knihovně modulů.

Obsah

Přidejte textový obsah do modulu na kartě Text.

snímky

Přidejte obrázky na kartu Obrázek.

Změňte barvu pozadí

Na kartě pozadí nakonfigurujte následující nastavení:

• Pozadí: #1D1D25

Text záhlaví

Konfigurace nastavení textu záhlaví:

• Tloušťka písma názvu: Tučné
• Velikost textu: 90px

hlavní text

Konfigurace nastavení textu těla:

• Barva textu těla: rgba (255,255,255,0.55)

Text titulků

Nakonfigurujte nastavení textu titulků:

• Tloušťka písma titulků: Tučné
• Barva textu: #4C594C
• Mezera mezi písmeny: 3px

tlačítka

Nyní si přizpůsobíme dvě tlačítka.

tlačítko jedna

Na kartě Button One nakonfigurujte následující nastavení:

• Použít vlastní styly pro tlačítko XNUMX: Ano
• Tlačítko jedna
  • Pozadí: #4c594c
  • Šířka okraje: 0 pixelů
  • Poloměr ohraničení: 0px
  • Zobrazit ikonu: ANO
  • Zobrazit pouze ikonu při umístění kurzoru: Ne
  • Výplň: 25 pixelů (nahoře a dole); 25 pixelů (vlevo), 50 pixelů (vpravo)

Tlačítko dvě

Na kartě Tlačítko XNUMX nakonfigurujte následující nastavení:

• Použít vlastní styly pro tlačítko XNUMX: ANO
• Tlačítko Šířka dvou okrajů: 0 pixelů
• Poloměr ohraničení: 0px
• Výplň: 25 pixelů (nahoře, dole, vlevo a vpravo)
• Button Box Shadow: Vyberte 4
• Horizontální poloha stínu rámečku: 0px
• Vertikální poloha stínu rámečku: 2px
• Barva stínu: #ffffff

Je to tady ! Nyní máte plně navrženou sekci Hero pomocí modulu Divi Fullwidth Header.

Viz také: Divi: Jak vytvořit přechody na pozadí mezi prvky

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

Proč investovat do čističky vzduchu?

Sestavení sekce Hrdina s Divi je snadné, ať už stavíte od nuly nebo používáte modul Fullwidth Header. Obě možnosti vám umožňují vytvářet úžasné návrhy záhlaví, které zaujmou vás Návštěvníci. 

V závislosti na vašich jedinečných potřebách je každá z těchto možností skvělou možností, kterou je třeba zvážit při stylování sekce Hrdina. 

Po přečtení výhod a nevýhod obou, jak byste navrhli svou sekci Hrdina?

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 projektů vytváření internetových stránek.

Neváhejte se také podívat na našeho průvodce na 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.

...