Si está creando un sitio con Elementor y el texto „no respira del todo“ o los títulos quedan demasiado pegados a los párrafos, casi siempre se trata de la combinación entre el line-height y el margen. Ambos están relacionados, ambos se configuran por separado en la interfaz de Elementor — y ambos suelen confundirse en la práctica. En este artículo repaso la lógica, muestro valores concretos que han demostrado su eficacia en más de 50 proyectos y abordo las trampas típicas (sobre todo en móvil). Si en general quiere profundizar en el diseño con Elementor, mi artículo Los 10 mejores consejos de diseño para Elementor es el buen paso siguiente.
Requisito: Elementor 3.20+ o más reciente. La mayoría de los consejos también valen para Elementor Pro — cuando entran en juego funciones específicas de Pro, lo señalo.
Line-height vs. margen: dónde está la diferencia
Dos conceptos relacionados, pero distintos:
El line-height es el espacio dentro de un bloque de texto — entre dos líneas del mismo párrafo. Si su texto principal parece „apretado“, el line-height es el ajuste que debe mover.
El margen es el espacio entre elementos — por ejemplo, entre un párrafo y el título siguiente. Si dos párrafos „se pegan“ o un título „se posa sobre el párrafo“, el margen es la palanca.
Reglas prácticas que funcionan en la práctica:
- Line-height del texto principal: 1.5–1.7 (a veces en Em, a veces sin unidad — Elementor permite ambos)
- Line-height de los títulos: 1.1–1.3 (los titulares grandes necesitan menos aire)
- Margen entre párrafos: 1em–1.5em (es decir, aproximadamente una altura de línea)
- Margen entre un título y el texto que sigue: 0.5em (ajustado, van juntos)
- Margen entre un párrafo y un nuevo título que sigue: 2em (espacio, tema nuevo)
Estos valores no son dogma — adáptelos a su elección de tipografía. Una tipografía con remates estrecha (p. ej. Lora) necesita más line-height; una grotesca ancha (p. ej. Inter, Source Sans), menos.
Tipografía global: configurar una vez, usar en todas partes
El mayor error que veo en los proyectos de Elementor: el line-height se configura por widget en lugar de globalmente. ¿El resultado? 47 line-heights distintos repartidos por el sitio, ninguna coherencia, y cada cambio se convierte en un trabajo de Sísifo.
En su lugar: use la tipografía global.
En Elementor → menú de hamburguesa arriba a la izquierda → „Site Settings“ → „Typography“. Allí define:
- Primary Heading (H1)
- Secondary Heading (H2)
- Text (cuerpo de texto)
- Accent Text (p. ej. textos de entrada)
Para cada estilo fija la Font Family, el Weight, la Size, el Line-Height y el Letter-Spacing. Luego son aplicables con un clic en cada widget — y si más adelante cambia el line-height de 1.6 a 1.55, cambia en todo el sitio, no solo en un punto.
Valores predeterminados recomendados:
| Style | Font Size (Desktop) | Line-Height | Margin-Bottom |
|---|---|---|---|
| Primary Heading (H1) | 48 px | 1.15 | 0.5em |
| Secondary Heading (H2) | 32 px | 1.2 | 0.6em |
| Tertiary Heading (H3) | 24 px | 1.3 | 0.5em |
| Body Text | 17 px | 1.6 | 1.2em |
| Accent / Lead | 20 px | 1.5 | 1.5em |
Estos valores son un punto de partida para sitios modernos de tecnología/servicios. En revistas, blogs y textos de lectura más largos pondría el line-height del cuerpo en 1.7 o incluso 1.8 — la fluidez de lectura gana a la densidad.
Sección Pro: interlineado para titulares vs. cuerpo de texto
Los titulares toleran poco line-height, porque entre las líneas no tienen carácter de fluidez de lectura — son cortos, contundentes, pensados para mantenerse juntos. Si pone un H1 de dos líneas con un line-height de 1.6, parece que alguien hubiera escrito dos frases separadas.
El cuerpo de texto, en cambio, es texto de lectura. Aquí las líneas necesitan aire para que el ojo pueda saltar a la línea siguiente sin perder el hilo. Regla práctica: cuanto mayor sea la longitud de sus líneas, más line-height. Una columna de texto de 800 píxeles de ancho con 65 caracteres por línea tolera 1.6 sin problema; una columna estrecha de 400 píxeles con 35 caracteres por línea debería estar más bien en 1.4.
Truco práctico: en los ajustes del widget de Elementor, bajo „Style“ → „Typography“, ve un control deslizante „Line Height“. Cámbielo a „Unit-less“ (el pequeño desplegable a la derecha del control). Un line-height sin unidad escala con el tamaño de la fuente — si más adelante cambia la Font-Size, el interlineado se ajusta automáticamente. Con valores en „Em“ o „px“ eso se rompe.
Widget Spacing vs. margen CSS: ¿cuándo cada uno?
Elementor ofrece tres maneras de crear espacio vertical:
- Margen en el elemento (pestaña Style → Advanced → Margin)
- Padding en el contenedor (pestaña Layout → Padding)
- Widget Spacer (un widget propio que se inserta entre elementos)
¿Cuál es el correcto? Depende del contexto.
Uso el margen para:
- Espaciados estándar entre elementos de texto
- Coherencia global (definida en la tipografía global)
Uso el padding para:
- Espaciados entre secciones (padding arriba/abajo en el contenedor)
- Cuando el fondo/background tiene un papel (el padding desplaza el contenido, no la zona de color)
Uso el widget Spacer para:
- Espaciados puntuales, muy específicos, que no encajan en la lógica estándar
- Pruebas rápidas en modo de diseño
Lo que evito:
- Varias etiquetas
vacías en el editor de texto para crear espacio. Es un truco de HTML de 2007 — no semántico, malo para los lectores de pantalla, y en el comportamiento responsive salta de otra forma de la que uno espera. - Spacers al píxel exacto en cada sección. Un spacer de 73 px se ve exacto en el editor, pero es una pesadilla de mantenimiento.
Interlineado en móvil: qué falla en tablet/teléfono
La trampa de espaciado en móvil más frecuente: en escritorio tiene un H1 con 48 px de tamaño de fuente y line-height 1.15. En el teléfono, la Font-Size se reduce automáticamente a 32 px — pero el line-height de 1.15 hace que de repente el bloque de titular quede ahí demasiado apretado, porque los titulares en móvil a menudo pasan a varias líneas.
Solución: Elementor permite valores responsive por breakpoint. Haga clic en el icono de dispositivo junto a cada valor y configure:
- Desktop H1: line-height 1.15
- Tablet H1: line-height 1.2
- Mobile H1: line-height 1.25
Lo mismo con el cuerpo de texto:
- Desktop Body: line-height 1.6
- Mobile Body: line-height 1.55 (las líneas más cortas necesitan menos)
En móvil, el margen debería ser más pequeño que en escritorio. Quien tenga 2em entre un H2 y un párrafo en escritorio debería bajar a 1.2em en móvil — de lo contrario, en una pantalla de 5 pulgadas el sitio parece que alguien hubiera separado cada sección con tres líneas en blanco.
Consejo extra para usuarios de Pro: con Elementor Pro puede definir sus propios breakpoints en „Site Settings“ → „Layout“. Por defecto son Mobile (≤767 px), Tablet (768–1024 px), Desktop. Si su público tiene muchos iPad Pro, merece la pena un breakpoint adicional en 1200 px.
Nota de rendimiento: nada de orgías de CSS inline
Cada valor de espaciado que configura por widget en Elementor acaba como clase CSS generada en el HTML — y puede acumularse. Una página con 200 widgets estilizados individualmente tiene 200 reglas CSS adicionales en el head. No es un delito, pero es innecesario.
Buenas prácticas para un rendimiento limpio:
- Definir la tipografía global (véase arriba) en lugar de estilizar por widget.
- Reutilizar plantillas de sección prediseñadas en lugar de estilizar cada sección desde cero.
- Definir Custom CSS Classes (Elementor Pro) — p. ej. una clase
.spacing-mediumque aplique 2em de margin-bottom, y aplicarla donde haga falta. - Desactivar los widgets sin usar. Elementor carga el CSS de cada widget activado — aunque no lo use. En „Settings“ → „Features“ puede hacer limpieza.
Para consejos de rendimiento más profundos sobre Elementor, eche un vistazo a mi artículo Optimización del rendimiento de Elementor. Y si está empezando de cero y quiere aprender Elementor de forma estructurada, Tutorial de Elementor para principiantes es lectura obligada.
Forzar un salto de línea — sin nuevo párrafo
Estrechamente relacionado con el interlineado está el salto de línea. A veces quiere pasar a la línea siguiente sin empezar un párrafo totalmente nuevo (con su espaciado adicional) — por ejemplo, en una dirección, un eslogan o una distinción de varias líneas. En el editor de texto de Elementor lo controla así:
- Mayús + Intro crea un simple salto de línea (
<br>) — la misma altura de línea, sin espaciado de párrafo adicional. - Un Intro normal crea un nuevo párrafo (
<p>) con el espaciado de párrafo mayor, que controla más arriba mediante el margen.
Precisamente esta distinción es el tropiezo más frecuente: quien pulsa Intro en todas partes obtiene demasiado espacio y se extraña de los bloques de texto desgarrados. Con Mayús+Intro mantiene el control — y combinado con el interlineado adecuado de arriba, el texto por fin transmite calma.
¿Quiere una revisión de diseño o una formación?
Si su sitio Elementor „no acaba de encajar“ en cuanto a espaciado, miro por encima de su hombro en 60 minutos y destapo las carencias más frecuentes — la mayoría de las veces basta una hora para dejar la tipografía limpia y establecer coherencia. Escríbame unas líneas y acuerdo con usted una sesión de coaching individual o una pequeña auditoría.
→ Solicitar coaching: Ponerse en contacto
Etiquetas