Cum să creați o secțiune de erou frumos pentru site-ul dvs. personal cu Divi

Crearea unui site personal este atât distractiv, cât și provocator. Vrei ca site-ul tău web să arate suficient de atrăgător și personal pentru a-ți spune povestea. Și, în același timp, vrei să ai un site frumos și autentic care să arate că știi ce faci.

Pentru a vă ajuta cu procesul creativ de creare a unui astfel de site web personal, am creat o frumoasă secțiune erou care va face cu siguranță site-ul dvs. să iasă în evidență. În această postare, vă vom arăta pas cu pas cum să creați acel rezultat folosind altceva decât setările încorporate ale Divi pentru fiecare dintre pași. Înainte de a ne scufunda în tutorial, să aruncăm o privire asupra rezultatului.

Rezultat pe desktop

Rezultatul de pe desktop arată astfel:

Rezultat pe mobil

Și vizitatorii care vizitează site-ul web pe mobil vor vedea următorul rezultat:

Cum să creați o secțiune de erou frumos pentru site-ul dvs. personal cu Divi

Abonați-vă la canalul nostru Youtube

Creați secțiune

Începeți prin a crea o nouă pagină pe site-ul dvs. WordPress, activând Divi Builder, trecând la Visual Builder și adăugând o nouă secțiune la acesta.

Fundal de gradient

Singurul lucru pe care va trebui să îl modificați în această secțiune este fundalul. Acest fundal se va aplica tuturor rândurilor pe care le vom adăuga în pașii următori ai acestei postări. Deschideți subcategoria Background și adăugați următorul fundal de gradient:

• Prima culoare: # c2c6f3
• Second Color: # cea5b9
• Tipul gradientului: radial
• Direcție radială: centru
• Poziția inițială: 45%
• Poziție finală: 45%

Adăugați primul rând

Apoi, continuați și adăugați primul rând la secțiune. Acest rând va include doar modulul de text pe care îl puteți vedea în partea de sus a aspectului.

Structura coloanei

Apoi, alegeți o structură de coloană cu o coloană.

Dimensionare

Treceți la fila Proiectare a setărilor rândului dvs. și utilizați următoarele setări pentru subcategoria Dimensionare:

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Modul text

Așa cum am menționat anterior, acest rând va avea nevoie doar de un modul text.

Setări text

După ce ați introdus textul pe care doriți să-l apăreați în fila Conținut, accesați fila Proiectare și aplicați următoarele setări pentru subcategoria Text:

• Font text: Arizonia
• Greutatea fontului textului: regulat
• Dimensiune text: 150 (desktop), 80 (tabletă), 70 (telefon)
• Culoare text: rgba (255,255,255,0,39)
• Orientare text: centru

Adăugați al doilea rând

După ce ați finalizat primul rând, continuați și adăugați un al doilea rând în aceeași secțiune.

Structura coloanei

La fel ca rândul anterior, acest rând va avea doar o singură coloană.

Imagine de fundal

Deschideți setările de rând și adăugați imaginea personală pe care doriți să o utilizați ca imagine de fundal pentru prima coloană. Asigurați-vă că poziția imaginii este setată și la „Centru”.

Dimensionare

Apoi, deschideți subcategoria Dimensionare și efectuați următoarele modificări:

• Utilizați lățimea personalizată: da
• Lățime personalizată: 557 px

Spațiere

Apoi, utilizați „0px” pentru partea de sus, jos, dreapta și stânga a rândului.

Box Shadow

În cele din urmă, aplicați următoarea casetă Shadow:

• Poziție orizontală a umbrei cutiei: 0 px
• Box Shadow Vertical Position: 2 px
• Puterea neclarității umbrei cutiei: 53 px
• Puterea răspândirii umbrei cutiei: 10 px
• Culoare umbră: rgba (0,0,0,0,3)
• Poziția umbrei: Umbra exterioară

Modul text

Odată ce setările de rând sunt finalizate, continuați și adăugați un modul de text în coloană.

Culoare de fundal

În primul rând, acest modul text va avea nevoie de o culoare de fundal cu culoarea „rgba (0,0,0,0.66)”.

Setări text

Apoi, treceți la fila Design și efectuați următoarele modificări pentru subcategoria Text:

• Font text: Andika
• Greutatea fontului textului: Bold
• Stil de text text: majuscule
• Dimensiune text: 78 px (desktop), 70 px (tabletă), 50 px (telefon)
• Culoarea textului: # c2c6f3
• Înălțimea liniei de text: 1em
• Orientare text: centru

Frontieră

Apoi, deschideți subcategoria Border și utilizați următoarea margine:

• Utilizați chenarul: Da
• Culoare margine: # c2c6f3
• Lățimea chenarului: 8 px
• Stilul chenarului: solid

Spațiere

Continuând, adăugați următoarea marjă și umplere:

• Marja sus, dreapta, jos și stânga: 50 px
• Căptușeală superioară: 200 px
• Căptușeală inferioară: 200 px

Box Shadow

În cele din urmă, utilizați următoarea casetă Shadow la modulul text:

• Poziție orizontală a umbrei cutiei: 0 px
• Box Shadow Vertical Position: 0px
• Puterea neclarității umbrei cutiei: 0 px
• Puterea răspândirii umbrei cutiei: 50 px
• Culoare umbră: rgba (206.165.185,0.41)
• Box Shadow Position: Outer Shadow

Adăugați al treilea rând

Așa cum am menționat anterior, folosim o singură secțiune pentru acest tutorial. Motivul din spate este că dorim ca fundalul gradient al secțiunii să fie răspândit pe tot conținutul diferit care este distribuit. Continuați și adăugați un rând nou.

Structura coloanei

Selectați două coloane pentru acest rând.

Dimensionare

Apoi, activați opțiunea „Utilizați lățimea personalizată” și aplicați o lățime de „663px”.

Spațiere

În cele din urmă, adăugați o marjă superioară și inferioară de „50 px”.

Primul modul de text

Adăugați un prim modul de text la prima coloană a rândului.

Setări text

Apoi, accesați fila Design, utilizați „Andika” ca font text și „Regular” ca greutate font text.

Clonați modulul text și plasați-l în a doua coloană

Modulul de text din a doua coloană are exact aceleași setări, așa că mergeți mai departe, clonați modulul de text și plasați-l în a doua coloană.

Adăugați al patrulea rând

Mai rămâne încă un rând de adăugat la secțiune înainte de finalizarea proiectării.

Structura coloanei

Acest nou rând are și două coloane.

Dimensionare

Deschideți Setările rândului și efectuați următoarele setări pentru subcategoria Dimensionare:

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Spațiere

Apoi, adăugați o căptușeală superioară de 20 px.

Primul modul de imagine

Continuați și adăugați un prim modul de imagine la prima coloană a acestui ultim rând.

Box Shadow

Și adăugați următoarea casetă Shadow:

• Poziție orizontală a umbrei cutiei: -6px
• Box Shadow Vertical Position: 2 px
• Puterea neclarității umbrei cutiei: 53 px
• Puterea răspândirii umbrei cutiei: 10 px
• Culoare umbră: rgba (0,0,0,0,3)
• Box Shadow Position: Outer Shadow

Clonați modulul de imagine și plasați în a doua coloană

Și, în sfârșit, clonați acest modul de imagine și plasați-l și în a doua coloană pentru a finaliza acest rând.

Rezultat

După ce parcurgeți toți pașii pe care i-am adăugat la această postare, ar trebui să puteți obține următorul rezultat:

Pe desktop

Pe mobil

Gânduri finale

Posibilitățile pe care le ai cu Divi sunt nelimitate. Puteți face site-ul dvs. să arate exact așa cum doriți, utilizând Visual Builder care vă va arăta modificările în timp real. În special pentru această postare, v-am arătat cum ați putea crea o frumoasă secțiune erou pentru un site personal. Acest tutorial a fost realizat folosind altceva decât opțiunile încorporate ale Divi. Dacă aveți întrebări sau sugestii; asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!

Asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să nu pierdeți niciodată un anunț mare, un sfat util sau un cadou gratuit Divi!