Doriți să știți cum să creați o secțiune Hero cu modulul Fullwidth Header al Divi?
Construirea unei secțiuni Hero este o modalitate excelentă de a atrage atenția asupra cuprins important pentru pagina ta. Acesta este un cuprins dimensiune mare pe care o puteți folosi pentru a vă spune povestea, a împărtăși informații despre munca dvs. sau a evidenția un produs sau serviciu.
Cu modulul Divi Fullwidth Header, puteți adăuga un titlu, subtitrare, două butoane, text de corp, imagine de siglă și imagine de antet. Desigur, puteți folosi și opțiunile de fundal pentru a adăuga și combina imagini, degrade, culori, modele și măști.
Puteți modifica toate aceste setări în setările modulului în loc să trebuiască să comutați între mai multe module de imagine, text și butoane.
În acest tutorial, vă vom arăta cum să creați o secțiune Hero atractivă și atrăgătoare folosind modulul Fullwidth Header al Divi.
Sa mergem !
studiu
Iată o previzualizare a ceea ce vom proiecta.
Ce ai nevoie pentru a începe
Înainte de a începe, asigurați-vă că aveți cea mai recentă versiune de Divi pe dvs site-ul web.
Acum sunteți gata să începeți!
Cum se creează o secțiune erou cu modulul de antet cu lățime completă al Divi
Citiți și: Divi: Cum să utilizați „Gradient Builder” pentru a vă înfrumuseța imaginile
Creați o pagină nouă cu un aspect predefinit
Să începem prin a folosi un aspect predefinit din biblioteca Divi. Pentru acest design vom folosi pagina de pornire pachet de aspect veterinar.
Din tabloul de bord Worpress, adăugați o nouă pagină la dvs site-ul web
Dați-i un titlu, apoi selectați opțiunea Utilizați Divi Builder.
Vom folosi un aspect predefinit din biblioteca Divi pentru acest exemplu. Deci selectează Răsfoiți Aspecte.
Găsiți și selectați aspectul crescător de câini.
selecta Utilizați acest aspect pentru a adăuga aspectul paginii dvs.
Acum suntem gata de proiectare.
Adăugați modulul Fullwidth Header
Vom recrea secțiunea eroului folosind modulul Fullwidth Header. Adăugați o nouă secțiune cu lățime completă în pagină, sub antetul existent.
Adăugați un modul Fullwidth Header la secțiune.
Apoi, ștergeți secțiunea antet originală.
Personalizați modulul Fullwidth Header
Adăugați conținut
Deschideți setările modulului și adăugați cuprins lângă modul:
- Titlu: Veterinar
- Subtitrare: Divivet. Serviți cei mai buni prieteni ai noștri
- Butonul #1: Toate serviciile
- Butonul #2: Faceți o programare
- Corp: 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.
Apoi, adăugați o imagine de antet.
Setări de fundal cu gradient
Accesați setările de fundal. Ștergeți culoarea originală de fundal, apoi adăugați un gradient de fundal.
- 0%: rgba(255,170,205,0.48)
- 40%: rgba(110,66,255,0.24)
- 87%: rgba(124,239,255,0.71)
- Tip gradient: eliptic
- Poziție gradient: dreapta
Apoi selectați fila Mască de fundal și adăugați o mască de fundal.
- Fundal măști: Blob de colț
- Culoarea măștii: #FFFFFF
- Transformare: verticală
Personalizați textul
Comutați la filă Amenajări și modificați setările titlului
- Font titlu: Nunito
- Greutatea fontului titlului: Ultra Bold
- Stil font: TT (majuscule)
- Culoare text titlu: #a9cb6b
- Dimensiunea textului: 14px
- Spațiere dintre litere de titlu: 2px
Accesați secțiunea de Corpul textului și personalizați fontul.
- Culoarea textului: # 000000
- Dimensiunea textului corpului:
- Desktop: 18px
- Telefon: 14px
- Înălțimea liniei corpului: 1.8 em
Vezi si: Divi: Cum să personalizați coșul și pictogramele de căutare ale modulului „Fullwidth Menu”.
Apoi, deschideți setările de subtitrare și personalizați fontul.
- Font subtitrare: Nunito
- Greutate font subtitrare: aldine
- Culoare text: #000000
În cele din urmă, modificați dimensiunea textului
- Dimensiunea textului subtitrarilor:
- Desktop: 56px
- Mobil: 32px
- Înălțimea liniei de subtitrare: 1.2 em
Personalizați butonul #1
În continuare, vom personaliza stilurile butoanelor. Începeți prin a activa stilurile personalizate pentru butonul unu, apoi ajustați dimensiunea textului.
- Utilizați stiluri personalizate pentru buton: DA
- Buton One Text Size: 14px
Adăugați un gradient de fundal la buton. Valorile gradientului sunt după cum urmează:
- 58%: #316EFF
- 100%: #1D2B60
- Direcție gradient: 90 de grade
Apoi, personalizați setările de chenar și setările de font.
- Butonul Unu:
- Lățimea chenarului: 0px
- Raza chenarului: 80px
- Spațiere între litere: 2px
- Font: Nunito
- Greutatea fontului: Ultra Bold
- Stil: TT (cu majuscule)
- Afișați o pictogramă butonului: NU
Apoi, personalizați setările de marjă și de umplutură pentru designul desktopului și adăugați o umbră de casetă.
- Butonul One Marjă
- Sus: 200 px
- De jos: 0px
- Buton One Umplutură:
- Sus: 16 px
- Jos: 16px
- Stânga: 2em
- Dreapta: 50em
- Box Shadow: Vizualizare captură
Utilizați setările de răspuns pentru a seta diferite valori de marjă și de umplutură pe dispozitivele mobile.
- Buton One Margin-Top-Mobile: 25px
- Buton One Padding-Dreapta-Mobil: 10em
Personalizați butonul #2
Mai întâi, faceți clic dreapta pe butonul #1 și faceți clic Copiere Buton One Styles.
Apoi, faceți clic dreapta pe butonul doi și lipiți stilurile de la butonul #1.
Acum putem personaliza butonul doi. Schimbați culoarea textului.
- Culoarea textului butonului doi: #121F60
Personalizați gradientul de fundal pentru butonul doi.
- 30%: rgba(0,229,198,0)
- 100%: #00e5c6
Utilizați setările de răspuns pentru a ajusta gradientul de fundal pentru dispozitivele mobile.
- 0%: rgba(0,229,198,0)
- 100%: #00e5c6
Apoi, ajustați marja și umplutura pentru designul desktopului.
- Marja butonului doi:
- Sus: 0px
- De jos: 0px
- Stânga: 30%
- Buton doi umplutură:
- Sus: 16 px
- De jos: 16px
- Stânga: 48em
- Dreapta: 2em
Utilizați setările responsifq pentru a seta diferite marje și valori de umplutură pentru designul mobil.
- Butonul doi Marja-Stânga-Mobil: 5%
- Buton doi umplutură:
- Stânga-Mobil: 35%
- Dreapta-Mobil: 5%
CSS personalizate
În cele din urmă, cea mai mare parte a lucrărilor de proiectare este realizată. Acum trebuie să adăugăm CSS personalizat pentru a finaliza designul. Comutați la filă Avansat și deschideți secțiunea CSS personalizat.
Mai întâi, să începem cu CSS-ul pentru imaginea antet. Acest CSS permite ca imaginea antetului să fie afișată deasupra butonului.
z-index: 1;
position:relative;
Apoi, CSS personalizat în titlu. Vom seta diferite valori pentru vizualizările desktop și mobile folosind setări receptive.
Pentru computer desktop:
padding-top:50px;
padding-bottom:30px;
Pentru mobil:
padding-top:5px;
padding-bottom:10px;
În cele din urmă, adăugați următorul CSS la butonul unu și butonul doi.
white-space: nowrap;
Rezultat final
Iată designul final pentru secțiunea noastră de eroi de antet cu lățime completă.
Citiți și: Divi: Cum să creați o secțiune pentru membrii echipei ca un carusel
Descărcați DIVI acum!!!
Concluzie
Modulul Fullwidth Header vă permite să creați cu ușurință o secțiune Hero frumoasă pentru a vă promova serviciile și a vă spune vizitatori despre ce vorbesti site-ul web.
Setările încorporate facilitează personalizarea fiecărui aspect al antetului și totul este într-un singur loc, deci nu este nevoie să comutați între mai multe module pentru a vă construi secțiunea Hero.
Sperăm că acest tutorial vă va inspira pentru următoarele proiecte Divi. Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
De asemenea, puteți consulta resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
