Cum se aplică stiluri alternative de subliniere a textului în Divi

Stilurile de subliniere a textului au fost întotdeauna destul de limitative. Cea mai obișnuită metodă de subliniere a textului pe web este utilizarea proprietății CSS „text-decoration: underline”. Divi vă permite chiar să implementați și să stilizați acest tip de subliniere în setările modulului Divi Builder. Dar această metodă standard de subliniere vine cu limitări în ceea ce privește stilul și suportul cross-browser.

Acordat, în majoritatea cazurilor, sublinierea textului nu trebuie să fie complicată. De exemplu, sublinierea tuturor linkurilor de pe site-ul dvs. pentru a arăta că sunt clicabile este o aplicație standard care nu are neapărat nevoie de metode alternative. Dar, dacă doriți să luați sublinierea la nivelul următor, această postare vă poate ajuta.

În acest tutorial, vă voi prezenta cum să aplicați câteva stiluri alternative de subliniere a textului textului dvs. în Divi. Vă voi arăta metoda standard folosind opțiunile integrate Divi pentru sublinierea textului. Și vă voi arăta, de asemenea, cum să utilizați marginile inferioare ca metodă alternativă pentru sublinierea textului. Utilizarea unei margini inferioare nu numai că vă oferă mai mult control asupra stilului, dar este, de asemenea, acceptată în toate browserele.

Să începem.

Sublinierea textului cu decorarea textului (metodă comună)

Cea mai comună și simplă modalitate de a sublinia textul este folosirea proprietății CSS de decorare a textului. De fapt, Divi vă permite să stilizați textul folosind această metodă cu ușurință în cadrul opțiunilor încorporate ale unui modul. Pur și simplu căutați opțiunea Text Font Style și selectați pictograma „ U ” pentru a implementa decorul textului subliniat. Odată selectat stilul de font subliniat, veți avea și opțiunea de a personaliza culoarea și stilul sublinierii.

Acest lucru vă permite să aveți o culoare subliniată diferită de culoarea textului real.

Și puteți alege dintre următoarele stiluri de subliniere:

• Solid
• Dubla
• Punctat
• Dashed
• Ondulat

Puteți chiar să vizați stilul subliniat al legăturilor din interiorul textului corpului. Acest lucru vă oferă mai mult control asupra designului atunci când utilizați modulul text. Pur și simplu selectați fila Font legătură sub comutarea categoriei de proiectare a textului. Pentru stilul Font Link, alegeți „Subliniat”. Apoi, puteți personaliza culoarea și stilul sublinierii linkului în consecință.

Decorarea textului Subliniază limitările stilului

Îi lipsește capacitatea de a regla lățimea și poziția liniei

Din păcate, atunci când adăugați text-decoration: subliniați proprietatea css utilizând setările încorporate ale Divi, nu există nicio opțiune pentru a regla lățimea liniei sau poziția liniei. Lățimea liniei este relevantă pentru dimensiunea fontului, astfel încât va crește pe măsură ce creșteți dimensiunea fontului. Și pentru că poziția subliniului se află la linia de bază, descendenții (litere mici care scad sub linia de bază) vor intra în calea liniei provocând unele inconsecvențe, în special cu cuvintele care au o mulțime de descendenți (cum ar fi „Tipografie”) .

Este posibil ca această limitare să nu fie o problemă dacă utilizați tot textul cu majuscule, deoarece nu veți avea descendenți de care să vă faceți griji. Ar fi frumos dacă ar exista suport pentru ajustarea lățimii sublinierii și a poziției subliniului, dar deocamdată nu avem noroc.

Nu are suport pentru browser

Internet Explorer nu acceptă proprietatea text-decoration-style sau text-decoration-color, astfel încât stilul de subliniere (dublu, punctat, punctat, etc ...) și sublinierea culorii nu pot fi personalizate. Safari nu acceptă nici proprietatea în stil text-decorare, dar puteți schimba culoarea subliniată.

Această lipsă de sprijin nu se limitează la Divi. Nici CSS personalizat nu vă va ajuta.

Sublinierea textului folosind o margine inferioară

Dacă sunteți în căutarea unei soluții alternative pentru sublinierea stilurilor de text, cea mai bună opțiune în opinia mea este să utilizați un chenar inferior. Iată câteva motive întemeiate pentru a face acest lucru:

• O margine acceptă opt stiluri de margini diferite pentru a vă stiliza sublinierea, inclusiv: punctată, întreruptă, solidă, dublă, șanțată, creastă, inserată și începută.
• Puteți personaliza lățimea (grosimea) unui chenar independent de dimensiunea fontului.
• Puteți poziționa marginile pentru a fi mai aproape sau mai departe de text.
• Puteți adăuga orice culoare dorită la margini.
• Stilurile de frontieră sunt acceptate de TOATE browserele.

Limitări la utilizarea marginilor inferioare pentru subliniere

• Limitat la o singură linie de text pe elemente de bloc. Dar există modalități în acest sens (a se vedea mai jos).
• Poziționat complet sub descendenți și puțin dificil de obținut poziția corectă (dar realizabilă).

Înțelegerea diferenței dintre elementele bloc și elementele în linie

Pentru a înțelege cum funcționează sublinierea frontierelor, trebuie să cunoașteți diferența dintre elementele de bloc și elementele în linie.

Elemente de bloc

Elementele de bloc vor acoperi automat întreaga lățime a containerului său (cu excepția cazului în care este setată o lățime personalizată) și vor începe pe o nouă linie. Site-urile web (inclusiv cele construite cu Divi) sunt pline de elemente de bloc.

Câteva exemple de elemente de bloc comune includ:

• Secțiuni Divi, rânduri, module (div)
• text sau paragrafe (p)
• titluri (h1, h2, h3, h4, h5, h6)
• liste (ol, ul)

Când adăugați o margine de jos pentru a bloca elementele, marginea va sta sub întregul bloc. Deci, dacă aveți un paragraf de text (p) sau un titlu (h1) care se împarte în două sau mai multe linii, marginea de jos va fi aplicată numai la partea de jos a blocului, nu la rândurile individuale de text.

Iată un exemplu de cum arată adăugarea unei margini inferioare unui element de bloc de titlu h1 atunci când textul se rupe în mai multe linii.

Chiar dacă css vizează eticheta h1, linia se aplică doar elementului bloc. Prin urmare, linia se aplică doar în partea inferioară și nu fiecărei linii în mod individual.

Elemente inline

Spre deosebire de elementele de bloc, elementele în linie se pot împărți pe mai multe linii. Deci, dacă adăugați o margine de jos la un element în linie (cum ar fi un link de exemplu), sublinierea marginii de jos va fi aplicată chiar dacă legătura se rupe într-o nouă linie. De asemenea, puteți regla căptușirea elementelor în linie fără a afecta înălțimea liniei textului corpului, care este excelent pentru poziționarea liniei inferioare subliniate.

Iată un exemplu al unor linkuri (care sunt elemente inline în mod implicit) care au subliniat marginea inferioară.

Simplu spus, elementele în linie pot avea sublinierea marginii inferioare atunci când se rup în mai multe linii, iar elementele de bloc nu.

Cum se adaugă sublinierea marginii inferioare la o singură linie de text (un element de bloc)

Iată un exemplu despre cum ați adăuga o margine de jos la o singură linie de text folosind setările încorporate ale modulului de text. Această opțiune funcționează cel mai bine pentru anteturi, deoarece veți limita textul la o singură linie.

Creați o nouă secțiune cu un rând cu o coloană. Apoi adăugați un modul text cu următorul conținut:

Underlining Typography

Apoi actualizați setările modulului text după cum urmează:

• Dimensiune text text: 46 px (desktop), 40 px (tabletă), 26 px (telefon)
• Înălțimea liniei textului: 1,8em
• Lățime: 517 px (desktop), 450 px (tabletă), 293 px (telefon)
• Lățimea marginii inferioare: 2 px
• Culoarea chenarului inferior: # 0c71c3
• Stilul marginii inferioare: punctat

După cum puteți vedea, chenarul poate fi stilizat folosind lățimea, culoarea și stilul. Deoarece marginea de jos se aplică modulului, este necesar să reglați lățimea modulului la aceeași lățime a textului. Deci, va trebui să modificați dimensiunea textului și lățimea modulului în consecință.

Cum se adaugă sublinierea frontierei inferioare pe elementele de bloc (cum ar fi titlurile) care se împart între linii

Așa cum am menționat mai devreme, elementele de blocare precum titlurile (h1, h2, h3 etc.) nu permit aplicarea marginii inferioare în linie la fiecare întrerupere de linie. Pentru a rezolva acest lucru, putem pur și simplu să ne înfășurăm textul cu o etichetă span. Un interval vă permite să grupați elemente inline (cum ar fi un grup de text) împreună pentru a adăuga stilul acelor elemente. Deci, dacă dorim o margine de jos cu o etichetă h1 (un element de bloc), putem înfășura textul în interiorul etichetei h1 cu o etichetă de span suplimentară. Apoi, putem adăuga stilul de subliniere a marginii de jos la eticheta span. Acest lucru ne va permite să subliniem textul etichetei h1 (sau porțiuni din acesta) chiar și atunci când acesta se rupe pe o altă linie.

Iată un exemplu despre cum ați adăuga o margine inferioară pentru a bloca elemente (cum ar fi titlurile) care se împart în mai multe linii de text folosind CSS personalizat.

Mai întâi, adăugați o nouă secțiune cu un rând cu o coloană. Apoi adăugați un modul text la rând. În caseta de conținut, înlocuiți textul simulat implicit cu următorul:

<h1><span>This is a Heading with Bottom Border Underlining Styled with a Span Tag</span></h1>

Deoarece vom adăuga o linie de fund subliniată, să creștem înălțimea liniei de direcție h1 după cum urmează:

Apoi adăugați următorul ID CSS personalizat sub fila avansată:

ID CSS: border-underline

Apoi deschideți modul de setare a paginii și adăugați următoarele CSS personalizate:

.border-underline span {
border-bottom: 2px dashed #0c71c3;
padding: 0.1em 0;  
}

Acest stil de margine de jos se aplică elementelor din eticheta span. Și deoarece eticheta span este un element în linie, sublinierea va fi aplicată textului de pe fiecare linie.

Proprietatea de la marginea de jos poate fi personalizată oricum doriți. Prima valoare (2px) setează grosimea (sau lățimea) chenarului. A doua valoare (punctată) setează stilul chenarului. Nu uitați, puteți utiliza, de asemenea, următoarele stiluri de margine: punctat, punctat, dublu, groove, creastă, inserare și început. Și a treia valoare (# 0c71c3) setează culoarea chenarului. De asemenea, puteți modifica css-ul de umplere personalizat împreună cu valoarea înălțimii liniei de text din opțiunile încorporate ale modulului de text pentru a obține spațierea la fel de bine.

Dacă nu aveți nevoie de eticheta span și doriți să convertiți întreaga etichetă h1 într-un element inline, puteți utiliza acest CSS în setările paginii:

.border-underline h1 {
border-bottom: 2px dashed #0c71c3;
padding: 0.1em 0;  
display: inline;
}

Observați că acest CSS vizează eticheta h1. În plus față de marginile inferioare și stilurile de umplere, „display: inline” schimbă eticheta h1 într-un element inline care permite textului h1 să fie subliniat pe mai multe linii.

Adăugarea unei linii de subliniere a marginii inferioare la linkurile Inline din Divi

Iată un exemplu al modului în care ați adăuga o margine de jos textului linkului dvs. în Divi folosind CSS personalizat. Mai întâi creați o nouă secțiune cu un rând cu o coloană și adăugați un modul de text la rând.

Apoi utilizați editorul wysiwyg pentru a adăuga câteva linkuri la textul corpului, astfel încât să aveți câteva linkuri cu care să lucrați.

Apoi adăugați o clasă CSS personalizată în fila Advanced, după cum urmează:

Clasa CSS: border-underline

Acum deschideți setările paginii și adăugați următoarele CSS personalizate pentru a aplica marginea de jos tuturor linkurilor din modulul text.

.border-underline a {
border-bottom: 1px solid #333333;
padding: 0.1em 0;  
}

Proprietatea de la marginea de jos poate fi personalizată oricum doriți. Prima valoare (1 px) setează grosimea (sau lățimea) chenarului. A doua valoare (solidă) stabilește stilul chenarului. Nu uitați, puteți utiliza, de asemenea, următoarele stiluri de margine: punctat, punctat, dublu, groove, creastă, inserare și început. Și a treia valoare (# 333333) setează culoarea chenarului.

Deci, dacă doriți o linie de subliniere a marginii de jos, care are o lățime de 2 px, cu un stil punctat și o culoare diferită, puteți înlocui aceste valori cu ceva de genul acesta:

border-bottom: 2px dashed #0c71c3;

Valoarea de umplere poate fi, de asemenea, ajustată pentru a poziționa marginea subliniată vertical. Deci, dacă doriți ca linia să fie mai jos de text, puteți crește valoarea de umplere la ceva de genul următor:

padding: 0.3em 0;

Puteți utiliza, de asemenea, această umplutură personalizată împreună cu valoarea înălțimii liniei textului în opțiunile încorporate ale modulului de text pentru a obține spațierea la fel de bine.

Și întrucât legăturile sunt elemente în linie, linia subliniată rămâne pe legăturile care se împart între linii.

Dar despre divizoare?

Dacă doriți să fiți cu adevărat creativi, subliniind linii unice de text (elemente de bloc), puteți utiliza oricând modulul divizor Divi. Modulul divizor are multe opțiuni încorporate, cum ar fi stilul, înălțimea, lățimea, fundalurile, chenarul, umbra cutiei și multe altele. Puteți chiar să stivați separatoare unul peste celălalt pentru un aspect și mai personalizat.

Iată un exemplu rapid de modul divizor folosit pentru a sublinia textul cu o linie dublă cu un fundal de gradient.

Pur și simplu adăugați un modul divizor direct sub un modul text care conține textul dvs. Apoi actualizați următoarele:

• Culoarea din stânga a gradientului de fundal: # 2b87da
• Culoarea dreaptă a gradientului de fundal: # 29c4a9
• Tipul gradientului: liniar
• Direcția gradientului: 90 grade
• Culoare: #ffffff
• Greutatea divizorului: 2 px
• Înălțime: 2 px
• Lățime: 400 px (aceasta va trebui ajustată la lățimea textului de mai sus)
• Căptușeală personalizată: 5 px sus, 5 px jos

Gânduri finale

Sper că acest tutorial vă oferă o alternativă utilă la adăugarea de stiluri de subliniere a textului în Divi. Metoda obișnuită care folosește „decorarea textului: subliniere” este de departe cea mai ușoară soluție, dar limitările pot fi o tragere. Metoda de subliniere a marginii de jos vă oferă un pic mai mult control asupra stilului și plasării liniilor. Iar CSS-ul personalizat nu este cu siguranță greoi și poate fi modificat cu ușurință în funcție de nevoile dvs. Deci, dacă doriți să treceți sublinierea textului la nivelul următor, acest lucru ar trebui să vă ajute.

Ca întotdeauna, aștept cu nerăbdare să vă aud de la comentarii.

Noroc!