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 crear un divisor de formas personalizado en WordPress (2 maneras)

Nota editorial: Ganamos una comisión de los enlaces de socios en WPBeginner. Las comisiones no afectan a las opiniones o evaluaciones de nuestros editores. Más información sobre Proceso editorial.

¿Quieres añadir separadores de formas personalizados a tu sitio web WordPress?

Los separadores de formas pueden organizar su contenido de forma atractiva y llamativa. También pueden destacar el contenido más importante de su sitio para que los visitantes y clientes no se pierdan información crucial.

En este artículo, le mostraremos cómo crear un divisor de formas personalizado en WordPress.

How to create a custom shape divider in WordPress

¿Por qué crear separadores de formas personalizados en WordPress?

Un divisor de forma es un tipo de divisor de sección que se añade entre bloques de contenido.

Estos divisores pueden ser sencillos, como una línea horizontal creada con los bloques integrados de WordPress.

A custom shape divider, created using the built-in WordPress tools

Puede utilizar estos separadores básicos para organizar y separar contenidos, lo que resulta especialmente útil en páginas que abarcan muchos debates diferentes.

También puede crear separadores de formas más avanzados utilizando plugins de maquetadores de páginas y otros programas de diseño web. Estos pueden resaltar el contenido más importante de su sitio para que destaque ante visitantes y clientes.

A custom shape divider, created using SeedProd

Introducir separadores de formas que parezcan profesionales también puede hacer que sus páginas sean más interesantes y atractivas.

Por ejemplo, puede utilizarlos para crear un fondo único para el formulario de suscripción a su boletín de correo electrónico.

How to create a custom shape divider using SeedProd

Dicho esto, vamos a ver cómo se puede crear un divisor de forma personalizada en WordPress. Simplemente utilice los enlaces rápidos a continuación para saltar directamente al método que desea utilizar:

Método 1: Crear un divisor de formas simple en el editor de bloques (no requiere plugins)

La forma más fácil de crear un separador de forma personalizada para WordPress es utilizando el bloque Separador incorporado.

Este método le permite añadir un separador de línea horizontal entre cualquier bloque de WordPress y luego personalizar el color y el estilo de la línea.

A custom divider created using the WordPress block editor

Este método no le permite añadir diferentes formas a WordPress y tiene ajustes de personalización limitados. Sin embargo, no necesitarás instalar ningún plugin adicional para WordPress, por lo que es la forma más sencilla de añadir un sencillo divisor de formas a tu sitio web.

Para empezar, solo tienes que abrir la entrada o página en la que quieras añadir un divisor horizontal en el editor de contenido de Gutenberg. A continuación, haz clic en el botón ‘+’ donde quieras colocar ese divisor.

Adding a Separator block to WordPress

En el mensaje / ventana emergente, escriba “Separador”.

Cuando aparezca el bloque adecuado, haz clic para añadirlo a la página o entrada.

Add a custom shape divider to a WordPress website

Para personalizar el bloque Separador por defecto, haga clic en él y utilice los ajustes del menú de la derecha.

Puede cambiar entre por defecto, línea ancha y puntos utilizando los botones de la sección “Estilos”.

Adding different line styles in WordPress

También puede cambiar el color de la línea para que coincida con el resto de su tema o imagen de marca / marca.

Para ello, haga clic en “Fondo” y elija un color en la ventana emergente que aparece.

How to style the Separator block in WordPress

Además, puede ajustar el margen del separador.

Cuanto mayor sea el margen, más espacio habrá entre los bloques separados.

Adjusting the Separator block's margins in the block editor

Cuando esté satisfecho con el aspecto del divisor, puede hacer clic en el botón “Publicar” o “Actualizar” para activar la característica del divisor de formas.

Si desea utilizar una forma diferente y personalizar cada parte de sus divisores, le recomendamos que utilice el plugin SeedProd.

SeedProd es el mejor plugin maquetador de páginas de WordPress del mercado, y le permite añadir un divisor de forma personalizada a cualquier sección, fila o columna utilizando un sencillo editor de arrastrar y soltar.

Creating a custom shape divider in WordPress

También incluye más de 300 plantillas diseñadas por profesionales y más de 90 bloques que puede utilizar para crear hermosas páginas de inicio/ página de inicio personalizadas, páginas de destino y mucho más.

Nota: Hay una versión gratuita de SeedProd disponible en WordPress.org, pero vamos a utilizar la versión Pro, ya que viene con una amplia gama de divisores de forma.

Lo primero que tienes que hacer es instalar y activar el plugin SeedProd. Para más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, deberá introducir su clave de licencia.

Adding a license key to the SeedProd page builder

Puede encontrar esta información en su cuenta del sitio web de SeedProd. Tras introducir la clave de licencia, haga clic en el botón “Verificar clave”.

Una vez hecho esto, vaya a SeedProd ” Páginas y haga clic en el botón “Añadir nueva página de destino”.

How to create a new landing page design using SeedProd

Después de eso, es hora de elegir una plantilla de página. SeedProd tiene un montón de plantillas de diseño de sitios web profesionales que puedes ajustar para que se adapten perfectamente a tu sitio web de WordPress.

Para seleccionar una plantilla, basta con pasar el cursor por encima de ella y hacer clic en el icono “Marca de verificación”.

Choosing a page design template for your WordPress website

A continuación, escriba un nombre para la página. SeedProd creará automáticamente una URL basada en el título de la página, pero usted puede cambiar la URL a cualquier cosa que desee.

Cuando esté satisfecho con la información introducida, haga clic en el botón “Guardar y empezar a editar la página”.

Creating a custom landing page using SeedProd

A continuación, accederá al maquetador de arrastrar y soltar, listo para personalizar la plantilla.

El editor SeedProd muestra una vista previa en vivo de su diseño a la derecha y algunos ajustes de bloque a la izquierda.

The SeedProd drag and drop page builder

El menú de la izquierda también tiene bloques que puedes arrastrar a tu estructura / disposición / diseño / plantilla.

Por ejemplo, puede arrastrar y soltar bloques estándar como botones e imágenes o utilizar bloques avanzados como el temporizador de cuenta atrás, los botones para compartir medios sociales, etc.

Adding blocks to a WordPress page builder

Para personalizar un bloque, basta con hacer clic para seleccionarlo en su estructura / disposición / diseño / plantilla.

El menú de la izquierda mostrará todos los ajustes que puede utilizar para configurar ese bloque. También puede cambiar los colores de fondo de la página, añadir imágenes de fondo o cambiar la combinación de colores y tipos de letra para que coincidan mejor con su marca.

Customizing the background color in WordPress

SeedProd también viene con “Secciones”, que son colecciones de bloques que a menudo se utilizan juntos. Por ejemplo, SeedProd tiene una sección de cabecera, imagen de héroe, llamada a la acción, testimonios de clientes, características, secciones de pie de página, y mucho más.

Para consultar las distintas secciones, basta con hacer clic en la pestaña “Secciones”.

Adding a Section to a custom page template

Puede arrastrar y soltar secciones y bloques por la estructura / disposición / diseño / plantilla.

Si desea borrar un bloque, sólo tiene que pasar el cursor sobre él y hacer clic en el icono de la papelera cuando aparezca.

Deleting blocks from a custom page design

Tanto si decide utilizar una sección SeedProd como si no, ahora puede crear un divisor con forma personalizada. Simplemente haga clic para seleccionar la sección, fila o columna donde desea añadir el divisor.

A continuación, haga clic en la pestaña “Avanzado” del menú de la izquierda.

SeedProd's 'Advanced' settings

Ahora, haga clic para ampliar la sección “Divisor de formas”.

Para empezar, puede elegir dónde mostrar el divisor de formas seleccionando el botón “Arriba” o “Abajo”.

Adding a custom divider to the bottom of a WordPress block

Ahora puede abrir el menú “Tipo” y elegir el separador de formas que desee utilizar.

A medida que seleccione diferentes formas, la vista previa se actualizará automáticamente para que pueda probar diferentes estilos y ver cuál le queda mejor.

Adding custom shape dividers to a custom landing page

Después de elegir un divisor de formas, puedes darle estilo utilizando los nuevos ajustes.

Para empezar, puede hacer clic en “Color” y, a continuación, elegir un nuevo color en la ventana emergente que aparece.

Adding a color to a custom shape divider in WordPress

Una vez hecho esto, puede hacer que el divisor sea más grande o más pequeño arrastrando los carruseles “Anchura” y “Altura”.

Si ya tiene en mente una talla concreta, puede introducir esos números en las casillas.

Create a custom shape divider in WordPress

También puede intentar voltear el divisor haciendo clic para activar o desactivar el interruptor “Voltear”.

Por defecto, el separador aparecerá detrás del resto del contenido, para que los usuarios puedan ver claramente cualquier texto, imagen u otro contenido que se superponga al separador.

Sin embargo, mover la forma al frente puede crear algunos efectos interesantes. Si quieres ver cómo queda, sólo tienes que hacer clic para activar el interruptor “Traer al frente”.

Bringing the custom shape divider to the front

Para añadir más separadores, sólo tiene que seguir el mismo proceso descrito anteriormente.

Incluso puede añadir un separador de formas en la parte superior e inferior de un área, lo que a menudo crea unos resultados impresionantes y llamativos.

Adding multiple custom shape dividers to a single section

Puede seguir trabajando en la página añadiendo más bloques y personalizándolos en el menú de la izquierda.

Cuando estés satisfecho con el aspecto de la página, haz clic en el botón “Guardar”. A continuación, selecciona “Publicar” para activar la página.

Publishing a custom shape divider

Cómo añadir separadores de formas a un tema de WordPress

El editor arrastrar y soltar de SeedProd te da la libertad de añadir un separador de formas único a cualquier página. Sin embargo, a veces es posible que desee utilizar los mismos divisores de forma en varias páginas web o incluso en todo su blog o sitio web de WordPress.

Esto le ayudará a crear un diseño coherente y también puede ahorrarle mucho tiempo. En este caso, te recomendamos añadir un divisor de formas a tu tema utilizando el maquetador de temas de SeedProd.

Con SeedProd, puedes crear y personalizar un tema de WordPress sin escribir ningún código. Crea todos los archivos que componen tu tema, incluyendo la barra lateral, cabecera, pie de página, entradas individuales y mucho más.

The SeedProd theme builder

A continuación, puede personalizar estos archivos utilizando el conocido maquetador de arrastrar y soltar. Esto incluye añadir divisores de formas siguiendo el mismo proceso descrito anteriormente.

Cuando actives el nuevo tema usando SeedProd, este sobrescribirá tu tema de WordPress existente, por lo que solo deberías usar este método si quieres reemplazar tu tema actual.

Para obtener instrucciones detalladas paso a paso, consulte nuestra guía sobre cómo crear fácilmente un tema de WordPress personalizado.

Descubra más trucos y consejos de diseño de WordPress

¿Quieres añadir más características de diseño que impresionen a los visitantes de tu sitio web? Marque / compruebe estos consejos y trucos de diseño de WordPress para obtener más información:

Esperamos que este tutorial te haya ayudado a aprender cómo crear un divisor de formas personalizado en WordPress. Es posible que también desee aprender cómo añadir cuadros de características con iconos en WordPress y nuestros consejos de expertos sobre las formas de crear un sitio web de WordPress amigable para móviles.

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

1 comentarioDeja una respuesta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

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.