Divi: Jak zahrnout tlačítko pro posun dolů do modulu Fullwidth Header

Chcete do svého modulu Fullwidth Header přidat divi rolovací tlačítko dolů?

Modul Fullwidth Header of divi obsahuje tlačítko, které uživateli říká, že může rolovat dolů. Jakmile na něj kliknou, jsou automaticky přesměrováni na další sekci. Je to jednoduché tlačítko s více ikonami na výběr a jeho barva a velikost jsou plně přizpůsobitelné. 

V tomto článku se podíváme na to, jak jej přizpůsobit, a podíváme se na čtyři tlačítka pro posun dolů, která můžete zahrnout do modulu Fullwidth Header. Uvidíme také, jak si jej přizpůsobit pomocí CSS pro ještě více možností návrhu.

Začněme!

Přehled tlačítek pro posun dolů

Nejprve se podívejme na návrhy, které vytvoříme v tomto článku.

Příklad 1

Příklad 2

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

Příklad 3

Příklad 4

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

Tlačítka pro posun dolů Design záhlaví s plnou šířkou

Nejprve vytvoříme náš návrh záhlaví s plnou šířkou. Stavím to od nuly pomocí návrhů z bezplatný balíček rozložení terapie dostupný v Divi . Vytvořte novou stránku a přidejte a modul záhlaví s plnou šířkou do nové sekce v plné šířce.

Viz také: Divi: Jak vytvořit organizační schéma pomocí modulu Blurb

Dělič sekcí po celé šířce

Pro toto záhlaví s plnou šířkou přidáme oddělovač. Otevřete nastavení sekce po celé šířce .

Poté přejděte dolů na dělič . Klikněte na záložku Spodní část a zvolte styl 8. oddělovače. Nastavte barvu na #e5e8f0 a jako výšku zadejte 10vw. Zavřete nastavení sekce.

• Děliče: Nízké
• Styl: 8. styl
• Barva: #e5e8f0
• Výška: 10vw

Text záhlaví

Dále otevřete modul Fullwidth Header a přidejte svůj nadpis, podnadpis a text tlačítka. Odstraňte fiktivní text pro obsah těla a nechte ho prázdné.

• Název: Začněte svou cestu k lepšímu pocitu ještě dnes.
• Podtitul: Leslie Saindon, licencovaný terapeut
• Tlačítko #1: Domluvit si schůzku
• body: žádné

Obrázky záhlaví

Přejděte na snímky a vyberte obrázek záhlaví. Vybírám obrázek dodaný s Balíček rozložení terapie.

Pozadí záhlaví

Přejděte na Pozadí. Odstraňte barvu pozadí a vyberte kartu Přechod na pozadí.

• Přechodové zastávky:
  • 25 %: #2e5b61
  • 100 %: RGBA (46, 91, 97, 0,5)

umožnit Umístěte přechod nad obrázek na pozadí .

• Čtvercový přechod nad obrázkem pozadí: ANO

Obrázek na pozadí záhlaví v celé šířce

Poté vyberteKarta Obrázek na pozadí a vyberte obrázek na celou obrazovku. Používám jiný obrázek z balíčku Therapy Layout Pack.

• Pozice obrázku na pozadí: Nahoře uprostřed

Rozložení záhlaví po celé šířce

Poté vybertekarta design a aktivovat Vytvořit celou obrazovku .

• Přepnout na celou obrazovku: ANO

Ikona posouvání záhlaví v celé šířce dolů

Poté aktivujte Zobrazit tlačítko pro posun dolů. V našich příkladech si toto tlačítko nastylujeme, takže ho zatím necháme ve výchozím nastavení.

• Zobrazit tlačítko pro posun dolů: ANO

Obrázek záhlaví

Poté přejděte dolů na Obraz a změňte levé horní zaoblené rohy na 200 pixelů pro stolní počítače. Zbývající zaoblené rohy nastavte na 0px. Změňte zaoblené rohy na 100 pixelů pro tablety a telefony.

• Zaoblené rohy obrázku:
  • Plocha: 200px vlevo nahoře, 0px všechny ostatní
  • Tablet a telefon: 100px vlevo nahoře, 0px všechny ostatní

Text nadpisu záhlaví

Poté přejděte dolů na Text nadpisu. Pro úroveň nadpisu použijte H1. Jako písmo nadpisu vyberte Cormorant Garamond, nastavte váhu na Bold a barvu na #e1ecea.

• Název:
  • Úroveň nadpisu: H1
  • Písmo: Cormorant Garamond
  • Tloušťka písma: Tučné
  • Barva textu: #e1ecea

Poté nastavte taille pro všechny tři velikosti obrazovky. Použijte 90 pixelů pro stolní počítače, 40 pixelů pro tablety a 24 pixelů pro telefony. Změňte výšku řádku na 1.1 m.

• Velikost textu nadpisu: 90px, 40px, 24px
• Výška řádku nadpisu: 1,1 em

Text titulků záhlaví v celé šířce

Poté přejděte dolů na Text titulků. Změňte písmo na Inter, váhu na tučné a barvu na #e1ecea.

• Titulky:
  • Písmo: Inter
  • Tloušťka písma: Tučné
  • Barva textu: #e1ecea

Nastav taille na 22px pro stolní počítače, 20px pro tablety a 16px pro telefony. Změň to Výška řádku při 1,6 em.

• Velikost textu titulků: 22px, 20px, 16px
• Výška řádku titulků: 1,6 em

tlačítko záhlaví

Přejděte dolů na Nastavení Tlačítko jedna a aktivovat Použijte vlastní styly pro tlačítko jedna . Změňte velikost na 14px, barvu textu na #2e5b61 a barvu pozadí na #e1ecea.

• Použít vlastní styly pro tlačítko XNUMX: ANO
• Tlačítko jedna
  • Velikost textu: 14px
  • Barva textu: #2e5b61
  • Pozadí: #e1ecea

Změňte šířku okraj při 0px a poloměru okraj na 50px. Pro písmo použijte Inter a změňte váhu na polotučné.

• Tlačítko jedna:
  • Šířka okraje: 0px
  • Poloměr ohraničení: 50px
  • Písmo: Inter
  • Hmotnost: Tučný

pro Polstrování knoflíku , použijte 20px pro Nahoře a Dole a 40px pro Levý a Pravý.

• Button One Padding: 20 px nahoře a dole, 40 px vlevo a vpravo

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

Příklady tlačítek pro posun dolů

Nyní, když máme záhlaví v plné šířce, podívejme se, jak přizpůsobit tlačítka pro posun dolů. Podíváme se na čtyři příklady s různými kombinacemi ikon, barev a velikostí.

Tlačítka pro posun dolů obsahují tři parametry. Každé nastavení lze upravit nezávisle pro každou velikost obrazovky. Mezi parametry patří:

• Výběr ikon – vyberte si z 11 ikon. Zahrnují různé vzory šipek s pozadím nebo bez něj, včetně nezakroužkovaného, ​​zakroužkovaného a plného.
• Barva – výběr barvy divi Standardní.
• velikost – standardní nastavení velikosti Divi.

Obsahuje také pole CSS na kartě Upřesnit. 

Všechny tyto parametry využijeme.

Viz také: Divi: 5 překrytí masek a vzorů použitelných na obrázek na pozadí

Příklad #1

V našem prvním příkladu použijeme nezakroužkovanou ikonu bez pozadí. Vyberte první ikonu, změňte barvu na #e1ecea a změňte velikost na 66px pro stolní počítače, 60px pro tablety a 50px pro telefony.

• Ikona: 1. ikona
• Barva: #e1ecea
• Velikost: 66px (stolní počítač a tablet), 50px (telefon)

To vytváří světle zelenou šipku dolů, která dobře funguje se zbytkem designu a dostatečně vyčnívá, aby informovala uživatele.

Příklad 2

Pro náš druhý příklad použijeme zakroužkovanou ikonu. Vyberte sedmou ikonu a změňte barvu na #e8c553. Pro tuto ikonu zvětšíme. Změňte velikost na 78 pixelů pro stolní počítače, 70 pixelů pro tablety a 60 pixelů pro telefony.

• Ikona: 7. ikona
• Barva: #e8c553
• Velikost: 78 pixelů (počítač), 70 pixelů (tablet), 60 pixelů (telefon)

Tato barva je variací žluté v balíčku rozložení, ale je světlejší a nejlépe funguje na zeleném pozadí. Ikona má ostré rohy, ale kruh odpovídá zaoblenému designu rozvržení.

Příklad 3

Pro náš třetí příklad použijeme ikonu, která má kolem sebe kruh a pozadí. Tím se obarví pozadí a vytvoří se ikona s clonou, která odhaluje obrázek na pozadí Webové stránky. 

Pro dosažení nejlepších výsledků budeme muset věnovat velkou pozornost velikosti ikony a barvě pozadí tlačítka.

Vyberte osmou ikonu a změňte její barvu na #0e4951. Nastavte velikost na 60px pro stolní počítače, 56px pro tablety a 50px pro telefony.

• Ikona: 8. ikona
• Barva: #0e4951
• Velikost: 60 pixelů (počítač), 56 pixelů (tablet), 50 pixelů (telefon)

Zelená je tmavší odstín zelené v pozadí. Tmavší odstín vynikne proti zelené a stále ladí se zbytkem rozložení.

Příklad 4

Co když chcete kombinovat barvy tak, abyste za ikonou výřezu měli barvu pozadí? Můžeme to udělat pomocí CSS. 

V tomto příkladu použijeme CSS k vytvoření tvaru pozadí za ikonou, který bude prosvítat ikonou výřezu. Samotná ikona použije standardní nastavení.

Vyberte jedenáctou ikonu a změňte barvu na #e1ecea. Ikonu nastavíme menší a vytvoříme velký tvar pozadí. Změňte velikost na 50 pixelů pro stolní počítače, 40 pixelů pro tablety a 30 pixelů pro telefony.

• Ikona: 11^th
• Barva: #e1ecea
• Velikost: 50 pixelů (počítač), 40 pixelů (tablet), 30 pixelů (telefon)

Poté přejděte na kartu pokročilý a přejděte do pole Tlačítko rolování dolů a zadejte tento CSS:

border-radius: 45%;
padding:12px 40px 14px 40px;
background-color:#2e5b61

Tento formát CSS přidává odsazení nahoře, vpravo, dole a vlevo. Tuto výplň jsem použil k vytvoření oválu pozadí, který se dobře hodí k návrhu záhlaví pomocí vodítek návrhu rozvržení.

Výsledky různých příkladů

Příklad 1

Příklad 2

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

Příklad 3

Příklad 4

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

Proč investovat do čističky vzduchu?

Toto je náš přehled čtyř tlačítek pro posun dolů, která můžete zahrnout do svého modulu Fullwidth Header Divi. Posuvné tlačítko obsahuje několik ikon, ze kterých si můžete vybrat, a můžete nastavit jeho barvu a velikost. 

Pomocí pole CSS můžete tlačítko dále přizpůsobit. Kombinace možností stylingu tlačítek a CSS vám dává spoustu možností designu s tlačítky pro posun dolů.

Doufám, že to bude užitečné pro váš další blogový web. 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.

...