5 stiluri Creative Divi Header Module pe care le puteți realiza folosind setările încorporate

Din cutie, modulul antet Divi poate crea modele de antet izbitoare cu doar câteva ajustări. Acest lucru îl face un modul extrem de popular atunci când proiectați anteturi pentru site-ul dvs. web în Divi. Și cu o gândire ușoară, puteți crea câteva modele cu adevărat unice folosind doar setările încorporate (fără CSS personalizat). Așadar, pentru cei dintre voi care doresc să exploreze câteva noi modele de antet, vă voi arăta 5 stiluri de module de antet Divi care vă pot inspira.

Bucurați-vă!

Aruncați o privire asupra celor 5 stiluri ale modulului antet Divi

Stilul 1: Gradientul abstract

Începeți să proiectați stilul # 1

Stilul 2: Tripla amenințare

Începeți să proiectați stilul nr. 2

Stilul 3: Cadrul rotunjit

Începeți să proiectați stilul nr. 3

Stilul # 4: Lefty-ul amestecat

Începeți să proiectați stilul # 4

Stilul 5: tipul de scalare mare

Începeți să proiectați stilul # 5

De ce aveți nevoie pentru a începe

Pentru a începe, veți avea nevoie de tema Divi. Voi folosi Divi Builder pentru a construi desenele pe partea frontală. De asemenea, veți avea nevoie de câteva imagini pentru a finaliza tutorialul. Amintiți-vă că puteți importa întotdeauna imaginile unui aspect premodat. De fapt, pentru acest tutorial, voi folosi imagini din pachetul de machetare a companiei de curățare, pachetul de machetare pentru business coach și pachetul de machetare pentru web freelancer.

Să începem!

Abonați-vă la canalul nostru Youtube

Stilul 1: Gadientul abstract

Acest prim design al modulului de antet Divi este un design simplu, multifuncțional, care utilizează fundaluri degradate într-un mod creativ.

Pentru a începe, adăugați o nouă secțiune cu lățime completă cu un modul de antet cu lățime completă.

Actualizați conținutul setărilor antetului cu un nou titlu și o imagine antet.

Apoi actualizați setările de proiectare după cum urmează:

Titlu Font: Lato
Dimensiune text titlu: 6vw
Culoare fundal buton 1: # 0c71c3
Lățimea butonului One Border: 0px
Căptușeală personalizată: 8vw sus, 8vw jos

Înainte de a adăuga fundalul secțiunii noastre, trebuie mai întâi să facem fundalul modulului antet transparent și să îi oferim un gradient personalizat pentru a crea forma cercului nostru în colțul din dreapta jos. Reveniți la fila conținut și actualizați fundalul după cum urmează:

Culoare fundal: rgba (255,255,255,0)
Culoarea din stânga a gradientului de fundal: # 0096eb
Culoarea dreaptă a gradientului de fundal: rgba (255,255,255,0)
Tipul gradientului: radial
Direcție radială: jos dreapta
Poziția inițială: 25%
Poziție finală: 0%

Salvează setările

În continuare, trebuie să adăugăm desenele noastre de fundal la secțiunea care va sta în spatele modulului antet. Pentru aceasta, deschideți setările secțiunii și actualizați următoarele:

Culoarea din stânga a gradientului de fundal: # 0096eb
Culoarea dreaptă a gradientului de fundal: # 007ea1
Tipul gradientului: radial
Direcție radială: stânga sus
Poziția inițială: 43%
Poziție finală: 0%

Sfat de proiectare: dacă sunteți în căutarea unor culori pentru a încerca propriile gradiente de antet, vă sugerez să trageți culorile utilizate în imaginea / grafica antetului pe care ați putea să o utilizați.

Pentru a adăuga un alt element de design subtil la fundalul nostru abstract, putem adăuga un separator de secțiune de sus și de jos. Pentru a face acest lucru, accesați fila de proiectare și adăugați următoarele separatoare:

Stilul divizorului superior: vezi captura de ecran
Culoare divizor superior: rgba (150.210.210,0.2)
Înălțimea separatorului superior: 8vw
Repartitor orizontal repartitor superior: 0,7x
Flip divizor superior: vertical

Stilul divizorului inferior: vezi captura de ecran
Culoare divizor inferior: rgba (150,210,210,0,2)
Înălțimea divizorului inferior: 10vw
Repetare orizontală a compartimentului inferior: 0,5x
Flip divizor inferior: vertical

Asta e! Verificați designul final.

Stilul 2: Tripla amenințare

Următorul stil al modulului antet divi include trei îndemnuri la acțiune, inclusiv cele două butoane și derularea până la pictograma de jos. Potrivirea pictogramelor butoanelor cu pictograma de derulare ajută la aspectul simetric al designului. Iar divizoarele de secțiuni creează un design triunghiular abstract frumos care îi conduce pe utilizatori în josul paginii.

Creați o nouă secțiune cu lățime completă cu un antet cu lățime completă.

Apoi actualizați textul pentru Titlu, Butonul # 1 Text de legătură și Butonul # 2 Link Text.

Apoi actualizați restul designului după cum urmează:

Culoare fundal: # 1a1844
Orientare text și siglă: centru
Pictogramă: vezi captura de ecran
Derulați în jos Dimensiunea pictogramei: 20 px
Titlu Font: Lato
Titlu Greutate font: greu
Dimensiune text titlu: 5vw (desktop), 40px (tabletă), 30px (smartphone)
Înălțimea liniei de titlu: 1.3em
Butonul doi Culoare fundal: # fe4943
Lățimea butonului două margini: 0 px
Pictogramă buton doi: săgeată dreapta (vezi captura de ecran)
Culoare fundal buton 1: # fe4943
Lățimea butonului One Border: 0px
Pictogramă buton 1: săgeată stânga (vezi captura de ecran)
Plasare pictogramă buton 1: stânga
Căptușeală personalizată: 10vw sus, 10vw stânga

Acum tot ce trebuie să facem este să adăugăm separatoarele noastre de secțiuni pentru a crea designul de fundal triunghiular. Deschideți setările secțiunii și actualizați următoarele setări de proiectare:

Stilul divizorului superior: vezi captura de ecran
Culoare divizor superior: rgba (255,255,255,0,3)
Înălțimea separatorului superior: 45vw

Stilul divizorului superior: vezi captura de ecran
Culoare divizor superior: rgba (255,255,255,0,1)
Înălțimea separatorului superior: 45vw

Acum, să verificăm designul final:

Sfat pentru proiectarea bonusului: ajustări mobile pentru butoane

Știu că nu am spus CSS personalizat, dar aceasta este o înflorire suplimentară neesențială, credeam că unora dintre voi le va plăcea. Este posibil să observați că pentru anteturile cu două butoane, al doilea buton are o margine stângă care aruncă designul pe smartphone-uri. Pentru un design mai curat pe smartphone-uri, puteți adăuga un fragment de CSS personalizat la setările paginii dvs. pentru a face butoanele aceeași lățime și fără a doua marjă a butonului.

Deschideți setările paginii în Divi Builder și adăugați următorul CSS

@media (max-width: 550px){
.et_pb_fullwidth_header .et_pb_fullwidth_header_container .et_pb_button {
  display: block;
  width: 100%;
margin-left: 0px;    
  }
}

Uită-te acum la designul mobil.

Stilul 3: Cadrul rotunjit

Acest design rotunjit al modulului de antet Divi este o modalitate excelentă de a vă încadra imaginea de fundal și conținutul antetului pentru a aduce și mai multă atenție îndemnului la acțiune. Este nevoie doar de câteva ajustări la raza de margine a antetului, o umbră de casetă și o anumită distanță personalizată.

Pentru a începe, creați o nouă secțiune cu lățime completă cu un antet cu lățime completă.

Mai întâi, să actualizăm elementele de conținut pentru antet adăugând Titlul, textul Buton # 1 Link și o imagine Logo.

Apoi adăugați o imagine de fundal suficient de mare pentru a acoperi înălțimea și lățimea antetului. Deoarece acesta va fi un antet rotunjit, încercați să utilizați o imagine cu aceeași înălțime și lățime (cum ar fi 1000 px cu 1000 px).

Apoi actualizați restul setărilor de proiectare după cum urmează:

Salvează setările.

Apoi deschideți setările secțiunii pentru a adăuga culoarea și spațiul de fundal după cum urmează:

Culoare fundal: # 000000
Căptușeală personalizată: 5vw sus, 5vw jos

Acum verificați designul final.

The Blended Lefty

Acest design antet are câteva caracteristici de design unice. Modulul antet este de fapt redimensionat și aliniat la stânga pentru a expune jumătatea din dreapta a imaginii de fundal a secțiunii. Și conținutul modulului antet are un efect de amestecare care expune imaginea de fundal prin conținut. Pentru a face acest lucru, veți avea nevoie de imaginea de fundal potrivită pentru secțiunea dvs. În general, veți dori ca imaginea să aibă elemente mai întunecate, astfel încât conținutul amestecat să fie mai vizibil.

Să începem.

Mai întâi, creați o nouă secțiune cu lățime completă cu un antet cu lățime completă.

Înainte de a începe să ne actualizăm stilurile de antet, treceți mai întâi la setările secțiunii și adăugați următorul fundal:

Adăugați o imagine de fundal cu punctul focal al imaginii în dreapta.

Culoarea din stânga a gradientului de fundal: rgba (0,0,0,0.54)
Culoarea dreaptă a gradientului de fundal: rgba (255,255,255,0)
Direcția gradientului: 90 grade
Direcție radială: jos dreapta
Poziția inițială: 50%
Poziție finală: 0%
Plasați gradientul deasupra imaginii de fundal: DA

Scopul gradientului este de a face partea stângă a imaginii mai întunecată, astfel încât atunci când amestecăm conținutul modulului antet să fie mai ușor de citit. De asemenea, nu veți putea vedea fundalul secțiunii chiar acum, deoarece culoarea implicită a fundalului antetului este încă activă. Vom schimba asta în continuare.

Deschideți setările antetului și actualizați conținutul cu un titlu, butonul # 1 Text de legătură și o siglă întunecată.

Acum schimbați culoarea de fundal în alb.

Apoi actualizați următoarele:

Titlu Greutate font: Ultra Bold
Culoare text titlu: # 000000
Dimensiunea textului titlului: 8vw
Înălțimea liniei de titlu: 1.1em
Buton ONe Dimensiune text: 2.7vw
Culoarea textului butonului unu: # 000000
Lățime buton One Border: 0.2em
Culoarea chenarului Buton One: # edf000
Greutatea fontului: Ultra Bold
Lățime: 50% (desktop, tabletă și smartphone)
Blend Mode: ecran

Iată designul final.

Stilul 5: tipul de scalare mare

Acest design al modulului de antet Divi introduce o modalitate simplă și eficientă de a crea text de dimensiuni mari, care se potrivește cu fereastra browserului fără a compromite designul. Deoarece utilizăm un modul de antet cu lățime completă, va trebui să ne extindem puțin zona de conținut. Apoi, trebuie să folosim unitatea de lungime vw pentru a ne dimensiona textul. Acest design ar fi minunat pentru antetele de secțiune.

Pentru a începe, creați o nouă secțiune cu lățime completă cu un antet cu lățime completă.

În setările antetului pentru lățime completă, actualizați următoarele:

Titlu: Consultare
Textul subtitlului: Servicii
Butonul # 1 Text de legătură: începeți acum

Ștergeți textul implicit din caseta de conținut.

Apoi adăugați o imagine ușoară a logo-ului.

În continuare, vom crește lățimea maximă implicită a containerului de antet pentru a crea mai mult spațiu orizontal pentru antetul dvs. Pentru aceasta, accesați fila avansată și adăugați următorul CSS în Header Container:

width: 100% ;
max-width: 100% ;

Acum actualizați restul setărilor de proiectare după cum urmează:

Adăugați o imagine de fundal.
Orientare text și siglă: centru
Titlu Font: Cuprum
Greutatea fontului titlului: Bold
Titlu Stil Font: TT
Culoarea textului titlului: #bfbfbf
Dimensiunea textului titlului: 10vw
Spațiere litere titlu: 0,1em
Font Subhead: Cuprum
Alinierea textului subtitrului: dreapta (aceasta ajută la centrarea textului cu spațiere între litere)
Dimensiunea textului subtitrului: 3vw
Spațierea literelor secundare: 7.8vw
Lățimea butonului One Border: 0px
Butonul One Font: Cuprum
Pictogramă Buton One: vezi captura de ecran

Trucul este să folosiți unitatea de lungime vw pentru text. Apoi reglați spațiul dintre litere pentru a se alinia cu textul titlului cât mai bine.

Pentru a maximiza distanța orizontală, trebuie să adăugăm o lățime personalizată la conținutul antetului, după cum urmează:

Lățimea conținutului: 80%;

Chiar dacă acest lucru este mai mic decât valoarea implicită de 100%, modificarea setării va suprascrie valoarea implicită și se va regla cu css-urile personalizate pe care le-am adăugat mai devreme.

În cele din urmă, adăugați o umbră de casetă pentru a finaliza designul:

Box Shadow: vezi captura de ecran
Puterea neclarității umbrei cutiei: 0 px
Puterea răspândirii umbrei cutiei: 60 px

Acum verificați rezultatul final.

Transformați-le în anteturi cu ecran complet!

Desenele de mai sus pot fi realizate cu ușurință pe ecran complet cu un clic de buton. Aceasta este o caracteristică puternică a modulului de antet cu lățime completă. Pur și simplu accesați setările de proiectare a antetului și selectați opțiunea „Creați ecran complet”.

De asemenea, va trebui să eliminați căptușeala personalizată pentru aceste modele, pentru ca antetul să se potrivească perfect în fereastra browserului.

Gânduri finale

Acestea sunt doar câteva dintre posibilitățile de proiectare a antetului disponibile cu modulul de antet Divi. Și experimentarea cu toate setările de proiectare poate fi foarte distractiv. În orice caz, sper că aceste exemple vă vor servi ca o mică inspirație pentru următorul dvs. proiect.

Aștept cu nerăbdare să aud de la dvs. în comentariile de mai jos.

Noroc!