Chceli by ste vedieť, ako vytvoriť sekciu Hero s modulom Divi's Fullwidth Header?

Budovanie sekcie Hrdina je skvelý spôsob, ako upozorniť na obsah dôležité pre vašu stránku. Toto je obsah veľká veľkosť, ktorú môžete použiť na rozprávanie svojho príbehu, zdieľanie informácií o svojej práci alebo zvýraznenie produktu alebo služby.

S modulom Divi Fullwidth Header môžete pridať názov, podnadpis, dve tlačidlá, hlavný text, obrázok loga a obrázok hlavičky. Samozrejme, môžete použiť aj možnosti pozadia na pridávanie a kombinovanie obrázkov, prechodov, farieb, vzorov a masiek.

Všetky tieto nastavenia môžete zmeniť v nastaveniach modulu namiesto toho, aby ste museli prepínať medzi viacerými modulmi obrázkov, textu a tlačidiel.

V tomto návode vám ukážeme, ako vytvoriť atraktívnu a pútavú časť Hero pomocou modulu Divi's Fullwidth Header.

Poďme !

prehľad

Tu je ukážka toho, čo budeme navrhovať.

ako vytvoriť sekciu Hero pomocou modulu Divi's Fullwidth Header
ako vytvoriť sekciu Hero pomocou modulu Divi's Fullwidth Header

Čo potrebujete, aby ste začali

Skôr ako začnete, uistite sa, že máte na svojom počítači najnovšiu verziu Divi webové stránky.

Teraz ste pripravení začať!

Ako vytvoriť sekciu hrdinu s modulom Divi Fullwidth Header Module

Prečítajte si tiež: Divi: Ako používať „Gradient Builder“ na skrášlenie vašich obrázkov

Vytvorte novú stránku s preddefinovaným rozložením

Začnime s použitím preddefinovaného rozloženia z knižnice Divi. Pre tento dizajn použijeme domovskú stránku balenie veterinárneho lekára.

Z ovládacieho panela Worpress pridajte novú stránku na svoju webové stránky

divi

Zadajte názov a potom vyberte možnosť Použite Divi Builder.

divi

Pre tento príklad použijeme preddefinované rozloženie z knižnice Divi. Tak si vyberte Prehľadávať rozloženia.

Nájdite a vyberte rozloženie chovateľ psov.

vybrať Použite toto rozloženie pridajte rozloženie na svoju stránku.

Teraz sme pripravení navrhnúť.

Pridajte modul Fullwidth Header

Znovu vytvoríme sekciu hrdinu pomocou modulu Fullwidth Header. Pridajte na stránku novú sekciu v plnej šírke pod existujúcu hlavičku.

Pridajte do sekcie modul Fullwidth Header.

Modul hlavičky s plnou šírkou

Potom odstráňte pôvodnú sekciu hlavičky.

Prispôsobte modul Hlavička s plnou šírkou

Pridajte obsah

Otvorte nastavenia modulu a pridajte obsah vedľa modulu:

  • Názov: Veterinár
  • Podtitul: Divivet. Slúžte našim najlepším priateľom
  • Tlačidlo #1: Všetky služby
  • Tlačidlo #2: Dohodnite si stretnutie
  • Telo: Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta.

Ďalej pridajte obrázok hlavičky.

Nastavenia pozadia prechodu

Prejdite na nastavenia pozadia. Odstráňte pôvodnú farbu pozadia a potom pridajte gradient pozadia.

  • 0 %: rgba (255,170,205,0.48)
  • 40 %: rgba (110,66,255,0.24)
  • 87 %: rgba (124,239,255,0.71)
  • Typ prechodu: eliptický
  • Pozícia gradientu: vpravo

Potom vyberte kartu Maska pozadia a pridajte masku pozadia.

  • Pozadie masky: Rohová škvrna
  • Farba masky: #FFFFFF
  • Transformácia: vertikálna

Prispôsobte text

Prepnúť na kartu dizajn a zmeniť nastavenia titulu

  • Písmo názvu: Nunito
  • Hmotnosť písma názvu: Ultra Bold
  • Štýl písma: TT (veľké písmená)
  • Farba textu nadpisu: #a9cb6b
  • Veľkosť textu: 14px
  • Medzera medzi nadpismi: 2px

Prejdite do sekcie BodyText a prispôsobiť písmo.

  • Farba textu: #000000
  • Veľkosť textu tela:
    • Desktop: 18px
    • Telefón: 14px
  • Výška línie tela: 1.8 m

Pozri tiež: Divi: Ako prispôsobiť košík a ikony vyhľadávania v module "Ponuka plnej šírky".

Ďalej otvorte nastavenia titulkov a prispôsobte písmo.

  • Písmo titulkov: Nunito
  • Hmotnosť písma titulkov: tučné
  • Farba textu: #000000

Nakoniec zmeňte veľkosť textu

  • Veľkosť textu titulkov:
    • Desktop: 56px
    • Pohyblivé: 32px
  • Výška riadku titulkov: 1.2 em

Prispôsobiť tlačidlo #1

Ďalej prispôsobíme štýly tlačidiel. Začnite povolením vlastných štýlov pre tlačidlo jedna a potom upravte veľkosť textu.

  • Použiť vlastné štýly pre tlačidlo: ÁNO
  • Veľkosť textu jedného tlačidla: 14px

Pridajte k tlačidlu gradient pozadia. Hodnoty gradientu sú nasledovné:

  • 58 %: #316EFF
  • 100%: #1D2B60
  • Smer gradientu: 90 stupňov

Ďalej prispôsobte nastavenia okrajov a nastavenia písma.

  • Tlačidlo jedna:
    • Šírka orámovania: 0px
    • Polomer okraja: 80px
    • Medzera medzi písmenami: 2px
    • Písmo: Nunito
    • Hmotnosť písma: Ultra Bold
    • Štýl: TT (veľké písmená)
  • Zobraziť tlačidlo Jedna ikona: NIE

Ďalej prispôsobte nastavenia okrajov a výplne pre dizajn pracovnej plochy a pridajte tieň rámčeka.

  • Tlačidlo One Margin
    • Horná časť: 200 pixelov
    • Dole: 0px
  • Polstrovanie jedného tlačidla:
    • Horná časť: 16 pixelov
    • Spodná časť: 16 pixelov
    • Vľavo: 2em
    • Vpravo: 50 em
  • Box Shadow: View Capture

Použite responzívne nastavenia na nastavenie rôznych hodnôt okrajov a výplní na mobilných zariadeniach.

  • Tlačidlo One Margin-Top-Mobile: 25px
  • Tlačidlo One Padding-Right-Mobile: 10em

Prispôsobiť tlačidlo #2

Najprv kliknite pravým tlačidlom myši na tlačidlo #1 a kliknite Kopírovať štýly tlačidla XNUMX.

Potom kliknite pravým tlačidlom myši na tlačidlo dva a prilepte štýly z tlačidla #1.

Teraz môžeme prispôsobiť tlačidlo dva. Zmeňte farbu textu.

  • Farba textu tlačidla s dvomi farbami: #121F60

Prispôsobte prechod pozadia pre tlačidlo dva.

  • 30 %: rgba (0,229,198,0)
  • 100 %: #00e5c6

Pomocou responzívnych nastavení upravte gradient pozadia pre mobilné zariadenia.

  • 0 %: rgba (0,229,198,0)
  • 100 %: #00e5c6

Ďalej upravte okraj a výplň pre dizajn pracovnej plochy.

  • Okraj tlačidla dva:
    • Hore: 0 pixelov
    • Dole: 0px
    • Vľavo: 30 %
  • Polstrovanie dvoch tlačidiel:
    • Horná časť: 16 pixelov
    • Dole: 16px
    • Vľavo: 48em
    • Vpravo: 2 em

Použite nastavenia odpovede na nastavenie rôznych hodnôt okrajov a výplní pre mobilný dizajn.

  • Tlačidlo dva – okraj – ľavý – mobil: 5 %
  • Polstrovanie dvoch tlačidiel:
    • Ľavý mobil: 35 %
    • Pravý mobil: 5 %

Vlastné CSS

Nakoniec je hotová väčšina dizajnérskych prác. Teraz musíme pridať vlastný CSS na dokončenie návrhu. Prepnúť na kartu pokročilý a otvorte sekciu Vlastné CSS.

Najprv začnime s CSS pre obrázok hlavičky. Tento CSS umožňuje zobrazenie obrázka hlavičky nad tlačidlom.

z-index: 1;
position:relative;

Ďalej vlastný CSS v názve. Pomocou responzívnych nastavení nastavíme rôzne hodnoty pre desktopové a mobilné zobrazenia.

Pre stolný počítač:

padding-top:50px;
padding-bottom:30px;

Pre mobil:

padding-top:5px;
padding-bottom:10px;

Nakoniec pridajte nasledujúci CSS na tlačidlo jedna a tlačidlo dva.

white-space: nowrap;

Konečný výsledok

Tu je konečný návrh našej hlavnej sekcie hlavičky s plnou šírkou.

Čítajte tiež: Divi: Ako vytvoriť sekciu členov tímu ako kolotoč

ako vytvoriť sekciu Hero pomocou modulu Divi's Fullwidth Header
ako vytvoriť sekciu Hero pomocou modulu Divi's Fullwidth Header

Stiahnite si DIVI teraz!!!

záver

Modul Fullwidth Header vám umožňuje jednoducho vytvoriť krásnu sekciu Hero, kde budete inzerovať svoje služby a informovať vás o nich Návštevníci o čom to hovoríš webové stránky.

Vstavané nastavenia uľahčujú prispôsobenie každého aspektu hlavičky a všetko je na jednom mieste, takže pri zostavovaní sekcie Hrdina nie je potrebné prepínať medzi viacerými modulmi.

Dúfame, že vás tento návod inšpiruje pre vaše ďalšie Divi projekty. 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, konzultujte nášho sprievodcu na internete 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.

...