Cum să stilați fundalul modulului antet cu lățime completă

Publicat: 2022-09-28

Modulul Fullwidth Header al Divi facilitează proiectarea unei secțiuni eroi uimitoare pentru site-ul dvs. în doar câteva minute. O secțiune erou este prima secțiune a site-ului dvs. pe care o vor vedea vizitatorii dvs., așa că veți dori ca aceasta să fie de marcă, informativă și convingătoare. Din fericire, antetul Divi Fullwidth vine plin cu opțiuni de conținut: text de antet, text de subtitrare, text de corp, două imagini și două butoane. Vom folosi toate aceste elemente în anteturile noastre cu lățime completă astăzi.

În această postare, vom demonstra 3 moduri de a proiecta fundalul antetului cu lățime completă cu modele atrăgătoare. Sunteți gata să începeți? Să ne scufundăm!

Previzualizare design

Să aruncăm o privire la cele 3 anteturi cu lățime completă pe care le vom proiecta astăzi.

Comunitatea Divi Bushcraft

Primul design folosește opțiunile de imagine de fundal ale Divi pentru a crea un fundal texturat care este unic și potrivit pentru comunitatea Bushcraft.

Clasa a II-a a doamnei Nicole

Acest al doilea design folosește o imagine de fundal și un gradient de fundal pentru a crea un antet de bun venit curat, modern și proaspăt pentru clasa a II-a a doamnei Nicole.

Antet agent imobiliar

Al treilea design utilizează o imagine de fundal, un gradient de fundal și un model de fundal, toate combinate pentru a crea un design ridicat, dar subtil pentru pagina de pornire a unui agent imobiliar.

Descărcați layout-urile GRATUIT

Pentru a pune mâna pe modelele din acest tutorial, mai întâi va trebui să îl descărcați folosind butonul de mai jos. Pentru a obține acces la descărcare, va trebui să vă abonați la newsletter-ul nostru utilizând formularul de mai jos. Ca nou abonat, vei primi și mai multă bunătate Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „reabonat” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele
Descarcă gratis

Descarcă gratis

Alăturați-vă buletinului informativ Divi și vă vom trimite prin e-mail o copie a pachetului Divi Landing Page Layout, plus o mulțime de alte resurse, sfaturi și trucuri Divi uimitoare și gratuite. Urmăriți-vă și veți deveni un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, introduceți adresa de e-mail mai jos și faceți clic pe descărcare pentru a accesa pachetul de layout.

Te-ai abonat cu succes. Vă rugăm să vă verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele săptămânale gratuite de layout Divi!

Pentru a importa șablonul de antet în biblioteca Divi, procedați în felul următor:

  1. Navigați la Divi Theme Builder.
  2. Faceți clic pe butonul Import din partea dreaptă sus a paginii.
  3. În fereastra pop-up de portabilitate, selectați fila de import
  4. Alegeți fișierul de descărcare de pe computer (asigurați-vă că dezarhivați mai întâi fișierul și utilizați fișierul JSON).
  5. Apoi faceți clic pe butonul de import.

Odată terminat, aspectul secțiunii va fi disponibil în Divi Builder.

Să trecem la tutorial, da?

Ce aveți nevoie pentru a începe

Pentru a începe, va trebui să faceți următoarele:

  1. Instalați Divi pe site-ul dvs. WordPress.
  2. Adăugați o pagină, dați-i un titlu și publicați-o.
  3. Activați Visual Builder.

Configurarea paginii noastre

Odată ce faceți clic pe butonul „Utilizați Divi Builder”, pagina se va reîncărca utilizând interfața de trage și plasare a constructorului Divi. Vor apărea trei opțiuni și, pentru scopurile de astăzi, selectați „Build From Scratch”, astfel încât să avem o tablă goală în care să putem construi antetele noastre cu lățime completă.

Cum să proiectați antetul comunității Divi Bushcraft Fullwidth

Adăugați o secțiune Fulldwith și un antet Fullwidth

Mai întâi, va trebui să adăugăm o secțiune cu lățime completă la pagina noastră. Faceți clic pe pictograma „+” pentru a afișa opțiunile secțiunii, apoi faceți clic pe „Fullwidth”. Aceasta va încărca biblioteca de module cu lățime completă, unde puteți selecta „Antet cu lățime completă” din opțiuni. Acest lucru va încărca modulul antet cu lățime completă în pagina dvs.

Adăugați Conținutul

Acum vom adăuga conținutul modulului nostru în fila Text. Configurați următoarele setări:

  1. Text antet: Comunitatea Divi Bushcraft
  2. Text subtitrare: Divi Bushcraft
  3. Butonul #1: Înscrieți-vă astăzi
  4. Butonul #2: Aflați mai multe
  5. Textul corpului: At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.

Stilați fundalul

Acest design folosește o imagine de fundal din pachetul de layout prefabricat gratuit Divi Bushcraft. Puteți obține toate imaginile din acel pachet de aspect în această postare. Pur și simplu derulați până la capătul postării și faceți clic pentru a descărca imaginile de înaltă rezoluție.

Adăugați o imagine de fundal

După ce aveți fotografiile, adăugați o imagine de fundal.

  1. Faceți clic pe a treia pictogramă, pictograma imagine.
  2. Faceți clic pe „Adăugați imagine de fundal”. Aceasta va afișa biblioteca media unde puteți încărca o nouă fotografie sau puteți selecta o fotografie din biblioteca dvs. media.
  3. Setați modul de amestecare a imaginii de fundal la Overlay .
  4. Faceți clic pe prima pictogramă, pictograma găleată de vopsea și setați o culoare de fundal: rgba(10,10,10,0.3)

Alegeți aspectul

Sub setările de proiectare, în fila Aspect, selectați alinierea la centru. Comutați opțiunea „Faceți ecran complet” la „da”.

Stil Titlu Text

Stilați textul titlului configurând aceste setări:

  1. Titlu Titlu Nivel: H1
  2. Font de titlu: Josefin Sans
  3. Greutatea fontului titlului: aldine
  4. Stilul fontului titlului: majuscule
  5. Dimensiunea textului titlului: 7rem

Style Body Text

Stilați corpul textului configurând aceste setări:

  1. Font pentru corp: Josefin Sans
  2. Dimensiunea textului corpului: 20px

Stil Subtitrare Text

Stilați textul subtitrării configurând aceste setări:

  1. Font subtitrare: Josefin Sans
  2. Greutatea fontului subtitrării: semi-aldine
  3. Stil font subtitrare: majuscule
  4. Spațiere dintre litere de subtitrare: 3px
  5. Înălțimea liniei de subtitrare: 5em

Butonul de stil #1

Acum să stilăm butoanele! Pentru butonul unu, configurați aceste setări:

  1. Utilizați stiluri personalizate pentru butonul unu: da
  2. Buton One Text Size: 14px
  3. Culoarea textului butonului One: #666b4a
  4. Buton Un fundal: #ead5a4
  5. Lățimea chenarului unui buton: 0px
  6. Buton One Raza chenar: 0px
  7. Spațiere dintre butoane și litere: 3px
  8. Buton Un stil de font: majuscule
  9. Buton One Padding: 15px sus și jos; 25px la stânga și la dreapta.

Butonul de stil #2

Pentru a stila butonul #2, configurați următoarele setări:

  1. Utilizați stiluri personalizate pentru butonul unu: da
  2. Buton One Text Size: 14px
  3. Culoarea textului butonului One: #ead5a4
  4. Buton Un fundal: #666b4a
  5. Lățimea marginii unui buton: 0px
  6. Buton One Raza chenar: 0px
  7. Spațiere dintre butoane și litere: 3px
  8. Buton Un stil de font: majuscule
  9. Buton One Umplutură: 15px sus și jos; 25px la stânga și la dreapta.

Și voila! Aveți un antet cu lățime completă frumos, cu o imagine de fundal texturată cu o suprapunere pentru Comunitatea Divi Bushcraft.

Cum să proiectați antetul cu lățime completă al doamnei Nicole

Acum să proiectăm un antet cu lățime completă pentru clasa a II-a a doamnei Nicole! Acest antet folosește o imagine de fundal și un gradient pentru a crea un design distractiv și proaspăt. Să începem!

Adăugați o pagină nouă, apoi adăugați o secțiune cu lățime completă și un antet cu lățime completă

Mai întâi, va trebui să adăugăm o secțiune cu lățime completă la pagina noastră. Faceți clic pe pictograma „+” pentru a afișa opțiunile secțiunii, apoi faceți clic pe „Fullwidth”. Aceasta va încărca biblioteca de module cu lățime completă, unde puteți selecta „Antet cu lățime completă” din opțiuni. Acest lucru va încărca modulul antet cu lățime completă în pagina dvs.

Adăugați Conținutul

Acum vom adăuga conținutul modulului nostru în fila Text. Configurați următoarele setări:

  1. Text antet: Bun venit la clasa a II-a a doamnei Nicole
  2. Text subtitrare: Bun venit
  3. Butonul #1: Vedeți teme
  4. Butonul #2: Contactați-o pe doamna Nicole
  5. Textul corpului: Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat.

Stilați fundalul

Acest design folosește imagini din pachetul de layout gratuit Classroom. Puteți descărca imaginile la rezoluție completă derulând până la partea de jos a acestei postări.

Stilați fundalul configurând aceste setări:

  1. Faceți clic pe a doua filă, pictograma gradient.
  2. Setați opririle de gradient la: #ffffff la 40% și transparent la 18%.
  3. Setați direcția gradientului la 219 de grade.
  4. Comutați „da” pentru Gradientul de poziție deasupra imaginii de fundal.
  5. Faceți clic pe a treia pictogramă, pictograma imagine și faceți clic pe „Adăugați imagine de fundal”.

Alegeți aspectul

Aici vom alinia conținutul modulului la centru și îl vom face pe ecran complet.

  1. Alinierea textului și a siglei: Centru
  2. Faceți ecran complet: da

Stilați textul titlului

Stilați textul titlului configurând aceste setări:

  1. Font titlu: Candal
  2. Dimensiunea textului titlului: 4rem

Stilați textul corpului

Stilați corpul textului configurând aceste setări:

  1. Font pentru corp: Montserrat
  2. Culoarea textului corpului: #6d6d6d
  3. Dimensiunea textului corpului: 20px

Stilează textul subtitrarilor

Stilați textul subtitrării configurând aceste setări:

  1. Greutate font subtitrare: Ultra Bold
  2. Stil font subtitrare: majuscule
  3. Culoare text subtitrare: rgba(28,10,10,0.6)
  4. Spațiere dintre litere de subtitrare: 3px
  5. Înălțimea liniei de subtitrare: 3em

Butonul de stil #1

Butonul de stil #1 prin configurarea acestor setări:

  1. Utilizați stiluri personalizate pentru butonul unu: da
  2. Buton One Text Size: 15px
  3. Culoarea textului butonului One: #ffffff
  4. Buton Un fundal: #000000
  5. Lățimea marginii unui buton: 0px
  6. Buton One Raza chenar: 0px
  7. Spațiere dintre butoane și litere: 3px
  8. Buton One Greutate font: Ultra Bold
  9. Buton Un stil de font: majuscule
  10. Buton One Padding: 15px sus și jos; 25px la stânga și la dreapta.

Butonul de stil #2

Butonul de stil #2 prin configurarea acestor setări:

  1. Utilizați stiluri personalizate pentru butonul doi: da
  2. Dimensiunea textului butonului doi: 15px
  3. Culoarea textului butonului doi: #ffd078
  4. Buton doi Fundal: transparent
  5. Lățimea chenarului butonului doi: 0px
  6. Raza chenarului butonului doi: 0px
  7. Buton Spațiere cu două litere: 3px
  8. Greutatea fontului cu două butoane: Ultra Bold
  9. Butonul doi stil de font: majuscule
  10. Culoarea pictogramei butonul doi: #ffd078
  11. Afișați doar pictograma la trecerea cursorului pentru butonul doi: Nu
  12. Buton Two Umplutură: 15px sus și jos; 25px la stânga și la dreapta.

Dimensiunea

Setați lățimea conținutului la 70%.

Voila! Acum aveți un antet complet proiectat pentru clasa a II-a a doamnei Nicole.

Cum să proiectați antetul cu lățime completă al unui agent imobiliar

Să proiectăm acest antet elegant și modern pentru site-ul web al unui agent imobiliar. Această secțiune utilizează o imagine de fundal, un gradient de fundal ȘI un model de fundal. Sa trecem la treaba!

Adăugați o pagină nouă, apoi adăugați o secțiune cu lățime completă și un antet cu lățime completă

Mai întâi, va trebui să adăugăm o secțiune cu lățime completă la pagina noastră. Faceți clic pe pictograma „+” pentru a afișa opțiunile secțiunii, apoi faceți clic pe „Fullwidth”. Aceasta va încărca biblioteca de module cu lățime completă, unde puteți selecta „Antet cu lățime completă” din opțiuni. Acest lucru va încărca modulul antet cu lățime completă în pagina dvs.

Adauga continut

Mai întâi, să adăugăm conținutul necesar pentru acest modul în fila Text:

  1. Titlu: Haideți să vă găsim casa de vis
  2. Subtitrare: Dave Merrit – Agent imobiliar
  3. Butonul #1 – Rezervați o consultație gratuită
  4. Butonul #2 – Trimite-mi un e-mail
  5. Body Text: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.

Stilați fundalul

Adăugați un gradient

În fila de fundal, faceți clic pe a doua pictogramă, pictograma gradient și configurați aceste setări:

  1. Opriri de gradient: rgba(56,65,58,0.74) la 100% și #38413a la 70%
  2. Direcție gradient: 88 de grade
  3. Plasați gradient deasupra imaginii de fundal: da

Adauga imagine

Faceți clic pe a treia pictogramă, pe pictograma imagine, apoi faceți clic pe „Adăugați imagine de fundal” pentru a încărca imaginea. Această demonstrație folosește imagini din pachetul gratuit de layout pre-realizat pentru agent imobiliar. Puteți descărca imaginile la rezoluție completă derulând până la partea de jos a acestei postări.

Adăugați un model de fundal

Adăugați un model de fundal configurând aceste setări:

  1. Selectați Tufted din meniul drop-down.
  2. Culoare model: rgba(0,0,0,0.2)

Alegeți aspectul

Aici vom alinia conținutul modulului la centru și îl vom face pe ecran complet.

  1. Alinierea textului și a siglei: Centru
  2. Faceți ecran complet: da

Stilați textul titlului

Stilați textul titlului configurând aceste setări:

  1. Font de titlu: Merriweather
  2. titlu Dimensiunea textului: 5rem

Stilați textul corpului

Stilați corpul textului configurând aceste setări:

  1. Font pentru corp: Open Sans
  2. Dimensiunea textului corpului: 16 px
  3. Înălțimea liniei corpului: 2em

Stilați textul subtitrarilor

Stilați textul subtitrării configurând aceste setări:

  1. Font subtitrare: Open Sans
  2. Greutate font subtitrare: aldine
  3. Stil font subtitrare: majuscule
  4. Culoare text subtitrare: #b4926b
  5. Spațiere dintre litere de subtitrare: 3px

Butonul de stil #1

Butonul de stil #1 prin configurarea acestor setări:

  1. Utilizați stiluri personalizate pentru butonul unu: da
  2. Buton One Text Size: 18px
  3. Buton Un fundal: #b4926b
  4. Lățimea marginii unui buton: 0px
  5. Buton One Raza chenar: 0px
  6. Buton One Padding: 10px sus și jos; 25px la stânga și la dreapta.

Butonul de stil #2

Butonul de stil #2 prin configurarea acestor setări:

  1. Utilizați stiluri personalizate pentru butonul doi: da
  2. Dimensiunea textului butonului doi: 18px
  3. Lățimea chenarului butonului doi: 1px
  4. Culoarea chenarului cu două butoane: rgba(255,255,255,0.19)
  5. Raza marginii butonului doi: 0x
  6. Buton Two Umplutură: 10px sus și jos; 25px la stânga și la dreapta

Voila! Acum aveți un antet frumos pentru un site web de agent imobiliar.

Gânduri finale

Antetul Divi Fullwidth este o modalitate rapidă și ușoară de a crea o secțiune uimitoare pentru site-ul dvs. web. Deoarece secțiunile eroi ale site-ului web sunt atât de esențiale pentru a face o primă impresie grozavă, este important ca designul dvs. să fie de marcă, atrăgător și informativ. Cu Antetul Fullwidth, este ușor să construiți un antet care atinge toate aceste obiective într-un singur modul. Acum că ați văzut ce este posibil cu antetul Fullwidth, cum îl veți proiecta pe al dvs.?