Cum să modificați spațierea între rânduri a textului în WordPress

Spațierea corectă a liniilor nu se referă doar la estetică – afectează în mod direct lizibilitatea, experiența utilizatorului și chiar modul în care vizitatorii se angajează cu conținutul dvs. Fie că aveți un blog personal sau gestionați site-uri comerciale cu trafic mare, optimizarea spațierii textului în WordPress poate îmbunătăți semnificativ structura vizuală a site-ului dvs.

În acest ghid, vom parcurge cele mai eficiente modalități de a schimba spațierea liniilor în WordPress, cu și fără codare, utilizând atât editorul clasic, cât și cel de bloc (Gutenberg). Veți învăța, de asemenea, cum să aplicați CSS personalizat și să depanați problemele comune de formatare.

De ce contează spațierea liniilor

• Îmbunătățește lizibilitatea – în special pe mobil
• Reduce ratele de salt, făcând textele lungi mai ușor de scanat
• Îmbunătățește coerența designului între teme și dispozitive
• Alinierea la cele mai bune practici SEO (conținut clar, structurat = angajament mai bun)

Să defalcăm modul de control.

Metoda 1: Reglarea spațierii liniilor în editorul Gutenberg

În editorul de blocuri implicit (Gutenberg), puteți gestiona spațierea liniilor utilizând setările blocului “Paragraph” sau prin intermediul claselor CSS personalizate.

➤ Pași:

• Deschideți postarea sau pagina în editorul WordPress.
• Selectați un bloc Paragraph (Paragraf).
• În bara laterală din dreapta, găsiți opțiunea Typography > Line height.
• Ajustați valoarea (de exemplu, 1,6, 2, 2,2).

Notă: Dacă opțiunea nu este disponibilă, treceți la Custom CSS (Metoda 3) de mai jos.

Metoda 2: Editor clasic (TinyMCE)

Editorul clasic nu include o opțiune directă de înălțime a liniei. Cu toate acestea, puteți:

• Utilizați Shift Enter pentru întreruperi manuale de linie (fără spațiere)
• Să utilizați plugin-uri precum TinyMCE Advanced (care face acum parte din “Advanced Editor Tools”) pentru a adăuga controale de spațiere

Pentru un stil coerent, recomandăm în continuare setarea înălțimii liniei prin CSS.

Metoda 3: CSS personalizat (cea mai bună practică pentru control deplin)

Această metodă oferă un control precis, funcționează în toate blocurile și temele și evită deplasările de aspect.

Exemplul 1: Înălțimea globală a liniei pentru toate paragrafele

p {
  înălțimea liniei: 1.8;
}

Exemplul 2: Aplicare doar la o anumită clasă

.custom-text {
  înălțimea liniei: 2.2;
}

Unde să introduceți CSS:

• Appearance → Customize → Additional CSS, sau
• În fișierul style.css al temei copil, sau
• Prin intermediul unui plugin precum Simple Custom CSS

Metoda 4: Constructor de pagini (Elementor, WPBakery etc.)

Pentru Elementor:

• Modificați secțiunea sau widgetul de text.
• Sub Style → Typography, ajustați câmpul Line Height.
• O puteți seta în unități em, px sau relative.

Pentru WPBakery:

• Utilizați opțiunile de design sau adăugați CSS personalizat direct în setările rândului sau coloanei.

Metoda 5: Spațierea liniilor adaptată la mobil

• Spațierea bună a liniilor pe desktop poate părea îngustă pe mobil. Majoritatea editorilor (inclusiv Gutenberg și Elementor) permit setări responsive. Întotdeauna:
• Previzualizați modificările pe tabletă și mobil
• Setați o înălțime a liniei ușor mai mare pentru ecranele mici (de exemplu, 2 în loc de 1,6)
• Probleme comune și remedieri

Înălțimea liniei nu se modifică după actualizarea CSS?

• Asigurați-vă că tema sau pluginul dvs. nu suprascrie stilurile.
• Încercați să utilizați !important în regula CSS:

p {
  line-height: 2 !important;
}

Modificările sunt vizibile în Customizer, dar nu live?

• Curățați cache-ul site-ului și cache-ul browserului.
• Dacă utilizați un plugin de caching, curățați toate cache-urile.

Rezumat