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ť.
Č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
Zadajte názov a potom vyberte možnosť Použite Divi Builder.
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.
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č
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.
...