Cum să creați un design elegant al antetului cu paralelograme în Divi

Adăugarea unui nou design de antet elegant la pagina dvs. este o modalitate eficientă de a vă uimi vizitatorii. Iar proiectarea unui fundal unic pentru antetul dvs. este un loc minunat pentru a începe. În acest tutorial, vă voi arăta cum să utilizați Divi pentru a adăuga paralelograme la designul antetului dvs. folosind fundaluri de gradient în moduri creative. Acest lucru adaugă un element textural frumos designului care se desprinde de aspectul tradițional al cutiei.

Să începem.

Trage cu ochiul

Iată o privire asupra designului pe care îl vom construi.

Ce vei avea nevoie

Pentru a crea acest design, veți avea nevoie de lucruri principale:

1. Tema Divi
2. Compania de design interior Despre aspectul paginii (disponibilă în cadrul Divi Builder)

Configurați pagina

Pentru acest tutorial, voi folosi Compania de design interior Despre aspectul paginii pe o pagină nouă. Accesați tabloul de bord WordPress și navigați la Pagini> Adăugați un nou. Apoi dați titlului paginii dvs. și faceți clic pentru a utiliza Divi Builder. Apoi faceți clic pe buton pentru a implementa constructorul vizual. Selectați opțiunea „Alegeți un aspect premade”. Apoi găsiți și selectați pachetul de aspect interior. Alegeți aspectul paginii Despre și apoi faceți clic pe „Utilizați acest aspect”.

Odată ce pagina a fost încărcată în pagină, sunteți gata să începeți editarea.

Scoateți căptușeala superioară a secțiunii și înlocuiți imaginea de fundal

Acesta este un prim pas ușor. Tot ce trebuie să faceți este să plasați cursorul deasupra porțiunii de sus a secțiunii de antet de sus a paginii. Veți vedea că umplutura superioară actuală este setată la 10%. Pur și simplu trageți umplutura în jos la 0%. Sau puteți oricând să accesați setările paginii și să setați și umplutura personalizată de sus la 0%.

De asemenea, puteți schimba imaginea de fundal în acest moment, dar nu este necesar. Pentru a face acest lucru, accesați setările secțiunii și schimbați imaginea de fundal în fila conținut. Apoi scoateți gradientul de fundal. Acest lucru va face ca textul (care va fi alb) să fie mai ușor de citit pe mobil, deoarece va exista un text care se suprapune peste imaginea de fundal.

Reglați dimensiunea rândului și căptușeala

Apoi, accesați setările de rând și sub fila Proiectare, actualizați următoarele:

Utilizați lățimea personalizată: DA
Lățime personalizată: 100%
Căptușeală personalizată: 0px sus, 10vw jos

Adăugați fundal de gradient la rând și coloană

Pentru a crea acest design elegant, vom suprapune fundaluri degradate cu diferite poziții de pornire și oprire. Mai întâi trebuie să adăugăm un fundal de gradient la rând și apoi la coloană.

Accesați setările de rând din fila conținut și actualizați următoarele:

Culoarea din stânga a gradientului de fundal: # 1a1a1a
Culoarea dreaptă a gradientului de fundal: rgba (255,255,255,0)
Direcția gradientului: 45 grade
Poziția inițială: 60%
Poziție finală: 0%

Coloana 1 Gradient de fundal Culoare stânga: rgba (244,88,63,0.83)
Coloana 1 Gradient de fundal Culoare dreaptă: rgba (255,255,255,0)
Direcția gradientului coloanei: 45 grade
Poziția de început a coloanei: 66%
Poziția finală a coloanei: 0%

Gradientul portocaliu pe care l-am adăugat la coloană va fi utilizat pentru primul paralelogram din designul antetului nostru. Pentru a crea paralelogramul, trebuie să scurtăm gradientul portocaliu cu o latură stângă care este înclinată la 45 de grade pentru a se potrivi cu partea dreaptă. Vom face acest lucru adăugând un gradient la modulul de îndemn.

Reglarea dimensiunii textului și a spațiului modulului de îndemn

Înainte de a adăuga gradientul nostru de fundal la modulul de apel la acțiune, haideți să formăm mai întâi stilurile de spațiere și text.

Accesați setările modulului de îndemn și actualizați următoarele sub fila Proiectare:

Orientare text: stânga
Culoarea textului: deschis
Dimensiune text titlu: 4,5vw (desktop), 42 px (tabletă)
Culoarea textului butonului: # 1a1a1a
Culoarea fundalului butonului: #ffffff
Lățime: 100%
Resetați marginile
Împletire personalizată (desktop): 10vw sus, 5% stânga, 45% dreapta
Împletire personalizată (tabletă): 38% corect
Împletire personalizată (smartphone): 5% corect

Acum putem adăuga gradientul nostru de fundal la modulul nostru. Pentru a accelera acest proces, mergeți la setările rândului și faceți clic dreapta și copiați gradientul de fundal al rândului.

Apoi accesați setările modulului de îndemn, sub fila conținut, și faceți clic dreapta și lipiți gradientul de fundal în modul. Apoi reglați poziția de pornire la 47%.

După cum puteți vedea, acest lucru creează efectul unui dreptunghi unghiular lung care se suprapune pe fundalul degradat întunecat pentru un element de design unic.

Acesta ar fi un design grozav așa cum este acum, dar să mergem mai departe și să devenim și mai creativi adăugând un paralelogram suplimentar care se suprapune în partea de jos a rândului nostru.

Crearea unei paralelograme suplimentare utilizând module de text goale

Conceptul pentru această fază finală a designului antetului implică crearea a două module text unul lângă altul, fiecare cu un gradient personalizat care, atunci când este combinat, arată o singură „casetă” cu laturi la fel de unghiulare în dreapta și în stânga. Pentru a face acest lucru, trebuie mai întâi să creăm un rând cu o coloană pentru a menține modulele noastre de text. Apoi putem dimensiona și poziționa modulele noastre pentru a sta unul lângă altul.

Adăugați un rând cu o coloană direct sub secțiunea care conține modulul nostru de îndemn în aceeași secțiune.

Apoi adăugați un modul text în coloana din stânga și actualizați modulul text după cum urmează:

Ștergeți tot conținutul din caseta de conținut (vom folosi un modul de text gol)
Culoarea stânga a gradientului de fundal: rgba (255,255,255,0)
Culoare dreaptă a gradientului de fundal: rgba (58,80,107,0,83)
Direcția gradientului: 45 grade
Poziția inițială: 50%
Poziție finală: 0%

Acum sari peste fila de proiectare și actualizează următoarele:

Înălțimea liniei de text: 0em (aceasta va elimina orice spațiu nedorit)
Lățime: 50%
Marjă personalizată: -8vw sus, 0px jos
Căptușeală personalizată: 8vw sus, 8vw jos

Salvează setările.

Din constructorul vizual, copiați modulul și actualizați setările modulului text pentru noul modul după cum urmează:

Plasați cursorul peste previzualizarea gradientului de fundal și faceți clic pe pictograma „Comutare gradient” pentru a comuta culorile gradientului de la stânga la dreapta.

Alinierea modulului: dreapta
Marjă personalizată: -16vw sus, 0px jos

Salvează setările.

Acum că avem modulele aliniate, putem ajusta setările rândurilor pentru a ne poziționa modulele și le putem redimensiona pentru a se potrivi cu designul. Deschideți setările rândului și actualizați următoarele:

Alinierea rândurilor: la stânga
Utilizați lățimea personalizată: DA
Lățime personalizată: 45%
Marja personalizată: 30% rămas
Căptușeală personalizată: 0 px sus, 0 px jos

Cam asta o face! Verificați rezultatele finale.

Iată-l pe tabletă și smartphone.

Gânduri finale

Sper că această tehnică de proiectare vă va oferi puțină inspirație pentru modul în care puteți utiliza opțiunile de fundal de gradient Divi pentru a încorpora câteva paralelograme elegante în propriul design al antetului. Și, desigur, acest design nu se limitează la anteturi. Simțiți-vă liber să explorați zone noi în care acest design va funcționa pentru dvs. Pentru mai multă inspirație, consultați câteva secrete de proiectare a rețelei care vă pot ajuta pe parcurs.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!