¿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
phil rooksby
No tengo CSS Adicional. He intentado de todas las demás maneras alterar el espaciado de los párrafos pero nada funciona, se ve un verdadero desastre. ¡Ayuda por favor!
Norm
Gracias por la ayuda. He estado buscando por todas partes y quería hacerlo con un plugin. Lo hiciste muy fácil. De nuevo, muchas gracias.
Maria
¡Hola! Quiero tener un espaciado simple entre mis párrafos e incluso después de presionar enter (para el doble espacio), cuando previsualizo el borrador, nada ha cambiado (sigue siendo un solo párrafo). ¿Alguien podría ayudar?
Rashmi
Hola
Me gustaría modificar el interlineado y el espaciado. Sin embargo, no hay ningún icono de 'editor' (Apariencia » Editor) en el archivo CSS del tema.
Entonces, ¿qué puedo hacer?
¡Gracias por tu respuesta!
Hannah
Wow. Didn’t know it was so easy. Thank you so much! This double space was driving me crazy!
Christine
¡Gracias! ¡Mucho más fácil!
Donna
¡Gracias, gracias, gracias!
Estaba en otro editor HTML y no podía entender cómo hacer el espaciado simple.
You saved the day!
Gerard
Brillante y un salvavidas eterno.
Me costaba mucho con el espaciado en uno de los sitios de mis clientes y es absolutamente increíble que tuvieras la respuesta exacta casi al alcance de tu mano. Ahora me estoy convirtiendo en un suscriptor permanente
Elandre
Gracias por todos los consejos de Wordpress. Este sitio me ha ayudado mucho con la mayoría de las dificultades que tenía
LR
Estoy usando el tema Pilcrow y no tengo idea de cómo hacer que el doble espacio entre párrafos ocurra. A veces sucede en mis publicaciones, pero a veces no. Cuando miro el archivo HTML, no veo ninguna publicación p o padding. Solo veo el resultado final de cómo se verá la publicación y es entonces cuando sé que el doble espaciado no funcionó. ¿Todavía puedo regresar y re-editar y arreglarlo? Por último, donde dices ir desde las apariencias a los menús del editor, no tengo esas opciones.
Tengo bajo apariencia las siguientes opciones: temas, personalizar, widgets, menús, encabezado, fondo, AMP, Opciones del tema, Móvil.
Por favor, ayuda.
Soporte de WPBeginner
Hola LR,
Puedes agregar el CSS visitando Apariencia->Personalizar y luego haciendo clic en la pestaña CSS Adicional en el personalizador. Consulta nuestra guía sobre cómo agregar CSS personalizado en WordPress.
Si crees que es un problema del tema, intenta cambiar temporalmente a un tema predeterminado de WordPress. Si el problema desaparece, puedes pedirle soporte a tu desarrollador de temas.
Administrador
Derek Cummings
Mi tema está roto, en el sentido de que no tiene el doble espaciado por defecto. El tema está atascado en el modo shift+enter, en otras palabras. Así que en relación con el siguiente código:
.post p { line-height: 1.5em; padding-bottom: 15px; }
¿Son 15px un doble espacio predeterminado normal? ¿Cuántos píxeles debería ser por defecto? Además, ¿no importa dónde ponga este código? ¡Gracias!
Femi
Gracias por el consejo sobre shift + enter. Nunca supe esto durante años. Tu sitio siempre ha sido un rescate cuando me quedo atascado.
Lyn
Hola: ¿Cómo consigo un espaciado de línea personalizado (por ejemplo, 1.5em) para una instancia en una página en lugar de cambiar el CSS de todo el tema? Veo que otras dos personas han preguntado lo mismo sin respuesta, al menos no que haya encontrado. ¡Gracias!
Denise B
Establecí los márgenes de p a cero. En tu CSS, sería algo como p {margins: 0; }
Los Hundlos
Shift+Enter para evitar un gran espacio entre líneas en el editor wysywig tinye mce en wordpress. ¡¡¡Funciona!!!! ¡¡¡Genial!
Cat
¿Qué tal simplemente agregar algo de texto y cambiar el color del texto a blanco (si el fondo es blanco)? Esto debería hacer posible crear y personalizar los espacios entre líneas mucho más fácilmente (a menos, por supuesto, que el fondo sea una imagen de algo que no se puede igualar con el color de la fuente).
Tim
¡Muchas gracias! ¡Me salvaste la vida!
Michael Rich
Hola personal de WPBeginner,
Tengo una pregunta diferente. Uso Visual Composer y he agregado muchos separadores con texto entre los encabezados de mis secciones en mi página de inicio. Me gustaría que esos encabezados de texto también fueran un enlace a esa sección.
Sin embargo, cada vez que agrego el enlace, pierdo el texto de identificación de la sección que tenía en el separador y se reemplaza mágicamente con el texto predeterminado que dice “TITLE”.
Para intentar que sea un enlace, estoy agregando el código de enlace dentro de este corchete:
[vc_text_separator title=”1950s CARS”]
Me rasco la cabeza tan fuerte que creo que estoy calvo. ¡Cualquier ayuda te ganará gratitud de por vida!
Gracias,
Mike
Anthony Cooper
Estoy usando el tema ‘Divi’ de WordPress y descubrí que si presionas enter (o shift + enter) dos veces, para crear un espacio más grande, se ignora. Para solucionar esto, presiona enter una vez, escribe un carácter en la línea (no importa cuál), resáltalo y cambia el color de fuente del carácter a blanco y luego presiona enter nuevamente; esto da como resultado el espacio deseado entre líneas sin tener que editar el tema. Lo mismo se aplica a los espacios adicionales en una línea; ingresa tantos caracteres como desees, resáltalos y cambia su color de fuente a blanco y luego continúa con el color de fuente deseado.
Julie
¡Excelente consejo! ¡Muchas gracias por esto, me salvaste de muchos dolores de cabeza y molestias, Anthony!
Robin Brinkler
Recuerda que algunos motores de búsqueda podrían tratar el texto “oculto” de esta manera como spam.
Ellen
¡Esto fue realmente útil, gracias!
Christy
THANK YOU!! I Love you guys! So glad I found this site! I’ve almost literally been banging my head against the wall. If I knew how to insert emojis, this post would be covered with hearts and smiley faces.
Christy
P.D. ~ ¡JA! NO sabía que mis dos puntos y paréntesis se convertirían en una carita sonriente. LOL
Linda Paul
¡Oh sí! ¡Acabas de ayudarme a resolver un problema (párrafos forzados de espacio simple) que me ha molestado durante años!
Soporte de WPBeginner
Glad you found it helpful
Administrador
David M. Ebersole Sr.
Soy suscriptor de WP Beginner.
Tenía una pregunta sobre cómo ingresar datos de ingeniería para mi producto en mi sitio. El espaciado en las tablas parecía demasiado grande en la página. Busqué en el soporte de Wordpress y todo lo que vi fueron respuestas cortantes a la pregunta sobre el espaciado de una sola línea.
Eres el primero en responder la pregunta, y obviamente fue correcta. Gracias.
Sinceramente,
Dave
Soporte de WPBeginner
Glad you found it helpful
Administrador
Mark
¿Qué pasa en Android? La última actualización ha forzado un doble espaciado (nuevo párrafo). No es muy bueno para los escritores de poesía. ¿Hay alguna forma de revertirlo a simple?
Cheryl
Uso Omega Theme y Control/Enter no funciona. ¿Hay algo más que pueda hacer? No encuentro post.p en el archivo CSS.
Becky
¡Muy útil, gracias!
Adnan Khan
Gracias, este consejo es muy útil para los nuevos usuarios de WP
Tina Gleisner
Gracias por "Shift" y Enter para el espaciado de una sola línea, ya que he querido resolver esto durante años... y nunca me dediqué a encontrar la solución.
Ian
Hola,
Esto me funcionó pero el CSS no hace nada en mi página…
Will
Me pasó lo mismo. ¿Hay un código actualizado para insertar?
A. Lougheed
Estoy buscando una respuesta en todas partes... cuando agrego un
en el editor de texto, se elimina en el editor visual. Me vuelve loco. ¿Tiene wpbeginner alguna recomendación?
¿Debería agregar un plugin para detener esto?
Probé un plugin hace años, pero tuve que volver y reformatear cada publicación.
¡Cualquier enlace con tutorial o consejo es muy apreciado!
Soporte de WPBeginner
Actually it is also removed from your comment.
Por favor, consulta nuestra guía sobre Cómo agregar caracteres especiales en las publicaciones de WordPress.
Administrador