Divi: Cum să utilizați modulul Fullwidth Header pentru a crea o secțiune Hero

Doriți să creați o secțiune Hero Divi cu modulul Fullwidth Header sau să creați unul singur?

Construiește o secțiune de erou a site-ul web de la zero sau folosind modulul Divi Fullwidth Header sunt cele două moduri de a crea un design atrăgător pentru dvs. site-ul web. 

În acest articol, vom analiza avantajele și dezavantajele utilizării unui modul Fullwidth Header față de crearea propriei secțiuni Hero cu Divi.

Să mergem!

Importanța secțiunilor eroi ale site-ului web

O secțiune Hero este prima secțiune pe care o aveți vizitatori vezi când ajung pe tine site-ul web. Acesta este adesea un banner cu lățime completă și poate fi numit și Header erou. Este un loc proeminent pe site-ul dvs., deoarece are puterea de a lăsa o primă impresie de durată.

Citiți și: Divi: Cum să afișați modulul Fullwidth Header pe ecran complet

Prin urmare, este important ca acesta să fie conceput astfel încât să fie ușor de citit, în același timp atrăgător și convingător. Secțiunile Website Hero sunt importante deoarece pot atrage atenția potențialilor clienți, pot descrie rapid o pagină și pot duce la un angajament suplimentar și potențiali clienți potențiali. Secțiunile pentru eroi ar trebui să aibă o marcă, să includă un titlu H1 și un CTA.

Creați o secțiune Hero de la zero

Proiectarea unei secțiuni Hero de la zero vă permite să aveți control complet asupra designului și cuprins. În funcție de situația și nevoile dvs., aceasta ar putea fi o soluție excelentă pentru site-ul dvs. 

Să aruncăm o privire la avantajele și dezavantajele acestei abordări.

Avantajele acestei abordări

În primul rând, să ne uităm la beneficiile construirii unei secțiuni Hero de la zero folosind Divi.

• Control complet al designului
• Utilizați orice modul Divi

Dezavantajele acestei abordări

Acum să ne uităm la dezavantajele creării unei secțiuni eroi de la zero.

• Trebuie să construiești de la zero
• Necesită mai multe moduri

Creați o secțiune Hero cu modulul Divi Fullwidth Header

Crearea unei secțiuni erou folosind modulul Divi Fullwidth Header facilitează crearea unui design atrăgător, receptiv pentru mobil în doar câteva minute. 

Să aruncăm o privire la avantajele și dezavantajele acestei abordări.

Avantajele acestei abordări

Să aruncăm o privire la beneficiile construirii unei secțiuni Hero cu modulul Divi Fullwidth Header.

• Toate cuprins este într-un singur modul
• Design deja optimizat

Dezavantajele acestei abordări

Acum să evaluăm dezavantajele proiectării unei secțiuni Hero cu modulul Divi Fullwidth Header.

• Mai puțină flexibilitate cu design

Modulul Divi Fullwidth Header vine cu opțiuni pentru cuprins predefinite, în timp ce multe pot fi limitate dacă doriți să adăugați un conținut care nu este disponibil în modul. Aceasta înseamnă că veți avea mai puțină flexibilitate cu designul general.

Construcția celor două secțiuni Hero pas cu pas

Acum că înțelegeți avantajele și dezavantajele ambelor abordări, să construim fiecare secțiune Hero, astfel încât să puteți vedea exact cum funcționează fiecare abordare.

Creați o pagină nouă cu Divi Builder

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

1. Instalați Divi  pe site-ul dvs. WordPress.
2. Adaugă o pagină și dă-i un titlu.
3. Activați generatorul vizual

Creează-ți secțiunea Hero de la zero

Acum că pagina noastră este configurată, să începem să creăm o secțiune eroă de la zero.

Descărcați DIVI acum!!!

Activați „Divi Builder”

Pentru a folosi generatorul de glisare și plasare al Divi, va trebui să activăm Visual Builder făcând clic pe butonul „Utilizați DiviBuilder”. Aceasta va reîncărca pagina folosind Divi Visual Builder.

Selectați: Construiți de la zero

Acum că pagina dvs. s-a reîncărcat cu generatorul vizual activat, faceți clic pe opțiunile „ CONSTRUIRE DE LA ZAZĂ astfel încât să avem o pagină goală cu care să lucrăm atunci când proiectăm.

Adăugați rând și configurați coloanele

Creați un rând cu următoarea structură de coloană.

Adăugați modificări

Acum să adăugăm modulele de conținut de care vom avea nevoie.

• 2 module de text, divizor, un buton în coloana din stânga
• 1 Modul de imagine în coloana din mijloc
• 1 Modul de imagine în coloana din dreapta

Secțiunea de stil

Acum să configuram setările secțiunii.

Adăugați o secțiune, apoi configurați următoarele setări:

• Fundal: #1d1d25

Stilul textului antetului

Personalizați textul antetului:

• Titlul 1:
  • Greutatea fontului: semi-aldine
  • Culoare text: #ffffff
  • Dimensiunea textului: 90px
  • Înălțimea liniei: 1,1 em

separator

Configurați setările divizorului:

• Culoare linie: rgba(255,255,255,0.3)
• Greutate separator: 10px
• Lățimea maximă: 260 px

corpul textului

Personalizați corpul textului:

• Culoare text: rgba(255,255,255,0.7)
• Dimensiunea textului: 13px
• Înălțimea liniei: 1,8 em

buton

Acum să personalizăm butonul.

În fila Buton:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiunea textului butonului: 14px
• Culoare text: #ffffff
• Fundalul butonului:
• Lățimea chenarului: 0 pixeli
• Raza chenarului: 0 pixeli

În fila Spațiere:

• Sus și jos: 40px
• Stânga și dreapta: 20px

Adăugați imagini

Adăugați imaginile la modulele de imagine.

Ajustați setările liniei

Parametrii în linie:

• Marja (stânga): 15vw

Ajustați a doua coloană

În a doua coloană, configurați aceste setări:

CSS personalizate

Lipiți următorul cod în secțiunea de cod a elementului principal:

argin-right: -15vw!important;
z-index: 100!important;

spaţierea

Adăugați 100 de pixeli de umplutură superioară.

Iata ! Acum aveți o secțiune Ero personalizată complet proiectată.

Descărcați DIVI acum!!!

Creați-vă secțiunea Hero cu modulul Fullwidth Header al Divi

Acum să vedem cum să recreați această secțiune Hero folosind modulul Fullwidth Header al Divi.

Descărcați DIVI acum!!!

Adăugați o pagină și selectați Build From Scratch

Adăugați o pagină nouă, dați-i un titlu, apoi faceți clic pe „Utilizați Divi Builder”, apoi selectați Build From Scratch.

Inserați o secțiune cu lățime completă și un antet cu lățime completă

Introduceți secțiunea Lățime maximă, apoi selectați Antet cu lățime completă în biblioteca de module.

Conținut

Adăugați conținutul textual la modul în fila Text.

imagini

Adăugați imaginile în fila de imagini.

Schimbați culoarea de fundal

În fila de fundal, configurați următoarea setare:

• Fundal: #1D1D25

Antet

Configurați setările pentru textul antetului:

• Greutatea fontului titlului: aldine
• Dimensiunea textului: 90px

corpul textului

Configurați setările pentru textul corpului:

• Culoarea textului corpului: rgba(255,255,255,0.55)

Subtitrare text

Configurați setările textului subtitrării:

• Greutate font subtitrare: aldine
• Culoare text: #4C594C
• Spațiere între litere: 3px

butoane

Acum să personalizăm cele două butoane.

butonul unu

În fila Button One, configurați următoarele setări:

• Utilizați stiluri personalizate pentru butonul unu: da
• Butonul Unu
  • Fundal: #4c594c
  • Lățimea chenarului: 0 pixeli
  • Raza chenarului: 0px
  • Afișați pictograma: DA
  • Afișați doar pictograma la trecerea cursorului: Nu
  • Umplutură: 25 pixeli (Sus și Jos); 25 px (stânga), 50 px (dreapta)

Butonul doi

În fila Buton Two, configurați următoarele setări:

• Utilizați stiluri personalizate pentru butonul doi: DA
• Lățimea chenarului butonului doi: 0 pixeli
• Raza chenarului: 0px
• Umplutură: 25 px (sus, jos, stânga și dreapta)
• Button Box Shadow: Alegeți a 4-a
• Umbră casetă Poziție orizontală: 0px
• Poziție verticală a umbrei casetei: 2px
• Culoare umbră: #ffffff

Iata ! Acum aveți o secțiune Hero complet proiectată folosind modulul Divi Fullwidth Header.

Vezi si: Divi: Cum să creați tranziții de fundal între elemente

Descărcați DIVI acum!!!

Concluzie

Construirea unei secțiuni Hero cu Divi este ușoară, fie că construiți de la zero, fie că utilizați modulul Fullwidth Header. Ambele opțiuni vă permit să creați modele de antet uimitoare care captează interesul dvs vizitatori. 

În funcție de nevoile dvs. unice, oricare dintre opțiuni este o opțiune excelentă de luat în considerare atunci când vă aranjați secțiunea Hero. 

După ce ați citit argumentele pro și dezavantajele ambelor, cum ați proiecta 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.

Nu ezitați să consultați și ghidul nostru despre 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.

...