Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo añadir un separador de línea horizontal en WordPress (3 métodos)

Añadir una línea horizontal a una entrada o página de WordPress es una forma eficaz de mejorar la legibilidad. Estas líneas ayudan a dividir entradas largas en secciones manejables, garantizando que su contenido siga siendo atractivo.

Los separadores horizontales también son perfectos para llamar la atención sobre anuncios o promociones importantes. Separan claramente las distintas partes de la página y facilitan la lectura.

En esta guía, le guiaremos a través de 3 métodos sencillos para añadir separadores de líneas horizontales en WordPress. También compartiremos algunas alternativas de separadores de línea horizontales.

How to add a horizontal line in WordPress

¿Por qué debería añadir un separador de línea horizontal en WordPress?

Los visitantes solo tardan unos segundos en decidir si abandonan su página. Dependiendo del dispositivo, los navegadores pueden mostrar las entradas de tu blog como largos muros de texto.

Muchos lectores se irán si el contenido es demasiado difícil de leer, aunque el artículo del blog esté repleto de valor.

Añadir un separador de líneas horizontal podría ser todo lo que necesita para hacer que su contenido se lea.

Un separador de líneas horizontal puede ayudar a mejorar la legibilidad y, en última instancia, aumentar la participación de los usuarios en las entradas y páginas de tu blog. Además, puede resaltar puntos clave, lo que ayuda a enfatizar citas / transiciones importantes dentro de su contenido.

Dado que esta es una guía completa sobre cómo añadir un divisor de línea horizontal en WordPress, puede que le resulte útil utilizar nuestra tabla de contenidos para encontrar el método que le gustaría utilizar:

¿Preparados? Vamos a ello.

Método 1: Añadir una línea horizontal en el editor de bloques de WordPress

Para añadir una línea horizontal usando el editor de bloques de WordPress, puedes hacer clic en el icono ‘+’ para añadir un nuevo bloque donde quieras que esté la línea.

Adding a new block where you want your horizontal line

A continuación, seleccionemos el bloque “Separador” de la sección “Elementos de disposición”.

Puede encontrarlo fácilmente utilizando la barra de búsqueda.

Find and add the Separator block

Una vez añadido, verá su divisor de línea horizontal en su área de contenido.

Estilizar la línea horizontal en el editor de bloques de WordPress

Por defecto, el separador horizontal es una línea gris pálido que cruza el centro de la entrada o página.

Puedes cambiar su aspecto al hacer clic en la línea para seleccionar su bloque. A continuación, se abrirá el panel de edición “Bloque” en la parte derecha de la pantalla.

Click on the Separator block to select it and edit the settings

Para cambiar el estilo de tu línea, sólo tienes que hacer clic en la flechita que hay al lado de Estilos. Entonces, verás las distintas opciones.

Si lo desea, puede cambiar la línea horizontal por una de éstas:

  • Una línea ancha que abarca todo el ancho del contenido de la entrada.
  • Aparecen tres puntos en el centro de tu entrada.
The different styles available for the Separator block

Nota: En algunos temas de WordPress, tanto la línea ancha como la línea por defecto cubrirán todo el ancho de su entrada.

También puedes cambiar el color de la línea horizontal en los ajustes de “Color”. Simplemente haga clic en una de las opciones mostradas o utilice el enlace “Color personalizado” para elegir cualquier color.

Change the color of the horizontal line

Si desea volver al color gris por defecto, sólo tiene que hacer clic en el botón “Vaciar” situado bajo las opciones de color.

Aquí, nuestra línea horizontal es azul y utiliza el estilo “ancho”.

A horizontal line that's been modified to be wide and blue

Método 2: Añadir una línea horizontal en el editor clásico de WordPress

Si aún utilizas el editor clásico, no te preocupes; puedes seguir añadiendo líneas horizontales básicas.

Para ello, basta con editar una entrada o página existente o crear una nueva. Si solo ves una fila de botones en la barra de herramientas encima del editor de entradas, haz clic en el icono Conmutador de la barra de herramientas de la derecha:

Click the Toolbar Toggle button to see the second row of icons

Se abrirá la segunda fila de botones, que incluye la opción de línea horizontal.

Ahora, sigue adelante y pon un salto de línea entre los párrafos donde quieres que vaya la línea horizontal. Para ello, haz clic en el icono “Línea horizontal”. Es el segundo desde la izquierda en la segunda fila:

The horizontal line button in the classic WordPress editor

Una vez añadida, verás una línea horizontal de color gris claro.

Cubrirá todo el ancho de tu entrada, así:

A horizontal rule created using the classic editor

Añadir manualmente un divisor de línea horizontal mediante HTML

En algunos casos excepcionales, es posible que tenga que añadir manualmente un divisor de línea horizontal en el contenido de WordPress.

Si es así, puede hacerlo simplemente utilizando la etiqueta HTML hr en su contenido:

<hr>

Esto añadirá el separador de línea horizontal al contenido de tus entradas.

Método 3: Añadir un salto de página en los formularios de WordPress usando WPForms

¿Y si quieres poner una pausa no en una entrada o página sino en un formulario de contacto de WordPress? También puedes hacerlo.

Vamos a utilizar WPForms para esto.

En primer lugar, tendrá que descargar, instalar y activar el plugin WPForms. Si no está seguro de cómo hacerlo, marque / compruebe nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

A continuación, puede ir a WPForms ” Añadir nuevo desde su escritorio de WordPress.

Creating a new form using WPForms

En la siguiente pantalla, introduzca un nombre para el formulario y elija una plantilla.

Para este tutorial, vamos a utilizar la plantilla“Formulario de solicitud de presupuesto“.

Después de elegir una plantilla, basta con pasar el cursor del ratón por encima de la plantilla y hacer clic en el botón para crear el formulario.

Creating a quote form in WPForms

A continuación, vamos a desplazarnos por la pestaña “Añadir campos” de la parte izquierda hasta la sección “Campos extravagantes”.

Luego, puedes arrastrar y soltar el ‘Salto de Página’ donde quieras en el formulario. Lo pondremos justo antes de la casilla ‘Solicitud’.

Adding a page break in WPForms

Verá que ahora el formulario está dividido en dos partes. WPForms también ha añadido automáticamente un botón ‘Siguiente’.

Si lo desea, puede cambiar la etiqueta “Siguiente” y añadir un botón “Anterior” para que los usuarios vayan a la segunda página del formulario.

Basta con hacer clic en el campo de salto de página para editarlo.

Editing the page break field in WPForms

Cuando hayas terminado, puedes guardar el formulario al hacer clic en el botón “Guardar” de la parte superior derecha.

Ahora, es el momento de añadir el formulario a su sitio web.

Para empezar, haz clic en el botón “Incrustar”, justo al lado del botón “Guardar”. Se abrirá una ventana de indicaciones en la que podrás crear una nueva entrada o página o editar una ya existente.

Para este tutorial, elegiremos la opción “Seleccionar página existente”.

WPForms' embed prompt window

El siguiente paso consiste en elegir una de las páginas disponibles y hacer clic en “¡Vamos!

A continuación, se le redirigirá al editor de contenido de WordPress.

Desde aquí, simplemente haz clic en el icono ‘+’ para añadir un nuevo bloque a tu entrada o página y encuentra el bloque ‘WPForms’. Puedes utilizar la barra de búsqueda o buscar en la sección ‘Widgets’.

Cuando lo encuentres, haz clic en él para añadir el bloque a tu página.

Adding the WPForms block to your page or post

Ahora verás una opción para seleccionar tu formulario.

Elija el formulario que acaba de crear en la lista desplegable.

Choose your form from the dropdown list

Una vez hecho esto, puedes publicar la entrada o la página. ¡Y ya está!

Ahora, si visitas la entrada o la página, podrás ver el formulario en acción.

The form with a page break on the website

Consejo extra: Otros separadores que puedes usar en tus entradas y páginas

El editor de bloques por defecto de WordPress te permite añadir múltiples tipos de separadores a tus entradas y páginas.

Además del separador de líneas horizontales, las demás opciones del conjunto de bloques “Elementos de disposición” incluyen el “Espaciador”, el enlace “Más” y los bloques “Salto de página”.

El bloque espaciador

El bloque “Espaciador” permite añadir espacios en blanco entre los bloques. Por ejemplo, si quieres dejar un pequeño espacio al final de la entrada antes de una oferta especial, puedes utilizar ‘Espaciador’.

Así es como se ve cuando estás creando tu entrada en el editor de bloques:

The Spacer block in the block editor

Puede personalizar la altura del espaciador para que se ajuste mejor a su área de contenido.

Y así es como podría aparecer el espaciador en su sitio:

How the spacer block appears in a page or post

El bloque More

Si tu tema muestra entradas completas en la página principal de tu blog en lugar de extractos, al enlazar “Más” se cortará la entrada en ese punto.

Esto obligará a los visitantes a hacer clic para leer más.

The More block in the post editor

La imagen anterior muestra lo que verá en el editor de contenido.

Y a continuación le mostramos cómo podría aparecer en su sitio para los visitantes:

The Read More block in a post on the site

Puede aprender más acerca de esto en nuestras guías sobre cómo utilizar correctamente el bloque más y cómo personalizar fácilmente extractos en WordPress.

El bloque de salto de página

El salto de página permite dividir entradas largas de blog en varias páginas, pero no se puede personalizar de ninguna manera. Así es como se ve cuando estás creando tu entrada:

The page break block shown in the block editor

Entonces, “Salto de página” utilizará los números de página y permitirá a los lectores elegir a qué página quieren ir.

Así es como podría aparecer en su sitio:

The page break as it appears on a site

Cualquiera de ellas podría ser una buena alternativa a añadir una línea horizontal en WordPress, dependiendo de su objetivo.

Esperamos que este tutorial te haya ayudado a aprender cómo añadir separadores de líneas horizontales en WordPress. Si quieres añadir más elementos de diseño y disposición a tus entradas y páginas, comprueba nuestro artículo sobre los mejores editores de arrastrar y soltar para páginas de WordPress o lee nuestra entrada de blog sobre cómo crear un separador de formas personalizado en WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

4 comentariosDeja una respuesta

  1. Jiří Vaněk

    May I ask you, if its possible to make dividier horizontal, instead fo vertical?

    • WPBeginner Support

      For that you would want to create columns and then you would use css to add the border property to the columns.

      Administrador

  2. Shoaib

    Does using hr tags between article affect SEO?

    • WPBeginner Support

      It would depend on how they are being used but for the most part they should not have a major effect.

      Administrador

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.