¿Alguna vez has publicado una entrada de blog de WordPress que parecía bien a primera vista, pero se sentía difícil de leer una vez que te desplazabas por ella? Los bloques largos de texto pueden abrumar a los lectores y hacer que pierdan interés, incluso si el contenido es valioso.
A veces, todo lo que se necesita es una simple línea horizontal para que el contenido fluya mejor. Estos divisores separan el texto para que se sienta más organizado y fácil de seguir. También ayudan a resaltar anuncios clave, promociones o transiciones entre secciones de una manera que se siente natural.
En este tutorial, te mostraremos tres formas sencillas de agregar separadores de línea horizontal en WordPress.
De esta manera, puedes hacer que tus publicaciones se vean pulidas y profesionales con un mínimo esfuerzo. 🙌
¿Por qué deberías agregar un separador de línea horizontal en WordPress?
Un separador de línea horizontal divide secciones, hace que tu contenido sea más fácil de escanear y mantiene a los lectores interesados.
Más allá de la legibilidad, las líneas horizontales también son útiles para llamar la atención sobre puntos clave, enfatizar citas o crear transiciones fluidas entre ideas.
En general, los visitantes deciden en segundos si quedarse en tu página o irse. En muchos dispositivos, tu entrada de blog puede aparecer como una larga pared de texto, lo que puede ser abrumador de leer.
Una simple línea horizontal puede cambiar eso. ✅
Dado que esta es una guía completa sobre cómo agregar un divisor de línea horizontal en WordPress, puedes usar nuestra tabla de contenido para encontrar el método que deseas utilizar:
- Method 1: Adding a Horizontal Line in the WordPress Block Editor
- Method 2: Adding a Horizontal Line in the WordPress Classic Editor
- Método 3: Dividir un formulario largo en varias páginas con WPForms
- Bonus Separators You Can Use in Your Posts and Pages
- Preguntas Frecuentes Sobre Cómo Agregar Líneas Horizontales en WordPress
- Sigue Aprendiendo: Consejos para Administrar tus Publicaciones y Páginas de WordPress
¿Listo? ¡Vamos a ello!
Método 1: Agregar una línea horizontal en el editor de bloques de WordPress
Para agregar una línea horizontal usando el editor de bloques de WordPress, puedes hacer clic en el ícono '+' para agregar un nuevo bloque donde quieras que esté la línea.
A continuación, seleccionemos el bloque 'Separador' de la sección 'Elementos de diseño'.
Puedes encontrarlo fácilmente usando la barra de búsqueda.
Una vez agregado, verás tu divisor de línea horizontal en el área de contenido.
Estilizando la línea horizontal en el editor de bloques de WordPress
Por defecto, el divisor horizontal es una línea gris pálido en el centro de tu publicación o página.
Puedes cambiar su apariencia haciendo clic en la línea para seleccionar su bloque. Luego, el panel de edición 'Bloque' se abrirá en el lado derecho de tu pantalla.
Para cambiar el estilo de tu línea, simplemente haz clic en la pequeña flecha junto a 'Estilos'. Luego, verás las diferentes opciones.
Puedes cambiar la línea horizontal a una de estas si lo deseas:
- Una línea ancha que cubre todo el ancho del contenido de tu publicación.
- Se muestran tres puntos en el centro de tu publicación.
📌 Nota: En algunos temas de WordPress, tanto la línea ancha como la línea predeterminada cubrirán todo el ancho de tu publicación.
También puedes cambiar el color de tu línea horizontal en la configuración de ‘Color’.
Simplemente haz clic en una de las opciones mostradas o usa el enlace 'Color personalizado' para elegir cualquier color.
Si deseas volver al color gris predeterminado, simplemente haz clic en el botón ‘Borrar’ debajo de las opciones de color.
Aquí, nuestra línea horizontal es azul y usa el estilo ‘ancho’.
Método 2: Agregar una línea horizontal en el editor clásico de WordPress
Si estás usando el Editor Clásico (a menudo habilitado con un plugin), aún puedes agregar líneas horizontales fácilmente.
Para hacerlo, simplemente edita una publicación o página existente o crea una nueva. Si solo ves una fila de botones en la barra de herramientas encima del editor de publicaciones, haz clic en el ícono ‘Alternar barra de herramientas’ a la derecha:
Esto abrirá la segunda fila de botones, que incluye la opción de línea horizontal.
Desde aquí, lo primero que debes hacer es colocar el cursor en una nueva línea donde deseas insertar la línea horizontal.
Luego puedes hacer clic en el ícono ‘Línea horizontal’. Es el segundo desde la izquierda en la segunda fila:
Una vez agregada, verás una línea horizontal de color gris claro.
Cubrirá todo el ancho de tu publicación así:
Agregar una Línea Horizontal Manualmente Usando HTML
En algunos casos raros, es posible que necesites agregar manualmente un divisor de línea horizontal en tu contenido de WordPress.
Si es así, simplemente puedes hacerlo usando la etiqueta HTML <hr> en tu contenido:
<hr>
Puedes agregar esta etiqueta en la vista 'Texto' del Editor Clásico o dentro de un bloque 'HTML Personalizado' en el Editor de Bloques.
Es una forma rápida de agregar un separador cuando estás trabajando con código.
Método 3: Dividir un formulario largo en varias páginas con WPForms
A veces necesitas dividir un formulario largo para que no sea abrumador para los usuarios. En lugar de una línea visual, puedes dividir tu formulario en varias páginas. Te mostraremos cómo hacer esto usando nuestro creador de formularios de contacto de WordPress favorito, WPForms.
De hecho, WPForms es la herramienta que amamos y usamos nosotros mismos, por lo que recomendamos encarecidamente que la consideres. Para obtener más información sobre el plugin, visita nuestra guía completa de revisión de WPForms.
Primero, necesitarás descargar, instalar y activar el plugin WPForms. Si no estás seguro de cómo hacerlo, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
📌 Nota: La versión gratuita de WPForms funciona bien para esta guía. Dicho esto, si necesitas funciones avanzadas como lógica condicional, deberás actualizar a la versión Pro.
A continuación, puedes ir a WPForms » Añadir nuevo desde tu panel de WordPress.
En la siguiente pantalla, ingresarás un nombre para tu formulario y luego elegirás una plantilla.
Para este tutorial, vamos a usar la plantilla ‘Solicitar cotización‘.
Después de elegir una plantilla, simplemente puedes pasar el cursor del mouse sobre la plantilla y hacer clic en el botón para crear tu formulario.
A continuación, desplazaremos hacia abajo la pestaña ‘Agregar campos’ en el lado izquierdo hasta la sección ‘Campos elegantes’.
Luego, puedes arrastrar y soltar el ‘Salto de página’ donde quieras en el formulario. Lo estamos colocando justo antes del cuadro ‘Solicitar’.
💡 Consejo profesional: ¿Quieres crear tu formulario rápidamente? ¡Entonces apreciarás el creador de formularios de WPForms con IA! Simplemente da una breve descripción y espera a que la IA genere tu formulario.
Verás que el formulario ahora está dividido en 2 partes. WPForms también ha agregado automáticamente un botón ‘Siguiente’.
Puedes cambiar la etiqueta ‘Siguiente’ si quieres, y puedes agregar un botón ‘Anterior’ para que los usuarios vayan a la segunda página del formulario.
Simplemente haz clic en el campo de salto de página para editarlo.
Una vez que hayas terminado, puedes guardar el formulario haciendo clic en el botón ‘Guardar’ en la parte superior derecha.
Ahora, es hora de agregar el formulario a tu sitio web.
Haz clic en el botón ‘Incrustar’ justo al lado del botón ‘Guardar’ para empezar. Esto abrirá una ventana emergente donde puedes crear una nueva publicación o página o editar una existente.
Para este tutorial, elegiremos la opción ‘Seleccionar página existente’.
El siguiente paso es elegir entre las páginas disponibles y hacer clic en ‘¡Vamos!’
Luego serás redirigido al editor de contenido de WordPress.
Desde aquí, simplemente haz clic en el ícono ‘+’ para agregar un nuevo bloque a tu publicación o página y busca el bloque ‘WPForms’. Puedes usar la barra de búsqueda o buscar en la sección ‘Widgets’.
Una vez que lo encuentres, haz clic en él para agregar el bloque a tu página.
Ahora, verás una opción para seleccionar tu formulario.
Haz clic y elige el formulario que acabas de crear de la lista desplegable.
Una vez que hayas hecho eso, puedes publicar la publicación o página. ¡Y eso es todo!
Ahora, si visitas la publicación o página, puedes ver el formulario en acción.
Bonificación: Separadores que puedes usar en tus publicaciones y páginas
Además de una línea horizontal, el Editor de Bloques de WordPress ofrece otros bloques útiles para ayudarte a organizar tu contenido y mejorar el diseño. Echemos un vistazo a algunas buenas alternativas.
El Bloque Separador
El bloque ‘Separador’ te permite agregar espacio en blanco entre bloques.
Por ejemplo, si deseas un pequeño espacio al final de tu publicación antes de un lead magnet, puedes usar 'Espaciador'.
Así es como se ve cuando estás creando tu publicación en el editor de bloques:
Puedes personalizar la altura del separador para que se ajuste mejor a tu área de contenido.
Y así es como el separador podría aparecer en tu sitio:
El Bloque Más
Si tu tema muestra publicaciones completas en tu página principal del blog en lugar de extractos, agregar un enlace 'Más' cortará tu publicación en ese punto.
Esto requerirá que los visitantes hagan clic para leer más.
La imagen de arriba muestra lo que verás en el editor de contenido.
Y a continuación se muestra cómo podría aparecer en tu sitio para los visitantes:
Puedes aprender más sobre esto en nuestras guías sobre cómo usar correctamente el bloque más y cómo personalizar fácilmente los extractos en WordPress.
El Bloque de Salto de Página
'Salto de página' divide una publicación de blog larga en varias páginas (una técnica llamada paginación).
El bloque en sí no tiene opciones de estilo en el editor, por lo que su apariencia está controlada por tu tema de WordPress. Así es como se ve cuando estás escribiendo tu publicación:
Luego, ‘Salto de página’ usará números de página y permitirá a los lectores elegir a qué página quieren ir.
Así es como podría aparecer en tu sitio de WordPress:
Para más detalles, puedes consultar nuestra guía sobre cómo dividir las publicaciones de WordPress en varias páginas.
Cualquiera de esas podría ser una buena alternativa para agregar una línea horizontal en WordPress, dependiendo de tu objetivo.
Preguntas Frecuentes Sobre Cómo Agregar Líneas Horizontales en WordPress
¿Cuál es la etiqueta HTML para una línea horizontal?
La etiqueta HTML para una línea horizontal es <hr>, que significa "horizontal rule" (regla horizontal). Puedes agregar esta etiqueta en el editor de código para insertar manualmente un separador de línea estándar.
¿Cómo puedo personalizar la línea horizontal en WordPress?
El editor de bloques de WordPress tiene configuraciones integradas que te permiten cambiar el estilo y el color de la línea. Para personalizaciones más avanzadas, como ajustar el grosor o crear diseños únicos, normalmente usarías CSS personalizado.
¿Puedo usar una imagen en lugar de una línea como separador?
Absolutamente. Usar una imagen personalizada como separador puede agregar un toque único y de marca a tu contenido. Para un control creativo aún mayor, un plugin de constructor de páginas como SeedProd te permite diseñar divisores de sección personalizados sin necesidad de código.
Sigue Aprendiendo: Consejos para Administrar tus Publicaciones y Páginas de WordPress
Esperamos que este tutorial te haya ayudado a aprender cómo agregar separadores de línea horizontal en WordPress.
Si deseas agregar más elementos de diseño y maquetación a tus publicaciones y páginas, consulta nuestros artículos sobre:
- Los Mejores Constructores de Páginas de WordPress de Arrastrar y Soltar
- Cómo crear un divisor de formas personalizado en WordPress
- Cómo mostrar una lista de las últimas publicaciones actualizadas en WordPress
- Cómo agregar estados de contenido personalizado para publicaciones de blog en WordPress
- Cómo crear tipos de contenido personalizados en WordPress
- Cómo proteger con contraseña una página o publicación en WordPress
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.
Jiří Vaněk
¿Puedo preguntarte, si es posible hacer un divisor horizontal, en lugar de vertical?
Soporte de WPBeginner
Para eso querrías crear columnas y luego usarías CSS para agregar la propiedad de borde a las columnas.
Administrador
Shoaib
¿Usar etiquetas hr entre artículos afecta el SEO?
Soporte de WPBeginner
Dependería de cómo se estén utilizando, pero en su mayor parte no deberían tener un efecto importante.
Administrador