Želite li znati kako stvoriti odjeljak Hero s Divi-jevim modulom Fullwidth Header?
Odjeljak Izgradnja heroja izvrstan je način da privučete pozornost na sadržaj važno za vašu stranicu. Ovo je sadržaj velika veličina koju možete koristiti da ispričate svoju priču, podijelite informacije o svom radu ili istaknete proizvod ili uslugu.
S Divi's Fullwidth Header modulom, možete dodati naslov, podnaslov, dva gumba, tijelo teksta, sliku logotipa i sliku zaglavlja. Naravno, također možete koristiti opcije pozadine za dodavanje i kombiniranje slika, gradijenata, boja, uzoraka i maski.
Sve ove postavke možete promijeniti u postavkama modula umjesto da se morate prebacivati između više modula slika, teksta i gumba.
U ovom vodiču pokazat ćemo vam kako stvoriti atraktivan i privlačan Hero odjeljak koristeći Divijev modul Fullwidth Header.
Idemo !
pregled
Evo pregleda onoga što ćemo dizajnirati.
Što trebate za početak
Prije nego počnete, provjerite imate li najnoviju verziju programa Divi na svom web stranica.
Sada ste spremni za početak!
Kako stvoriti hero odjeljak s Divi-jevim modulom zaglavlja pune širine
Pročitajte također: Divi: Kako koristiti "Gradient Builder" za uljepšavanje vaših slika
Napravite novu stranicu s unaprijed definiranim izgledom
Započnimo korištenjem unaprijed definiranog izgleda iz biblioteke Divi. Za ovaj dizajn koristit ćemo početnu stranicu veterinar layout pack.
S nadzorne ploče Worpressa dodajte novu stranicu na svoju web stranica
Dodijelite mu naslov, a zatim odaberite opciju Koristite Divi Builder.
Za ovaj ćemo primjer koristiti unaprijed definirani izgled iz biblioteke Divi. Pa odaberite Pregledaj rasporede.
Pronađite i odaberite izgled uzgajivač pasa.
odabrati Koristite ovaj izgled da biste dodali izgled svojoj stranici.
Sada smo spremni za dizajn.
Dodajte modul Fullwidth Header
Ponovno ćemo stvoriti odjeljak heroja pomoću modula Fullwidth Header. Dodajte novi odjeljak pune širine na stranicu ispod postojećeg zaglavlja.
Dodajte modul Fullwidth Header u odjeljak.
Zatim izbrišite izvorni odjeljak zaglavlja.
Prilagodite modul Fullwidth Header
Dodajte sadržaj
Otvorite postavke modula i dodajte sadržaj pored modula:
- Naziv: Veterinar
- Podnaslov: Divivet. Poslužite naše najbolje prijatelje
- Gumb #1: Sve usluge
- Gumb #2: Zakažite termin
- Tijelo: 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.
Zatim dodajte sliku zaglavlja.
Postavke gradijenta pozadine
Idite na postavke pozadine. Izbrišite izvornu boju pozadine, zatim dodajte pozadinski gradijent.
- 0%: rgba(255,170,205,0.48)
- 40%: rgba(110,66,255,0.24)
- 87%: rgba(124,239,255,0.71)
- Vrsta gradijenta: Eliptična
- Položaj gradijenta: desno
Zatim odaberite karticu Maska za pozadinu i dodajte pozadinsku masku.
- Pozadina maske: kutna mrlja
- Boja maske: #FFFFFF
- Transformacija: okomita
Prilagodite tekst
Prijeđite na karticu dizajn i promijenite postavke naslova
- Font naslova: Nunito
- Težina fonta naslova: ultra podebljano
- Stil fonta: TT (velika slova)
- Boja teksta naslova: #a9cb6b
- Veličina teksta: 14px
- Razmak između slova naslova: 2px
Idite na odjeljak Tekst tijela i prilagodite font.
- Boja teksta: #000000
- Veličina teksta:
- Radna površina: 18px
- Telefon: 14 px
- Visina linije tijela: 1.8 em
Vidi također: Divi: Kako prilagoditi košaricu i ikone pretraživanja modula "Fullwidth Menu"
Zatim otvorite postavke titlova i prilagodite font.
- Font podnaslova: Nunito
- Težina fonta podnaslova: Podebljano
- Boja teksta: #000000
Na kraju promijenite veličinu teksta
- Veličina teksta podnaslova:
- Radna površina: 56px
- Pokretno: 32 px
- Visina retka titla: 1.2 em
Prilagodite gumb #1
Zatim ćemo prilagoditi stilove gumba. Započnite omogućavanjem prilagođenih stilova za gumb jedan, a zatim prilagodite veličinu teksta.
- Koristi prilagođene stilove za gumb: DA
- Veličina teksta na jednom gumbu: 14 px
Dodajte pozadinski gradijent gumbu. Vrijednosti gradijenta su sljedeće:
- 58%: #316EFF
- 100%: #1D2B60
- Smjer gradijenta: 90 stupnjeva
Zatim prilagodite postavke obruba i fonta.
- Gumb jedan:
- Širina obruba: 0 px
- Polumjer ruba: 80px
- Razmak između slova: 2px
- Font: Nunito
- Težina fonta: Ultra podebljano
- Stil: TT (velikim slovima)
- Prikaži ikonu gumba jedan: NE
Zatim prilagodite postavke margina i ispuna za dizajn radne površine i dodajte sjenu okvira.
- Margina gumba jedan
- Vrh: 200 px
- Dolje: 0px
- Ispuna gumba jedan:
- Vrh: 16 px
- Dolje: 16px
- Lijevo: 2em
- Desno: 50em
- Box Shadow: Snimanje pogleda
Upotrijebite osjetljive postavke za postavljanje različitih vrijednosti margine i ispune na mobilnim uređajima.
- Button One Margin-Top-Mobile: 25px
- Button One Padding-Right-Mobile: 10em
Prilagodite gumb #2
Prvo kliknite desnom tipkom gumb #1 i kliknite Kopiraj stilove gumba jedan.
Zatim kliknite desnom tipkom gumb dva i zalijepite stilove s gumba #1.
Sada možemo prilagoditi gumb dva. Promjena boje teksta.
- Boja teksta gumba dva: #121F60
Prilagodite pozadinski gradijent za gumb dva.
- 30%: rgba(0,229,198,0)
- 100%: #00e5c6
Upotrijebite osjetljive postavke za prilagodbu pozadinskog gradijenta za mobilne uređaje.
- 0%: rgba(0,229,198,0)
- 100%: #00e5c6
Zatim prilagodite marginu i ispunu za dizajn radne površine.
- Margina gumba dva:
- Vrh: 0px
- Dolje: 0px
- Lijevo: 30%
- Ispuna gumba dva:
- Vrh: 16 px
- Dolje: 16px
- Lijevo: 48em
- Desno: 2em
Upotrijebite postavke responsifq za postavljanje različitih vrijednosti margine i ispune za mobilni dizajn.
- Margina gumba dva-lijevo-mobilno: 5%
- Ispuna gumba dva:
- Lijevo-mobilno: 35%
- Desno-mobilno: 5%
Prilagođeni CSS
Konačno, glavnina projektiranja je obavljena. Sada moramo dodati prilagođeni CSS kako bismo dovršili dizajn. Prijeđi na karticu napredan i otvori odjeljak Prilagođena CSS.
Prvo, počnimo s CSS-om za sliku zaglavlja. Ovaj CSS omogućuje prikaz slike zaglavlja iznad gumba.
z-index: 1;
position:relative;
Zatim, prilagođeni CSS u naslovu. Postavit ćemo različite vrijednosti za stolna računala i mobilne prikaze koristeći responzivne postavke.
Za stolno računalo:
padding-top:50px;
padding-bottom:30px;
Za mobitel:
padding-top:5px;
padding-bottom:10px;
Na kraju dodajte sljedeći CSS gumbu jedan i gumbu dva.
white-space: nowrap;
Konačni rezultat
Ovo je konačni dizajn za naš herojski dio zaglavlja pune širine.
Pročitajte također: Divi: Kako stvoriti odjeljak za članove tima kao vrtuljak
Preuzmite DIVI odmah!!!
Zaključak
Modul Fullwidth Header omogućuje vam da jednostavno stvorite prekrasan Hero odjeljak za oglašavanje svojih usluga i obavještavanje posjetitelji o čemu pričaš web stranica.
Ugrađene postavke olakšavaju prilagodbu svakog aspekta zaglavlja i sve je na jednom mjestu, tako da nema potrebe za prebacivanjem između više modula da biste izgradili odjeljak Hero.
Nadamo se da će vas ovaj vodič inspirirati za vaše sljedeće Divi projekte. Ako imate nedoumica ili prijedloga, potražite nas odjeljak komentara raspravljati o tome.
Također se možete konzultirati naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
