Divi: Jak vyvážit primární a sekundární tlačítka modulu Fullwidth Header

Chtěli byste přizpůsobit modul Divi Fullwidth Header vyvážením primárního a sekundárního tlačítka?

Modul divi Záhlaví plné šířky usnadňuje přidávání krásných sekcí hrdinů do vašich Webové stránky. Modul je dodáván se dvěma tlačítky, textem nadpisu, textem titulků, hlavním textem, logem a obrázkem, díky čemuž jsou možnosti přizpůsobení nekonečné.

V dnešním článku vám ukážeme, jak znovu vytvořit sekce hrdinů pomocí Divi Fullwidth Header. Náš návrh začneme pomocí 3 předem připravených balíčků rozložení a navrhneme naše sekce se zaměřením na vyvážení primárního a sekundárního tlačítka. 

Chceme, aby primární tlačítko vyniklo, protože je to naše primární výzva k akci, zatímco sekundární tlačítko zůstává viditelné a přístupné, aniž by bylo nutné předcházet primární tlačítko.

Principy návrhu primárního a sekundárního tlačítka

Primární tlačítka a sekundární tlačítka vám pomohou Návštěvníci váš Webové stránky na určité akcie. Primární tlačítka jsou obvykle nejběžnější nebo nejžádanější akcí a sekundární tlačítka jsou méně běžnou akcí. To pomáhá vést Návštěvníci tam, kam chtějí jít.

K tomu by měla primární tlačítka opticky vyčnívat a sekundární tlačítka by neměla tolik vyčnívat. To znamená, že hlavní tlačítka by měla být výraznější a mít větší vizuální váhu, aby přitáhla více pozornosti.

Nyní, když jsme pochopili, jak fungují primární a sekundární tlačítka, pojďme k tutoriálu!

přehled

Zde je pohled na tři hlavičky s plnou šířkou, které dnes navrhneme.

Začněme vytvořením nové stránky pomocí Divi Builder

Z řídicího panelu WordPress přejděte na Stránky> Přidat nové vytvořit novou stránku.

Dejte tomu název, který vám dává smysl, a klikněte Použijte Divi Builder

poté klikněte na tlačítko Začněte stavět (Sestavte od nuly)

Poté budete mít prázdné plátno, abyste mohli začít navrhovat v Divi.

Čtěte také: Divi: Jak používat masky a vzory pozadí pro sekci Hrdina

Návrh prvního příkladu

Nyní, když je naše stránka nastavena, začněme s celou šířkou záhlaví vstupní stránky UX.

Konfigurace naší stránky

Než začneme s přizpůsobením, budeme muset načíst předdefinovaný balíček rozložení UX z knihovny Divi. Když aktivujete Visual Builder, zobrazí se tři možnosti, vyberte Procházet rozvržení.

Načíst balíček rozložení

Načtení balíčku rozvržení UX na stránku:

1. Na kartě "Předpřipravené rozvržení", použijte funkci vyhledávání k nalezení balíčku rozvržení UX.
2. Jakmile to najdete, klikněte na něj. Zobrazí se podrobnosti o rozvržení a dostupné stránky.
3. Klepněte na tlačítko Přistání, poté klepněte na tlačítko „Použít toto rozvržení“.

Znovu vytvoříme horní část rozvržení jako modul Záhlaví plné šířky.

Odstraňte první sekci

Protože se chystáme znovu vytvořit první sekci pomocí modulu Fullwidth Header, budeme muset tuto sekci odstranit. Najeďte myší na sekci a klikněte na ikonu koše.

Přidejte sekci s plnou šířkou

Než budeme moci přidat záhlaví s plnou šířkou, musíme přidat sekci s plnou šířkou.

Klikněte na šipku "+" pro zobrazení sekcí Divi klepněte na "Plná šířka". Tím se automaticky zobrazí knihovna Divi Fullwidth Module.

Přidejte záhlaví v plné šířce

V knihovně modulů Divi Fullwidth klikněte na " Záhlaví plné šířky".

Přidat obsah

Než začneme modul přizpůsobovat, pojďme jej přidat obsah potřebné pro tento modul.

Přidejte textový obsah

Na kartě Text přidejte obsah suivant:

1. Název: Zlepšete své znalosti UX designu
2. Podtitul: Kurz UX Designu
3. Tlačítko #1: Přehled kurzu
4. Tlačítko č. 2: Další informace
5. Tělo: výchozí

Přidejte obrázky

Nyní, když máme své obsah text na místě, musíme do našeho návrhu přidat dva obrázky.

1. Na kartě snímky, přidejte obrázek loga (hvězdy) a obrázek záhlaví (fotografie osoby držící telefon).

Změňte barvu pozadí

Na kartě Pozadí, nakonfigurujte tento parametr:

1. Barva pozadí: #131517

Přizpůsobte záhlaví plné šířky

Nyní, když je náš obsah nastaven, pojďme k němu přidat nějaký styl prostřednictvím Design.

Posuňte ikonu dolů

Přidáme ikonu posouvání dolů, šipku dolů.

1. Zobrazit tlačítko pro posun dolů: ANO.
2. Vyberte ikonu šipky dolů.
3. Posunout dolů Barva ikony: #000

Obraz

Dodejme našim obrázkům křivky zaoblením rohů.

Na kartě Obraz, nakonfigurujte následující nastavení:

1. Obrázek Zaoblené rohy : Kliknutím na tlačítko řetězu zrušte propojení rohů a poté zadejte 1000 pixelů do vstupních polí vlevo dole a vpravo dole. Tím se zakulatí levý dolní a pravý dolní roh našich obrázků.

Název textu

Zde upravíme text nadpisu tohoto modulu. V záložce Text nadpisu, nakonfigurujte tato nastavení:

• Název:
  • Písmo: PT Sans
  • Tloušťka písma: Tučné
  • Velikost textu: 5 rem
  • Výška řádku: 1,2 em

Tělo textu

Zde přizpůsobujeme hlavní text pro tento modul. V záložce Hlavní text, nakonfigurujte tato nastavení:

1. Písmo těla: Mukta
2. Velikost hlavního textu: 18 pixelů

Text titulků

Zde přizpůsobujeme text titulků pro tento modul. V záložce Text titulků, nakonfigurujte tato nastavení:

• Titulky:
  • Písmo: Mukta
  • Tloušťka písma: Tučné
  • Styl: velká písmena
  • Barva textu: #13d678
  • Mezera mezi písmeny: 3px

tlačítko jedna

Zde můžeme definovat vlastní styly pro tlačítko jedna: hlavní tlačítko. V záložce Tlačítko jedna, nakonfigurujte tato nastavení:

• Použít vlastní styl pro tlačítko XNUMX: ANO
• Tlačítko jedna:
  • Barva textu: #ffffff
  • Barva pozadí: #13d678
  • Šířka okraje: 0 pixelů
  • Poloměr ohraničení: 100 pixelů
  • Písmo: Mukta
  • Tloušťka písma: Tučné
• Zobrazit ikonu tlačítka: ANO
• Ikona: Šipka vpravo
• Zobrazit ikonu pouze při umístění kurzoru na tlačítko XNUMX: Ne

Tlačítko dvě

Nyní přizpůsobíme druhý: sekundární tlačítko. V záložce Tlačítko dvě, nakonfigurujte tato nastavení:

• Použít vlastní styl pro tlačítko: ANO
  • Tlačítko dvě
  • Barva textu: #ffffff
  • Barva pozadí: #303030
  • Šířka okraje: 0 pixelů
  • Poloměr okraje: 100 pixelů
  • Písmo: Mukta
  • Tloušťka písma: Tučné
• Zobrazit ikonu tlačítka dvě: Ano
• Tlačítko Dvě ikony: Šipka vpravo
• Zobrazit ikonu pouze na tlačítku XNUMX: ANO

Přidat odkazy na tlačítka

Nezapomeňte přidat odkazy na svá tlačítka! V záložce Odkaz, nakonfigurujte následující nastavení:

1. Adresa URL odkazu tlačítka 1: Sem vložte adresu URL tlačítka 1.
2. Adresa URL odkazu tlačítka 1: Sem vložte adresu URL tlačítka 2.

Uložte si práci

Nyní, když máme naši plně navrženou hlavičku s plnou šířkou, nezapomeňte svůj návrh uložit!

• Klikněte na zelenou šipku v pravé dolní části okna modulu.
• Uložit
• Ukončete VisualBuilder.

Čtěte také: Divi: Jak vytvořit sekci Fluid Hero

Bavte se experimentováním

Způsobů přizpůsobení modulu Divi Fullwidth Header je nekonečně mnoho. Využití primárního tlačítka a sekundárního tlačítka vám může pomoci nasměrovat vás Návštěvníci na stránku, kterou má zobrazit, nebo provést akci (např. odeslání žádosti), kterou má provést.

Podívejme se na další dva příklady záhlaví s plnou šířkou, které mají primární tlačítko, které vyniká.

Záhlaví plné šířky z balíčku "Centrum důchodců".

Styly tlačítek

Pojďme se podívat na jedinečné styly primárních a sekundárních tlačítek.

tlačítko jedna

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

• Použít vlastní styly pro tlačítko XNUMX: ANO
• Tlačítko jedna:
  • Velikost textu: 14px
  • Barva textu: #ffffff
  • Barva pozadí: #0a0a0a
  • Šířka okraje: 0 pixelů
  • Poloměr ohraničení: 10 pixelů
  • Mezera mezi písmeny: 3px
  • Tloušťka písma: Tučné
  • Styl písma: TT
• Zobrazit ikonu při umístění kurzoru pouze pro Buttpn One: ANO
• Výplň tlačítka: 15px (nahoře a dole), 25px (levý a pravý)

Tlačítko dvě

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

• Použít vlastní styl pro tlačítko: ANO
  • Tlačítko dva:
  • Velikost textu: 14px
  • Barva textu: #ffffff
  • Barva pozadí: #0a0a0a
  • Šířka okraje: 0 pixelů
  • Poloměr ohraničení: 10 pixelů
  • Tloušťka písma: Tučné
  • Styl písma: TT
• Výplň tlačítka 10: 10px (dole), XNUMXpx (levý a pravý)

A tady to je! Dvě unikátní tlačítka, jedno, které vyčnívá, a jedno, které zabírá druhé místo.

Záhlaví plné šířky balíčku „Finanční plánování“.

Styly tlačítek

Pojďme se podívat na jedinečné styly primárních a sekundárních tlačítek.

tlačítko jedna

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

• Použít vlastní styl pro tlačítko XNUMX: ANO
• Tlačítko jedna:
  • Velikost textu: 18px
  • Barva textu: #ffffff
  • Barva pozadí: #1b4ffe
  • Výplň: 15px()Nahoře a dole); 25 pixelů (levý a pravý)

Tlačítko dvě

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

• Použít vlastní styl pro tlačítko XNUMX: ANO
• Tlačítko dva:
  • Barva textu: #1b4ffe
  • Barva pozadí: transparentní
  • Barva ikony: #1b4ffe

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

Proč investovat do čističky vzduchu?

Modul Divi Fullwidth Header usnadňuje vytváření úžasných sekcí hrdinů na vašem počítači Webové stránky. 

Strategické použití primárních a sekundárních tlačítek zlepší váš uživatelský dojem a pomůže návštěvníkům webu provádět akce, které chtějí provést. 

Možnosti přizpůsobení jsou nekonečné se záhlavím v plné šířce, takže se bavte experimentováním!

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.

...