Divi: Ako začleniť tlačidlo rolovania nadol do modulu Hlavička plnej šírky

Chcete pridať do svojho modulu hlavičky s plnou šírkou divi tlačidlo rolovania nadol?

Modul Fullwidth Header of divi obsahuje tlačidlo, ktoré používateľovi povie, že sa môže posúvať nadol. Po kliknutí naň sú automaticky presmerovaní na ďalšiu sekciu. Je to jednoduché tlačidlo s viacerými ikonami na výber a jeho farba a veľkosť sú plne prispôsobiteľné. 

V tomto článku uvidíme, ako si ho prispôsobiť, a uvidíme štyri tlačidlá posúvania nadol, ktoré môžete zahrnúť do modulu Hlavička plnej šírky. Uvidíme tiež, ako ho prispôsobiť pomocou CSS pre ešte viac možností dizajnu.

Začnime!

Prehľad tlačidiel rolovania nadol

Najprv sa pozrime na návrhy, ktoré vytvoríme v tomto článku.

Príklad 1

Príklad 2

Stiahnite si DIVI teraz!!!

Príklad 3

Príklad 4

Stiahnite si DIVI teraz!!!

Tlačidlá rolovania nadol Dizajn hlavičky na celú šírku

Najprv vytvoríme náš návrh hlavičky s plnou šírkou. Staviam to od začiatku pomocou návrhov z bezplatný balíček rozloženia terapie dostupný v Divi . Vytvorte novú stránku a pridajte a modul hlavičky s plnou šírkou do novej sekcie v plnej šírke.

Pozri tiež: Divi: Ako vytvoriť organizačnú schému pomocou modulu Blurb

Oddeľovač sekcií po celej šírke

Pre túto hlavičku s plnou šírkou pridáme oddeľovač. Otvorte nastavenia sekcia po celej šírke .

Potom prejdite nadol na delič . Kliknite na kartu dno a vyberte štýl oddeľovača 8. Nastavte farbu na #e5e8f0 a ako výšku zadajte 10vw. Zatvorte nastavenia sekcie.

• Rozdeľovače: Nízke
• Štýl: 8. štýl
• Farba: #e5e8f0
• Výška: 10vw

Text hlavičky

Potom otvorte modul Záhlavie celej šírky a pridajte svoj nadpis, podnadpis a text tlačidla. Odstráňte fiktívny text pre obsah tela a nechajte ho prázdne.

• Názov: Začnite svoju cestu, aby ste sa cítili lepšie už dnes.
• Podtitul: Leslie Saindon, licencovaný terapeut
• Tlačidlo #1: Dohodnúť si stretnutie
• body: žiadne

Obrázky hlavičky

Prejdite na položku snímky a vyberte obrázok hlavičky. Vyberám obrázok dodaný s Balíček rozloženia terapie.

Pozadie hlavičky

Prejdite na položku pozadia. Odstráňte farbu pozadia a vyberte kartu Prechod pozadia.

• Zarážky prechodu:
  • 25%: #2e5b61
  • 100 %: RGBA (46, 91, 97, 0,5)

umožniť Umiestnite prechod nad obrázok na pozadí .

• Štvorcový prechod nad obrázkom na pozadí: ÁNO

Obrázok na pozadí hlavičky v plnej šírke

Potom vyberteKarta Obrázok na pozadí a vyberte obrázok na celú obrazovku. Používam iný obrázok z balíka Therapy Layout Pack.

• Pozícia obrázka na pozadí: Horný stred

Rozloženie hlavičky na celú šírku

Potom vybertekarta dizajn a aktivovať Urobiť celú obrazovku .

• Prepnúť na celú obrazovku: ÁNO

Ikona posúvania hlavičky po celej šírke nadol

Potom aktivujte Zobraziť tlačidlo rolovania nadol. V našich príkladoch si toto tlačidlo naštylujeme, takže ho zatiaľ necháme v predvolenom nastavení.

• Zobraziť tlačidlo rolovania nadol: ÁNO

Obrázok hlavičky

Potom prejdite nadol na Obraz a zmeniť ľavé horné zaoblené rohy na 200 pixelov pre stolné počítače. Zvyšné zaoblené rohy nastavte na 0px. Zmeňte zaoblené rohy na 100 pixelov pre tablety a telefóny.

• Zaoblené rohy obrázka:
  • Pracovná plocha: 200 pixelov vľavo hore, 0 pixelov všetky ostatné
  • Tablet a telefón: 100px vľavo hore, 0px všetky ostatné

Text nadpisu hlavičky

Potom prejdite nadol na Text nadpisu. Pre úroveň nadpisu použite H1. Ako písmo nadpisu vyberte Cormorant Garamond, nastavte váhu na Bold a farbu na #e1ecea.

• Názov:
  • Úroveň nadpisu: H1
  • Písmo: Cormorant Garamond
  • Hrúbka písma: tučné
  • Farba textu: #e1ecea

Potom nastavte pás pre všetky tri veľkosti obrazovky. Použite 90 pixelov pre stolné počítače, 40 pixelov pre tablety a 24 pixelov pre telefóny. Zmeňte výšku riadku na 1.1 m.

• Veľkosť textu nadpisu: 90px, 40px, 24px
• Výška riadku nadpisu: 1,1 em

Text titulkov hlavičky na celú šírku

Potom prejdite nadol na Text titulkov. Zmeňte písmo na Inter, váhu na tučné a farbu na #e1ecea.

• Titulky:
  • Písmo: Inter
  • Hrúbka písma: tučné
  • Farba textu: #e1ecea

Nastaviť pás pri 22px pre stolné počítače, 20px pre tablety a 16px pre telefóny. Zmeň to výška riadku pri 1,6 em.

• Veľkosť textu titulkov: 22px, 20px, 16px
• Výška riadku titulkov: 1,6 em

tlačidlo hlavičky

Posuňte zobrazenie nadol na Nastavenia Tlačidlo jeden a aktivovať Použite vlastné štýly pre tlačidlo XNUMX . Zmeňte veľkosť na 14px, farbu textu na #2e5b61 a farbu pozadia na #e1ecea.

• Použiť vlastné štýly pre tlačidlo XNUMX: ÁNO
• Tlačidlo jeden
  • Veľkosť textu: 14 pixelov
  • Farba textu: #2e5b61
  • Pozadie: #e1ecea

Zmeňte šírku hranica pri 0px a polomere hranica pri 50 pixeloch. Pre písmo použite Inter a zmeňte váhu na polotučné.

• Tlačidlo jedna:
  • Šírka orámovania: 0px
  • Polomer okraja: 50px
  • Písmo: Inter
  • Hmotnosť: Tučný

pre polstrovanie gombíkov , použite 20 pixelov pre hornú a spodnú časť a 40 pixelov pre ľavú a pravú stranu.

• Výplň tlačidla 20: 40 px hore a dole, XNUMX px vľavo a vpravo

Čítajte tiež: Divi: Ako vytvoriť sekciu Fluid Hero

Príklady tlačidiel rolovania nadol

Teraz, keď máme hlavičku v plnej šírke, pozrime sa, ako prispôsobiť tlačidlá posúvania nadol. Pozrieme sa na štyri príklady s rôznymi kombináciami ikon, farieb a veľkostí.

Tlačidlá rolovania nadol obsahujú tri parametre. Každé nastavenie je možné upraviť nezávisle pre každú veľkosť obrazovky. Medzi parametre patrí:

• Výber ikon – vyberte si z 11 ikon. Zahŕňajú rôzne vzory šípok s pozadím alebo bez neho, vrátane nezakrúžkovaného, ​​zakrúžkovaného a plného.
• Farba – výber farby divi Štandardné.
• veľkosť – štandardné nastavenie veľkosti Divi.

Obsahuje tiež pole CSS na karte Rozšírené. 

Použijeme všetky tieto parametre.

Pozri tiež: Divi: 5 prekrytí masiek a vzorov použiteľných na obrázok na pozadí

Príklad č. 1

V našom prvom príklade použijeme nezakrúžkovanú ikonu bez pozadia. Vyberte prvú ikonu, zmeňte farbu na #e1ecea a zmeňte veľkosť na 66 px pre stolné počítače, 60 px pre tablety a 50 px pre telefóny.

• Ikona: 1. ikona
• Farba: #e1ecea
• Veľkosť: 66px (stolný počítač a tablet), 50px (telefón)

Tým sa vytvorí svetlozelená šípka nadol, ktorá dobre funguje so zvyškom dizajnu a dostatočne vyniká, aby informovala používateľa.

Príklad 2

V našom druhom príklade použijeme zakrúžkovanú ikonu. Vyberte siedmu ikonu a zmeňte farbu na #e8c553. Pre túto ikonu zväčšíme. Zmeňte veľkosť na 78 pixelov pre počítače, 70 pixelov pre tablety a 60 pixelov pre telefóny.

• Ikona: 7. ikona
• Farba: #e8c553
• Veľkosť: 78px (stolný počítač), 70px (tablet), 60px (telefón)

Táto farba je variáciou žltej v balíku rozloženia, ale je svetlejšia a najlepšie funguje na zelenom pozadí. Ikona má ostré rohy, ale kruh zodpovedá zaoblenému dizajnu rozloženia.

Príklad 3

V našom treťom príklade použijeme ikonu, ktorá má okolo seba kruh a pozadie. Tým sa zafarbí pozadie a vytvorí sa ikona s clonou, ktorá odhaľuje obrázok na pozadí webové stránky. 

Aby sme dosiahli čo najlepšie výsledky, budeme musieť venovať veľkú pozornosť veľkosti ikony a farbe pozadia tlačidla.

Vyberte ôsmu ikonu a zmeňte jej farbu na #0e4951. Nastavte veľkosť na 60 pixlov pre stolné počítače, 56 pixlov pre tablety a 50 pixlov pre telefóny.

• Ikona: 8. ikona
• Farba: #0e4951
• Veľkosť: 60px (stolný počítač), 56px (tablet), 50px (telefón)

Zelená je tmavší odtieň zelenej v pozadí. Tmavší odtieň vynikne oproti zelenej a stále ladí so zvyškom rozloženia.

Príklad 4

Čo ak chcete kombinovať farby tak, aby ste mali farbu pozadia za ikonou výrezu? Môžeme to urobiť pomocou CSS. 

V tomto príklade použijeme CSS na vytvorenie tvaru pozadia za ikonou, ktorá sa zobrazí cez ikonu výrezu. Samotná ikona bude používať štandardné nastavenia.

Vyberte jedenástu ikonu a zmeňte farbu na #e1ecea. Pre túto ikonu nastavíme menšiu ikonu a vytvoríme veľký tvar pozadia. Zmeňte veľkosť na 50 pixelov pre počítače, 40 pixelov pre tablety a 30 pixelov pre telefóny.

• Ikona: 11^EME
• Farba: #e1ecea
• Veľkosť: 50px (stolný počítač), 40px (tablet), 30px (telefón)

Potom prejdite na kartu pokročilý a prejdite do poľa Tlačidlo rolovania nadol a zadajte tento CSS:

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

Tento formát CSS pridáva výplň hore, vpravo, dole a vľavo. Použil som túto výplň na vytvorenie oválu pozadia, ktorý sa dobre hodí k dizajnu hlavičky pomocou sprievodcov návrhu rozloženia.

Výsledky rôznych príkladov

Príklad 1

Príklad 2

Stiahnite si DIVI teraz!!!

Príklad 3

Príklad 4

Stiahnite si DIVI teraz!!!

záver

Toto je náš prehľad štyroch tlačidiel rolovania nadol, ktoré môžete zahrnúť do svojho modulu Fullwidth Header Divi. Rolovacie tlačidlo obsahuje niekoľko ikon, z ktorých si môžete vybrať, a môžete nastaviť jeho farbu a veľkosť. 

Pomocou poľa CSS môžete tlačidlo ďalej prispôsobiť. Kombinácie možností štýlu tlačidiel a CSS vám poskytujú množstvo možností dizajnu pomocou tlačidiel rolovania nadol.

Dúfam, že to bude užitočné pre váš ďalší blog. Ak máte nejaké obavy alebo návrhy, nájdite nás v časť s komentármi diskutovať o tom.

Môžete sa tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok.

Neváhajte si pozrieť aj nášho sprievodcu na Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.

Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.

...