Cum să creați modele de text uimitoare folosind divizoare de secțiuni în Divi

Crearea de modele de text unice pentru site-ul dvs. web poate fi o provocare, mai ales dacă nu doriți să utilizați o grămadă de CSS sau să recurgeți la suplimentarea textului prietenos pentru imaginile pe care le proiectați în Photoshop. Cu Divi (și unele gândiri „out of the box”), puteți crea modele de text unice, fără niciun css extern sau imagini personalizate. Trucul este să folosiți separatoarele de secțiuni Divi pentru a vă suprapune textul pentru a adăuga pauze și textură în mai multe moduri diferite. În acest tutorial, voi explora puterea divizoarelor de secțiuni Divi pentru a crea câteva modele de text unice care vor duce antetele paginii la nivelul următor.

Să începem.

Trage cu ochiul

Iată doar câteva exemple de modele de text posibile folosind această tehnică:

Noțiuni de bază

Pentru acest design, va trebui să creați o pagină nouă folosind constructorul vizual. Din tabloul de bord WordPress, navigați la Pagini> Adăugați un nou. Apoi acordați titlului paginii dvs. și implementați constructorul vizual. Selectați opțiunea „Construiți de la zero”. Acum sunteți gata să începeți!

Proiectul nr. 1: text rupt cu un gradient de evidențiere

În acest prim design de text, voi folosi separatoare de secțiuni pentru a sparge textul și pentru a adăuga un element de evidențiere de formă unică folosind un fundal de gradient. Adăugați o nouă secțiune cu un aspect cu o coloană. Nu este nevoie să adăugați un modul în acest moment. Vom începe mai întâi cu personalizarea secțiunii.

Setări secțiune

Deschideți setările secțiunii și actualizați următoarele:

Culoarea din stânga a gradientului de fundal: rgba (124,218,36,0,66)
Culoare dreaptă a gradientului de fundal: rgba (0,106,193,0,61)

Lățime: 80%
Alinierea secțiunii: centru

Stilul divizorului superior: vezi captura de ecran
Culoare divizor superior: #ffffff
Înălțimea separatorului superior: 1,8vw
Repartitor orizontal repartitor superior: 3x
Aranjament divizor superior: în partea de sus a conținutului secțiunii

Stilul divizorului inferior: vezi captura de ecran
Culoare divizor de fund: #ffffff
Înălțimea divizorului inferior: 1,8vw
Repetare orizontală a compartimentului inferior: 3x
Aranjamentul divizorului inferior: în partea de sus a conținutului secțiunii

Marjă personalizată: 5vw sus, 5vw jos
Căptușeală personalizată: 0 px sus, 0 px jos

Deoarece proiectarea textului dvs. va avea loc folosind separatoarele de secțiuni, este important să păstrați secțiunea compactă fără nicio umplutură, astfel încât separatoarele să se suprapună peste text cu înălțimea minimă a separatorului. Setarea înălțimii separatorului cu o unitate de lungime vw se va asigura că stilul divizorului se va scala frumos pentru un design consistent pe toate dimensiunile ecranului. A acorda secțiunii o marjă personalizată este opțional, dar, de asemenea, util pentru spațiere, deoarece vom folosi margini negative pe modulul nostru text pentru ao extinde deasupra și dedesubtul secțiunii noastre (acest lucru ar trebui să aibă mai mult sens mai târziu).

Setări rând

Pentru rând, tot ce trebuie să facem este să ajustăm lățimea și căptușeala. Actualizați următoarele setări de rând:

Lățime personalizată: 100%
Căptușeală personalizată: 0 px sus, 0 px jos

Deoarece textul nostru va fi adăugat la coloana rândului, trebuie să scăpăm de umplutură, astfel încât separatoarele noastre să îmbrățișeze partea de sus și de jos a textului nostru.

Setări modul modul text

Acum putem adăuga în sfârșit modulul text la rândul cu o singură coloană. În interiorul rândului, adăugați un modul text cu conținutul „munca noastră”. Apoi actualizați setările de proiectare după cum urmează:

Font text: Oswald
Stil de text text: TT
Culoarea textului textului: # 0c71c3
Dimensiune text text: 10vw
Înălțimea liniei de text: 1em
Orientare text: centru
Marja personalizată: -5vw sus, -4vw jos
Căptușeală personalizată: 2vw sus, 2vw jos

Cheia aici este să utilizați marja negativă personalizată pentru a extinde textul de deasupra și dedesubtul secțiunii. Acest lucru permite separatoarelor de secțiuni să se suprapună în interiorul textului pentru a crea efectul de design defect. Și gradientul de fundal strălucește pentru a-i oferi și o notă de design plăcută. Rezultatul este probabil unul dintre desenele mele de text preferate, care deschide ușa pentru o mulțime de variații creative.

Iată designul final.

Design de text # 2: Text cu textură de linie verticală

Pentru al doilea design de text, continuați și creați o nouă secțiune cu un rând cu o coloană. Apoi adăugați un modul text în coloană. În loc să personalizez mai întâi secțiunea, am considerat că este mai bine să începem cu modulul text, astfel încât să puteți vedea mai bine procesul de proiectare.

Setări text

În rândul cu o coloană, adăugați un modul text cu conținutul „munca noastră”. Apoi actualizați setările de proiectare după cum urmează:

Font text: Poppins
Greutatea fontului textului: Ultra Bold
Dimensiunea fontului textului: 8vw
Înălțimea liniei de text: 1em
Orientare text: centru
Marjă personalizată: 0 px sus, 0 px jos

Setări rând

Setările rândurilor vor fi aceleași cu primul exemplu de proiectare, astfel încât să puteți copia stilurile de rând și să le lipiți în acest rând. Sau pur și simplu actualizați setările rândului după cum urmează:

Lățime personalizată: 100%
Căptușeală personalizată: 0 px sus, 0 px jos

Setări secțiune

Actualizați setările secțiunii după cum urmează:

Lățime: 70%

Stilul divizorului superior: vezi captura de ecran
Culoare divizor superior: #ffffff
Înălțimea separatorului superior: 8vw
Reparare orizontală a separatorului superior: 150x
Aranjament divizor superior: în partea de sus a conținutului secțiunii

Stilul divizorului inferior: vezi captura de ecran
Culoare divizor de fund: #ffffff
Înălțimea divizorului inferior: 8vw
Repetare orizontală a compartimentului inferior: 150x
Flip divizor inferior: vertical
Aranjamentul divizorului inferior: în partea de sus a conținutului secțiunii

Căptușeală personalizată: 0 px sus, 0 px jos

Cheia acestui design este opțiunea Repetare orizontală Divider. Setarea repetării orizontale a separatorului la 150x cu o înălțime egală cu înălțimea textului creează o serie de linii verticale suprapuse care se extind din partea de sus și de jos a secțiunii. Nu uitați să setați divizorul inferior să răsucească vertical, astfel încât „liniile” să se extindă în sus.

Iată designul final.

Design # 3: Text cu text parțial în partea de sus și de jos

Pentru a accelera procesul pentru următorul design, continuați și copiați secțiunea pe care tocmai ați creat-o în al doilea exemplu de design de mai sus.

Actualizați setările secțiunii

Culoare fundal: # e02b20

Stilul divizorului superior: vezi captura de ecran
Culoarea separatorului superior: # e02b20
Înălțimea separatorului superior: 3vw
Reparare orizontală a separatorului superior: 30x

Stilul divizorului inferior: vezi captura de ecran
Culoare divizor inferior: # e02b20
Înălțimea divizorului inferior: 3vw
Repetare orizontală a compartimentului inferior: 30x

Cheia aici este să vă asigurați că culoarea divizorului se potrivește cu culoarea de fundal a secțiunii, astfel încât separatoarele să fie vizibile numai acolo unde se suprapun textului.

Actualizați setările pentru text

Acum nu mai rămâne decât actualizarea culorii textului textului:

Culoarea textului textului: #ffffff

Iată designul final.

O alternativă de design distractiv la designul # 3

Înainte de a părăsi acest design, m-am gândit să împărtășesc modul în care divizorul inferior din această secțiune poate fi transformat cu ușurință în iarbă, astfel încât textul să pară așezat într-un câmp. Pentru aceasta, actualizați setările după cum urmează:

Culoarea din stânga a gradientului de fundal: # 68a4d8 (cerul)
Culoarea dreaptă a gradientului de fundal: # 1c7503 (iarba)
Poziția inițială: 82%
Poziție finală: 0%
Căptușeală personalizată: 5vw Top
Stil divizor superior: nori (sau bule?)
Culoare divizor inferior: # 1c7503

Apoi actualizați culoarea textului la # 000835

Iată rezultatul.

Dar mobil?

Deoarece unitatea de lungime vw a fost utilizată în toate aceste modele, stilul de text și divizor se va scala frumos pe toate browserele fără a fi nevoie să alocați dimensiuni suplimentare pe tabletă și smartphone. Cu toate acestea, dacă vă confruntați cu reducerea prea mică a textului pe smartphone, poate fi necesar să măriți valoarea unității de lungime a vw.

Gânduri finale

Sper că v-ați distrat experimentând cu separatoare de secțiuni pentru modele de text unice. Cu toate diferitele fonturi, culori și stiluri de separare disponibile în Divi, sunt sigur că nu veți avea probleme cu crearea unor modele de text uimitoare pentru următorul dvs. proiect.

Pentru mai multă inspirație cu privire la modul de utilizare a separatoarelor de secțiuni în moduri creative, consultați aceste texturi de fundal, cadre de meniu de navigare și fundalurile barei de subsol de jos.

Până data viitoare, aștept cu nerăbdare să vă aud de la comentarii.

Noroc!