Cum să creați titluri de secțiuni vibrante pentru următorul dvs. proiect Divi

Știm că majoritatea dintre voi căutați întotdeauna noi modalități de a face site-urile pe care le creați unice. Cu Divi, există multe modalități prin care site-ul dvs. se distinge de celelalte. Astăzi, vă vom arăta cum puteți crea titluri de secțiuni uimitoare folosind doar opțiunile încorporate ale Divi. Această abordare este excelentă dacă doriți să creați un design uimitor, să mențineți structura generală a paginii și să păstrați navigarea fără probleme.

Să ajungem la asta!

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire asupra rezultatului pe care ne propunem să îl obținem pe diferite dimensiuni de ecran:

Să începem să creăm!

Adăugați o nouă secțiune regulată

Spațiere

Începeți prin deschiderea unei pagini noi, trecerea la Visual Builder și adăugarea primei secțiuni. Fără să adăugați încă rânduri sau module, deschideți setările secțiunii și adăugați câteva umpluturi:

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând folosind următoarea structură de coloane:

Culoare de fundal

Deschideți apoi setările rândului și adăugați o culoare de fundal la întregul rând:

• Culoare fundal: # f9f9f9

Coloana 1 Gradient Background

Apoi, adăugați un fundal de gradient subtil la prima dvs. coloană. Acest lucru va ajuta la crearea suprapunerii titlurilor secțiunilor între coloane.

• Culoare 1: # 0031c4
• Culoare 2: # 00aeff
• Coloana 1 Direcție gradient: 125deg

Dimensionare

Schimbați și spațiul rândului pentru a vă asigura că ocupă întreaga lățime a ecranului.

• Faceți acest rând lățime completă: Da
• Utilizați lățimea jgheabului personalizat: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da

Spațiere

În cele din urmă, modificați setările de spațiu în funcție de diferitele dimensiuni ale ecranului:

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px
• Coloana 2 Căptușeală superioară: 200 px
• Coloana 2 Căptușeală inferioară: 200 px
• Coloana 2 Padding stânga: 350 px (desktop), 50 px (tabletă și telefon)
• Coloana 2 Căptușeala dreaptă: 50 px

Adăugați modulul de text al titlului secțiunii în coloana 1

Setări text H2

Acum că toate setările rândurilor sunt la locul lor, putem începe să adăugăm module. Vom începe cu prima coloană. Aici, singurul modul de care avem nevoie este un modul de text. După adăugarea conținutului H2 în caseta Conținut, continuați și modificați setările de text H2:

• Titlul 2 Greutate font: Ultra Bold
• Titlul 2 Stil font: majuscule
• Titlul 2 Aliniere text: centru
• Rubrica 2 Culoarea textului: #ffffff
• Rubrica 2 Dimensiune text: 150 px
• Titlul 2 Înălțimea liniei: 1.25em
• Titlul 2 Text Shadow Vertical Lungime: -0.55em
• Titlul 2 Culoare umbră text: rgba (0,255,255,0,25)

Spațiere

Suprapunerea dintre coloane este diferită pe desktop, tabletă și telefon. Pentru a crea suprapunerea, vom face câteva modificări la setările de spațiu ale modulului nostru de text:

• Marja superioară: 325 px (desktop), 150 px (tabletă și telefon)
• Marja inferioară: 325 px, -120 px (tabletă), -110 px (telefon)
• Marja dreaptă: -100% (desktop), 0 px (tabletă și telefon)

Filtru

Nu în ultimul rând, vom folosi un mod de amestecare pentru a crea diferența de culoare pentru textul care apare.

• Blend Mode: Suprapunere

Adăugați modulul de text al titlului în coloana 2

Setări text H3

Să trecem la a doua coloană. Acolo, primul modul de care avem nevoie este un titlu Modul text. După adăugarea conținutului dvs. H3, modificați setările de text H3:

• Titlul 3 Greutate font: Semi Bold
• Rubrica 3 Culoarea textului: # 00aeff
• Rubrica 3 Dimensiune text: 60 px
• Rubrica 3 Spațierea literelor: -3px

Spațiere

Creați spațiu adăugând marja de jos în continuare:

• Marja inferioară: 50 px

Adăugați modulul divizor în coloana 2

Culoare divizor

Al doilea modul de care avem nevoie este un modul divizor. Deschideți setările de culoare și schimbați culoarea pentru a se potrivi cu paleta de culori a designului:

• Culoare divizor: # 00ffff

Dimensionare

Apoi, modificați setările de dimensionare:

• Înălțime: 56 px
• Lățime: 75%

Adăugați modulul de descriere a textului în coloana 2

Setări text

Continuați adăugând o descriere Text Module utilizând următoarele setări de text:

• Dimensiune text: 17 px
• Înălțimea liniei textului: 1.3em
• Orientare text: justificați

Dimensionare

Modificați setările de dimensionare în continuare:

• Dimensiune: 70% (desktop), 100% (tabletă și telefon)

Spațiere

Adăugați spațiu sub acest modul folosind și o marjă de jos:

• Marja inferioară: 50 px

Adăugați un modul buton la coloana 2

Setări buton

Ultimul modul de care vom avea nevoie în această coloană este un modul buton. După adăugarea CTA, modificați setările butonului:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 17 px
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # 00aeff
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 100 px
• Distanța dintre litere și butoane: -1 px
• Greutatea fontului: Ultra Bold
• Stilul fontului: majuscule

Spațiere

Și pentru a oferi butonului un aspect mai curat, vom adăuga și câteva căptușeli:

• Căptușeală superioară: 10 px
• Căptușeală inferioară: 10 px
• Căptușeală stângă: 30 px
• Căptușeală dreaptă: 30 px

Box Shadow

Nu în ultimul rând, vom folosi o umbră de casetă subtilă pentru a adăuga un pic de adâncime secțiunii noastre:

• Puterea neclarității umbrei cutiei: 54 px
• Puterea răspândirii umbrei cutiei: -8px
• Culoare umbră: rgba (0,0,0,0,3)

Secțiunea de clonare

Schimbați toate copiile

Pentru a crea a doua secțiune, pur și simplu o vom clona pe cea pe care am creat-o deja și apoi vom schimba toată copia.

Schimbați culoarea de fundal a rândului

Pentru această nouă secțiune, vom folosi o altă paletă de culori. Începeți prin a schimba culoarea de fundal a rândului.

• Culoare fundal: #efefef

Schimbați fundalul gradientului coloanei 1

Apoi, alegeți și un alt fundal de gradient.

• Culoare 1: # 5f00a8
• Culoare 2: # 9000ff

Schimbați titlul secțiunii Culoare umbră

De asemenea, potrivim culoarea umbrelor de text cu noua noastră paletă de culori:

• Titlul 2 Culoare umbră text: rgba (255,0,255,0,24)

Modificați setările de spațiu pentru titlul secțiunii

În funcție de lungimea copiei pe care o utilizați, va trebui să vă jucați cu marginea dreaptă negativă.

• Marja dreaptă: -110% (desktop)

Modificați culoarea textului modulului textului titlului

Apoi, modificați culoarea textului titlului Modulul text din coloana 2.

• Rubrica 3 Culoarea textului: # 9000ff

Schimbați culoarea separatorului

La fel, faceți ca culoarea separatorului să se potrivească cu designul.

• Culoare: # ff00ff

Schimbați culoarea de fundal a butonului

Pentru a termina, va trebui să schimbați culoarea de fundal a modulului Buton.

• Culoarea fundalului butonului: # 9000ff

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului final pe diferite dimensiuni de ecran:

Gânduri finale

Există multe modalități prin care puteți face designul dvs. web să se distingă de celelalte site-uri web de acolo. În această postare, v-am arătat cum să creați titluri de secțiuni uimitoare și secțiuni în general, folosind numai opțiunile încorporate ale Divi. Am combinat fundaluri de gradient de coloană cu suprapuneri ale modulului de text, umbre de text și moduri de amestecare pentru a crea un rezultat final uimitor. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!