¿Alguna vez has notado que algunos sitios web tienen contenido perfectamente espaciado que es fácil de escanear, mientras que otros se sienten apretados y difíciles de leer?
El secreto a menudo se reduce a algo simple: saltos de línea y espaciado adecuados.
Si alguna vez has agregado saltos de línea en tu editor de WordPress solo para descubrir que no aparecen en tu página publicada, definitivamente no estás solo. WordPress maneja el espaciado de manera un poco diferente a los procesadores de texto como Google Docs o Microsoft Word.
Sin embargo, una vez que entiendas cómo funciona, tendrás control total sobre cómo se ve tu contenido.
Te mostraremos varios métodos confiables para agregar saltos de línea en WordPress, desde atajos rápidos hasta opciones de formato más avanzadas.
¿Por qué agregar un salto de línea en WordPress (espaciado de nueva línea)?
A primera vista, un salto de línea puede parecer una pequeña elección de formato, pero puede tener un gran impacto en el rendimiento de tu contenido.
Desde mejorar la legibilidad hasta aumentar la experiencia del usuario, agregar un espaciado adecuado ayuda a que tus páginas se vean limpias y profesionales. Aquí te explicamos por qué es importante:
- Mejor legibilidad: Divide bloques de texto para facilitar el escaneo.
- Optimizado para móviles: Mantiene el contenido claro en pantallas más pequeñas.
- Corrige texto pegado: Limpia el formato de otras fuentes.
- Atrae la atención: Ayuda a que los consejos y las CTA destaquen.
En resumen, los saltos de línea hacen que tu contenido sea más fácil de leer y más atractivo, tanto para los visitantes como para los motores de búsqueda.
Nota: Antes de empezar, es importante saber que el espaciado entre líneas se controla con el tema de WordPress que utilices.
Te mostraremos cómo añadir espacio entre bloques en el editor de bloques, y luego cubriremos cómo ajustar el espaciado entre líneas en tu tema si no estás satisfecho con los resultados predeterminados.
Dicho esto, veamos cómo añadir fácilmente un salto de línea en WordPress.
- Cómo añadir doble espacio entre líneas en los bloques
- Cómo añadir un espacio de una sola línea
- La forma más fácil: Usar el bloque Separador
- Modifying the Line Height and Spacing
- Tutorial en video
Cómo añadir doble espacio entre líneas en los bloques
Cuando pulsas la tecla Enter para Windows o la tecla Return para Mac en tu teclado para añadir un salto de línea, WordPress lo considera como un nuevo párrafo.
Esto significa que agregará automáticamente un espacio de doble línea. La cantidad de espaciado está controlada por tu tema, y este estilo es una característica estándar en todos los buenos temas de WordPress.
Simplemente ve al editor de contenido, pulsa la tecla Enter o Return después de la línea, y luego escribe algo más en la siguiente línea.
Al hacer eso, basándote en el estilo de tu tema, deberías ver una clara distinción entre párrafos.
Cómo añadir un espacio de una sola línea
Ahora, si estás escribiendo algo como una dirección, probablemente querrás que tenga un solo espacio en lugar de doble espacio en tu sitio de WordPress.
En este caso, necesitas presionar la tecla SHIFT + ENTER en Windows o la tecla SHIFT + RETURN en Mac.
Esto le dice a WordPress que quieres iniciar una nueva línea dentro del mismo párrafo. Esta acción crea un salto de línea simple en lugar del doble espacio utilizado para un nuevo párrafo.
La forma más fácil: Usar el bloque Separador
Para una forma sencilla y sin código de agregar espacio adicional entre dos bloques cualesquiera, el método más fácil es usar el bloque Separador incorporado.
Simplemente haz clic en el botón 'Agregar bloque' en el editor para añadir un nuevo bloque y busca 'Separador'. Una vez que lo agregues, aparecerá un nuevo espacio vacío en tu página.
Luego puedes hacer clic en el separador y arrastrar el control azul hacia arriba o hacia abajo para ajustar su altura.
Esto te da un control preciso sobre tu espaciado vertical directamente dentro del editor.
Modificar la altura y el espaciado de las líneas
A veces, incluso cuando añades el espaciado de línea adecuado en el editor, no se muestra como quieres en tu tema.
Hay dos maneras de solucionarlo:
- Usando un plugin (la forma fácil)
- Manualmente con código CSS (más avanzado)
Veamos primero el método fácil.
Añadir espaciado entre líneas usando un plugin
Si quieres hacer cambios de estilo en tu tema sin tener que aprender a programar, usar un plugin como CSS Hero es la mejor manera de hacerlo.
CSS Hero facilita el cambio del diseño de tu sitio de WordPress sin saber nada de código.
Puedes ver más detalles en nuestra reseña completa de CSS Hero.
Si quieres hacer cambios más grandes en tu tema, como mover una barra lateral o añadir un pie de página, entonces un plugin constructor de páginas de arrastrar y soltar sería una mejor opción. Un plugin constructor de páginas también te permitiría hacer pequeños ajustes como cambiar los colores de la fuente o añadir saltos de línea en WordPress.
¿No quieres usar un plugin, o solo necesitas hacer este cambio? Entonces, la opción de código CSS manual podría ser la mejor para ti.
Cambiar el espaciado de párrafos manualmente con código CSS
Para añadir saltos de línea manualmente sin un plugin, necesitas añadir algo de CSS a tu tema.
CSS es básicamente como la función de formato en Microsoft Word. En lugar de hacer clic en botones, escribirás código CSS plano. No es tan aterrador como algunos principiantes pueden pensar. CSS es muy fácil de entender si solo sigues instrucciones.
Para agregar CSS personalizado a tu tema, necesitas visitar la página Apariencia » Personalizar. Esto iniciará el personalizador de temas de WordPress, donde necesitas hacer clic en la pestaña 'CSS adicional' de la columna izquierda.
Si no puedes ver estas opciones de menú, es posible que estés usando un tema de bloques. Por favor, consulta nuestro artículo sobre cómo solucionar la falta del personalizador de temas en el administrador de WordPress.
En el cuadro de CSS personalizado, necesitas agregar el siguiente código CSS:
Este código se dirige a todos los elementos de párrafo (p) específicamente dentro del área de contenido principal de tus publicaciones, que WordPress a menudo identifica con la clase .post. Esto asegura que solo afecte a tus artículos.
.post p{line-height: 1.5em;}La regla CSS mostrada anteriormente cambiará el espaciado entre líneas del contenido de los párrafos a 1.5em. Em es una unidad de ancho para tipografía.
Ahora, esto solo cambia el espaciado de un solo espacio.
Si deseas cambiar el espaciado de los párrafos en WordPress (es decir, doble espacio), entonces necesitarías agregar relleno (padding).
.post p {
line-height: 1.5em;
padding-bottom: 15px;
}
Siéntete libre de ajustar los números en este código CSS. Cambiar el valor de padding-bottom cambiará el espacio entre tus párrafos.
También puedes agregar CSS personalizado a tu sitio usando el plugin WPCode. El plugin hace que sea muy fácil insertar y administrar código en tu sitio.
Para más detalles, consulta nuestra guía sobre cómo agregar CSS personalizado a tu sitio de WordPress.
Si no te gusta leer las instrucciones, entonces solo mira nuestro videotutorial.
Tutorial en video
Para un recorrido visual, puedes ver nuestro video tutorial a continuación. Cubre todos los métodos que hemos discutido para agregar espaciado de línea simple y doble en tu contenido.
Esperamos que este artículo te haya ayudado a agregar un salto de línea en WordPress. También te puede interesar nuestra guía sobre cómo usar patrones de bloques de WordPress y nuestra lista de los mejores temas de WordPress compatibles con Gutenberg.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Ralph
Este era un gran problema en el creador antiguo. Nunca supe cómo se vería y tenía que presionar vista previa cada par de líneas, pero creo que con Gutenberg es mucho más fácil y aprendí a usar solo shift+enter. Lo hago automáticamente y casi sin darme cuenta. No sé por qué, pero algunos sitios web no permiten shift+enter, solo enter o no, y entonces digo "¡POR QUÉ no funciona!".
Deepak Sahani
¡Excelente video y publicación resolvieron mi consulta.
Soporte de WPBeginner
Glad our guide could be helpful!
Administrador
Jennyfer
¡Muchas gracias por esta información! Muy útil. Justo lo que estaba buscando.
Soporte de WPBeginner
Glad our guide was helpful
Administrador
Colleen Cochran
Finalmente descubrí lo de shift-enter para las líneas de poesía con espacio simple, pero cuando la publicación se publica y se envía por correo a los seguidores, pierde el formato y todas las líneas se juntan. ¿Cómo lo soluciono?
Soporte de WPBeginner
Deberías consultar con la herramienta que se está utilizando para enviar la notificación sobre el estilo para solucionar ese problema.
Administrador
Luiz
¡Gracias! ¡Muy útil!
Soporte de WPBeginner
You’re welcome
Administrador
Robin
¡Muy útil! ¡Gracias!
Soporte de WPBeginner
You’re welcome
Administrador
Dhirendra
¿Alguna opción para reducir el espacio de la imagen…
Soporte de WPBeginner
Dependería de la imagen específica, pero para empezar a encontrar qué está causando el espacio, deberías consultar nuestra guía a continuación:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administrador
jan van den hoed
Gracias por la explicación. Una pregunta sin embargo. ¿Cómo puedo hacer lo mismo en un teléfono inteligente? Estoy editando mi blog sobre la marcha y no tengo una laptop disponible. Intenté hacer shift enter pero eso no funcionó.
Soporte de WPBeginner
Debido a las limitaciones de los dispositivos móviles, probablemente necesitarías usar el método CSS.
Administrador
Val
Muchísimas gracias, de gran ayuda. ¡Me devané los sesos con el espaciado!
Soporte de WPBeginner
Glad our guide was helpful
Administrador
Stephen
Gracias, ayudó mucho.
Soporte de WPBeginner
Glad our article was helpful
Administrador
Douglas Daniel
Para cambiar el CSS me dice que tengo que comprar un plan premium. ¿No tengo suerte?
Soporte de WPBeginner
Parece que estás en WordPress.com y este tutorial es para sitios de WordPress.org:
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
lamentablemente estarías limitado a las otras opciones, como shift+enter para espaciar el contenido en una sola línea.
Administrador
SOO
¡Gracias! ¡Útil!
Soporte de WPBeginner
You’re welcome, glad our article could help
Administrador
Rebecca
No me funcionó. ¿Alguna razón por la que no funcionaría?
Soporte de WPBeginner
Si estás usando un plugin de constructor de páginas, es posible que tengan un método diferente para el espaciado de una o dos líneas. De lo contrario, podría ser un conflicto de plugin/tema donde necesitarías deshabilitar tus plugins y/o cambiar tu tema para comprobarlo.
Administrador
Tim G
Me gustaría reducir el espaciado entre las líneas de párrafo normales —en mi opinión, hay demasiado espacio en blanco por defecto. También me gustaría añadir media línea al final de un párrafo, en lugar de una línea completa: WordPress por defecto parece hacer el equivalente a un doble retorno de carro, lo cual es bastante del siglo XX y no emula lo que Word puede hacer. ¿Alguna idea?
Soporte de WPBeginner
You would want to reach out to the support for your specific theme and they should be able to tell you what CSS needs to be added to reduce your line spacing
Administrador
sofar ahmad
Muchas gracias
muy útil
Soporte de WPBeginner
Glad our guide could be helpful
Administrador
Sumeet
gracias, eso era lo que estaba buscando, ayudó...
Soporte de WPBeginner
Glad our article helped
Administrador
Jen
¡Dios te bendiga! ¡Estoy muy agradecida por publicar esto con el CSS! ¡Quién diría que eso era todo lo que necesitaba para cambiar el espaciado! ¡He estado buscando algo así por mucho tiempo! ¡Muchas gracias!
Soporte de WPBeginner
Glad our article could help you
Administrador
Kathy
Estoy usando el método de presionar "shift" + enter, pero no me permite usar diferentes tamaños de fuente cuando lo hago. ¿Hay alguna solución?
Soporte de WPBeginner
Hola Kathy,
Por favor, consulta nuestra guía sobre cómo cambiar los tamaños de fuente en WordPress.
Administrador
Lora Staples
GRAN video. Me encantó el contenido, el ritmo y el tono del orador. ¡GRACIAS!
Kunal Khandelwal
Thank you so much for this suggestion. Didn’t know it was so easy