Cómo añadir un divisor de formas a WordPress (No se requiere código) 

La mayoría de los temas de WordPress no incluyen una forma integrada de añadir divisores de formas entre secciones. Los divisores de formas crean transiciones visuales limpias que ayudan a guiar a los visitantes por la página, sin animaciones pesadas.

No necesitas conocimientos de codificación ni de diseño para añadirlos, ya sea que gestiones un sitio de pequeña empresa, un portafolio o un blog. En esta guía, te mostraré dos formas de añadir un divisor de formas a WordPress.

Puedes colocar divisores encima o debajo de los bloques de contenido para separar temas o resaltar áreas importantes de la página.

Los divisores vienen en diferentes estilos, como divisores de formas SVG, divisores basados en líneas o texto, y diseños personalizados. La mayoría se pueden estilizar para que coincidan con los colores de tu marca y el diseño para un aspecto pulido.

Cómo añadir divisores elegantes a tu sitio de WordPress

SeedProd te permite añadir divisores de formas a cualquier sección en WordPress a través de su panel integrado de Divisores de Formas, sin necesidad de código.

Puedes elegir entre 18 estilos SVG y personalizar el color, el ancho, la altura y la posición.

Método 1: Crea divisores de sitio web con SeedProd

Usaré SeedProd para añadir divisores de formas a tu sitio de WordPress para este método.

SeedProd es uno de los mejores constructores de sitios web para WordPress. Te permite crear temas personalizados de WordPress, páginas de destino y diseños de sitios web responsivos sin código.

Viene con cientos de plantillas pre-hechas, numerosos elementos de contenido y un editor visual fácil de arrastrar y soltar para personalizar tus páginas de WordPress.

Una de las características que usaré en esta guía son los divisores de formas elegantes integrados de SeedProd. Te permiten añadir separadores de formas atractivos a cualquier publicación o página con unos pocos clics, sin necesidad de código.

Sigue los pasos a continuación para añadir divisores de formas a WordPress con SeedProd.

Instala y activa el plugin de WordPress SeedProd

Primero, haz clic aquí para empezar con SeedProd y descarga el plugin a tu ordenador. Luego, sube el archivo .zip del plugin a tu sitio web de WordPress.

Puedes seguir esta guía sobre cómo instalar un plugin de WordPress si necesitas ayuda.

Nota: Existe una versión gratuita de SeedProd, pero usaré la versión premium de SeedProd para la función de divisor de formas.

Después de instalar y activar SeedProd, ve a SeedProd » Ajustes e introduce tu clave de licencia del plugin.

Puedes encontrar tu clave de licencia iniciando sesión en el sitio web de SeedProd y buscando en la sección Descargas.

Crea un tema de WordPress o una página de destino

Hay 2 formas de usar divisores de sección en SeedProd.

Puedes crear un nuevo tema de WordPress y añadir divisores de formas a diferentes partes del tema. O puedes crear una página de destino independiente y añadir divisores de formas a una sola página.

Aquí tienes instrucciones para configurar ambas:

Tema de WordPress

El constructor de temas de SeedProd te permite crear un nuevo tema de WordPress con su editor de arrastrar y soltar.

Crea todos los archivos que componen tu tema, incluyendo la barra lateral, la cabecera, el pie de página, la publicación individual, etc. Luego puedes personalizar cada archivo visualmente, sin código.

Cuando actives tu nuevo tema, sobrescribirá tu tema de WordPress existente, así que solo elige esta opción si estás contento con perder tu tema actual.

Sigue este tutorial para crear un tema de WordPress personalizado con SeedProd.

Página de destino

El constructor de páginas de destino de SeedProd te permite usar su interfaz de arrastrar y soltar para crear páginas de destino individuales en WordPress. Puedes personalizar completamente el diseño, pero no sobrescribirá tu tema actual, a diferencia de la versión del constructor de temas.

Esta es una buena solución si quieres conservar tu tema de WordPress actual pero aún así quieres usar la función de divisor de formas.

Sigue esta guía paso a paso para crear una página de destino en WordPress.

Después de crear un tema de WordPress o una página de destino, puedes pasar al siguiente paso.

Personaliza tu diseño con un divisor de sección

Para añadir divisores de formas a WordPress, edita una plantilla de tema o una página de destino, lo que abrirá el editor visual de SeedProd. En este tutorial editaré la página de inicio de mi tema personalizado de WordPress.

Una vez dentro del editor visual, necesitarás encontrar un área de la página donde quieras añadir tu divisor de formas. SeedProd te permite añadir divisores de formas a Secciones, Columnas y Filas.

Haz clic en la sección o fila elegida para abrir su panel de configuración en el lado izquierdo. Dentro de ese panel, haz clic en la pestaña avanzada para ver más opciones de personalización.

Verás el encabezado Divisores de formas en la parte inferior del panel. Haz clic en el encabezado para abrir la configuración del divisor de formas.

Primero, puedes elegir añadir un divisor en la parte superior o inferior de tu sección.

Luego puedes hacer clic en el menú desplegable para seleccionar 18 formas diferentes para tu divisor.

Después de seleccionar una forma, SeedProd mostrará configuraciones adicionales para personalizar la apariencia de la forma.

Por ejemplo, puedes:

• Cambia el color de la forma
• Elige un ancho y alto personalizados
• Voltea la forma
• Trae la forma al frente

Puedes seguir los mismos pasos para añadir un divisor de formas en la parte inferior de una sección.

Aquí tienes algunos ejemplos más de los diferentes efectos que puedes crear con los divisores de formas de SeedProd:

Montañas

Olas

Curva

Experimenta con diferentes divisores de sitio web hasta que estés satisfecho con el aspecto de todo.

Los divisores de forma de SeedProd son responsivos por defecto. Si necesitas ocultar uno en dispositivos específicos, usa la configuración de visibilidad del bloque en la pestaña Avanzado.

Publica tus divisores elegantes en WordPress

Ahora que tus divisores de forma están en su lugar, puedes publicar tu nuevo diseño.

Si estás creando un tema de WordPress, puedes publicarlo yendo a SeedProd Theme Builder y haciendo clic en el interruptor "Habilitar tema de SeedProd" a la posición Sí.

Simplemente haz clic en la flecha desplegable del botón Guardar y haz clic en Publicar para las páginas de destino.

Ahora puedes visitar tu sitio web en vivo y ver tu divisor de sección en acción. Aquí tienes un ejemplo de nuestro sitio de demostración con divisores de sección en nuestra sección de imagen de fondo principal:

Añadir iconos y divisores de texto con SeedProd

Si los divisores de sección elegantes no se adaptan a las necesidades de tu sitio web, también puedes usar el bloque Divisor de SeedProd para añadir una línea de texto y divisores de iconos a tu sitio de WordPress.

El principio es el mismo que antes, pero en lugar de elegir una opción en filas, columnas o secciones, tendrás que arrastrar el bloque Divisor a tu página.

Desde allí, puedes hacer clic en un cuadro desplegable para elegir un divisor de línea de iconos como este:

O un divisor de texto similar a este ejemplo:

Así que ahora tienes 2 formas de crear divisores atractivos en WordPress con SeedProd. A continuación, veamos cómo añadir divisores sin un plugin.

Método 2: Crear un divisor de sección en WordPress sin un plugin

También puedes usar la configuración integrada de WordPress para añadir divisores a tu sitio. Este método es útil si no quieres instalar plugins de WordPress adicionales.

Sin embargo, las opciones de personalización son más limitadas. Por ejemplo, solo puedes añadir diferentes estilos de línea y cambiar el color de fondo de cada salto de línea.

Sugiero usar el Método 1 para opciones de personalización avanzadas. Sigue los pasos a continuación para añadir un divisor de sección de línea horizontal en WordPress sin un plugin.

Añadir una línea horizontal en el editor de bloques de WordPress

Para añadir un divisor de sección horizontal usando el editor de bloques de WordPress, abre una entrada o página y haz clic en el icono más (+) donde quieras que esté tu divisor.

A continuación, escribe "Separador" en el cuadro de búsqueda y haz clic en el bloque Separador.

Después de añadir el bloque a tu página, verás un separador horizontal entre cada sección de texto.

Puedes cambiar el estilo del divisor haciendo clic en Predeterminado, Línea ancha o Puntos en el panel derecho.

También puedes cambiar el color de fondo del separador en el mismo panel.

Cuando estés satisfecho con el aspecto de todo, actualiza o publica tu página para ver los resultados.

Añadir una línea horizontal en el editor clásico de WordPress

Sigue estas instrucciones para añadir divisores de sección a tu sitio web usando el editor clásico de WordPress.

Edita una entrada o página existente o crea una nueva. Si no puedes ver todas las configuraciones del editor, haz clic en el icono Cambiar barra de herramientas.

A continuación, haz clic en el lugar de tu página donde deseas agregar tu divisor. Luego, haz clic en el icono Línea horizontal.

Tu divisor de línea horizontal será en blanco y negro o de un color gris claro y cubrirá toda tu publicación o página como esta:

Preguntas frecuentes sobre divisores de sección en WordPress

¿Cómo agrego un divisor de forma a una página de WordPress sin código?

Abre cualquier sección en el editor visual de SeedProd, haz clic en la pestaña Avanzado y desplázate hasta el panel Divisores de forma. Elige entre 18 formas SVG, establece el color, el ancho y la altura, y luego publica. No se requiere CSS ni código.

¿El divisor de forma de SeedProd funciona en cualquier página o publicación?

Sí. Los divisores de forma funcionan en cualquier sección o fila dentro del editor visual de SeedProd, ya sea que estés creando una página de destino o un tema completo de WordPress. Puedes agregar un divisor en la parte superior o inferior de cualquier sección.

¿La función de divisor de forma está disponible en la versión gratuita de SeedProd?

No. Los divisores de forma son una función premium. Necesitarás un plan de pago de SeedProd para acceder al panel Divisores de forma en la configuración Avanzada.

¿Puedo usar divisores de forma con mi tema de WordPress existente?

Sí, con una advertencia. Si usas el creador de páginas de destino de SeedProd, tu tema existente permanece en su lugar y solo la página de destino utiliza divisores de forma. Si activas el creador de temas de SeedProd, reemplaza tu tema actual por completo.

¿Cuál es la diferencia entre un divisor de forma y un bloque separador en WordPress?

Un bloque separador (el bloque nativo de WordPress) agrega una línea horizontal simple entre las áreas de contenido. Un divisor de forma es un gráfico SVG de ancho completo, como ondas o curvas, que abarca todo el borde de la sección. Los divisores de forma son más distintivos visualmente y totalmente personalizables en SeedProd.

SeedProd y su pequeña empresa

Esperamos que este artículo te haya ayudado a aprender a agregar un divisor de sección a WordPress. Con el potente creador de sitios web de arrastrar y soltar de SeedProd, crear divisores de forma elegantes es muy fácil.

Aquí tienes algunos artículos relacionados que podrían resultarte útiles:

• Cómo crear una página de blog en WordPress
• Cómo añadir un cuadro de autor en WordPress
• Cómo agregar una barra lateral personalizada a WordPress

¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.