Cómo crear un divisor de formas personalizado en WordPress (2 formas)

¿Alguna vez has notado que algunos sitios web se sienten más atractivos al desplazarse? A menudo hay un elemento de diseño sutil en juego: los divisores de formas que crean transiciones suaves y fluidas entre diferentes secciones.

Estas líneas curvas, anguladas o en zigzag pueden parecer un detalle pequeño, pero marcan una gran diferencia en lo profesional y moderno que se ve tu sitio.

Además, ayudan a dividir el contenido de forma natural y guían la mirada de tus visitantes exactamente a donde quieres que vayan.

Después de probar múltiples opciones para encontrar los métodos más confiables, hemos reducido la lista a dos que consistentemente brindan excelentes resultados.

Hoy, te guiaremos a través de estos dos enfoques sencillos: usando el método predeterminado de WordPress y SeedProd.

¿Por qué agregar divisores de formas personalizados a tu sitio de WordPress?

Un divisor de formas es un tipo de divisor de sección que agregas entre bloques de contenido.

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

Puedes usar estos divisores básicos para organizar y separar contenido, lo cual es particularmente útil en páginas que cubren muchos temas diferentes.

También puedes crear divisores de formas más avanzados utilizando plugins de constructor de páginas y otro software de diseño web. Estos pueden resaltar el contenido más importante de tu sitio para que destaque ante los visitantes y clientes.

Introducir divisores de formas que se vean profesionales también puede hacer que tus páginas sean más interesantes y atractivas.

Por ejemplo, podrías usarlos para crear un fondo único para tu formulario de suscripción al boletín de correo electrónico.

Dicho esto, veamos cómo puedes crear un divisor de forma personalizado en WordPress. Simplemente usa los enlaces rápidos a continuación para ir directamente al método que deseas usar:

• Método 1: Crear un divisor de forma simple en el editor de bloques (no se requiere plugin)
• Método 2: Crear un divisor de forma personalizado en WordPress usando un constructor de páginas (recomendado)
• Frequently Answered Questions: Custom Shape Dividers

Método 1: Crear un divisor de forma simple en el editor de bloques (no se requiere plugin)

La forma más fácil de agregar un divisor de forma de WordPress es usando el bloque Separador incorporado.

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

Este método no te permite agregar diferentes formas a WordPress y tiene configuraciones de personalización limitadas. Sin embargo, no necesitarás instalar un plugin de WordPress adicional, por lo que esta es la forma más fácil de agregar un divisor de forma simple a tu sitio web.

Para empezar, simplemente abre la publicación o página donde deseas agregar un divisor horizontal en el editor de contenido de Gutenberg. Luego, haz clic en el botón ‘+’ donde deseas colocar ese divisor.

En la ventana emergente, escribe ‘Separador’.

Cuando aparezca el bloque correcto, haz clic para agregarlo a la página o publicación.

Para personalizar el bloque Separador predeterminado, haz clic en él y luego usa la configuración en el menú de la derecha.

Puedes alternar entre línea predeterminada, línea ancha y puntos usando los botones en la sección ‘Estilos’.

También puedes cambiar el color de la línea para que coincida con el resto de tu tema o marca.

Para hacer esto, haz clic en ‘Fondo’ y luego elige un color del cuadro emergente que aparece.

Además, puedes ajustar el margen del separador.

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

Cuando estés satisfecho con el aspecto del divisor, puedes hacer clic en el botón ‘Publicar’ o ‘Actualizar’ para activar la función de divisor de formas.

Método 2: Crear un divisor de forma personalizado en WordPress usando un constructor de páginas (recomendado)

Si buscas usar una forma diferente y personalizar cada parte de tus divisores, te recomendamos usar el plugin SeedProd.

SeedProd es el mejor plugin constructor de páginas de WordPress del mercado, y te permite agregar un divisor de formas personalizado a cualquier sección, fila o columna usando un editor simple de arrastrar y soltar.

Hemos probado a fondo esta herramienta en nuestro entorno de demostración y descubrimos que es increíblemente fácil de usar e intuitiva para principiantes. Hizo que la creación de páginas se sintiera sin esfuerzo, especialmente para los usuarios nuevos. Puedes obtener más información sobre lo que descubrimos en nuestra reseña completa.

SeedProd también tiene más de 300 plantillas diseñadas profesionalmente y más de 90 bloques que puedes usar para crear hermosas páginas de inicio personalizadas, páginas de destino y más.

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

Tras la activación, necesitas ingresar tu clave de licencia.

Puedes encontrar esta información en tu cuenta en el sitio web de SeedProd. Después de ingresar la clave de licencia, haz clic en el botón ‘Verificar clave’.

Hecho eso, ve a SeedProd » Páginas y haz clic en el botón ‘Añadir nueva página de destino’.

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

Para seleccionar una plantilla, simplemente pasa el mouse sobre ella y luego haz clic en el ícono de ‘Marca de verificación’.

A continuación, escribe un nombre para la página. SeedProd creará automáticamente una URL basada en el título de la página, pero puedes cambiar la URL a lo que quieras.

Cuando estés satisfecho con la información que has introducido, haz clic en el botón ‘Guardar y empezar a editar la página’.

A continuación, serás llevado al constructor de páginas de arrastrar y soltar, listo para personalizar la plantilla.

El editor de SeedProd muestra una vista previa en vivo de tu diseño a la derecha y algunas configuraciones de bloques a la izquierda.

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

Por ejemplo, puedes arrastrar y soltar bloques estándar como botones e imágenes o usar bloques avanzados como el temporizador de cuenta atrás, botones para compartir en redes sociales y más.

Para personalizar un bloque, simplemente haz clic para seleccionarlo en tu diseño.

El menú de la izquierda mostrará entonces todos los ajustes que puedes usar para configurar ese bloque. También puedes cambiar los colores de fondo de la página, añadir imágenes de fondo o cambiar el esquema de color y las fuentes para que coincidan mejor con tu marca.

SeedProd también viene con ‘Secciones’, que son colecciones de bloques que se usan a menudo juntos. Por ejemplo, SeedProd tiene una sección de encabezado, imagen principal, llamada a la acción, testimonios de clientes, características, secciones de pie de página y más.

Para revisar las diferentes secciones, simplemente haz clic en la pestaña ‘Secciones’.

Puedes mover secciones y bloques por tu diseño usando arrastrar y soltar.

Si quieres eliminar un bloque, simplemente pasa el cursor sobre él y haz clic en el ícono del bote de basura cuando aparezca.

Ya sea que elijas usar una sección de SeedProd o no, ahora puedes crear un divisor de forma personalizado. Simplemente haz clic para seleccionar la sección, fila o columna donde deseas agregar el divisor.

Luego, haz clic en la pestaña ‘Avanzado’ en el menú de la izquierda.

Ahora, haz clic para expandir la sección ‘Divisor de Forma’.

Para empezar, puedes elegir dónde mostrar el divisor de forma seleccionando el botón ‘Superior’ o ‘Inferior’.

Ahora puedes abrir el menú ‘Tipo’ y elegir el divisor de forma que deseas usar.

A medida que selecciones diferentes formas, la vista previa en vivo se actualizará automáticamente para que puedas probar diferentes estilos y ver cuál se ve mejor.

Después de elegir un divisor de forma, puedes estilizarlo usando la nueva configuración.

Para empezar, puedes hacer clic en 'Color' y luego elegir un nuevo color del cuadro emergente que aparece.

Con eso hecho, puedes hacer que el divisor sea más grande o más pequeño arrastrando los controles deslizantes de 'Ancho' y 'Alto'.

Si ya tienes un tamaño específico en mente, puedes escribir esos números en los cuadros.

También puedes intentar voltear el divisor haciendo clic para activar o desactivar el interruptor 'Voltear'.

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

Sin embargo, mover la forma al frente puede crear algunos efectos interesantes. Si quieres ver cómo se ve esto, simplemente haz clic para activar el interruptor 'Traer al frente'.

Para agregar más divisores, simplemente sigue el mismo proceso descrito anteriormente.

Incluso puedes agregar un divisor de forma en la parte superior e inferior de un área, lo que a menudo crea resultados impresionantes y llamativos.

Puedes continuar trabajando en la página agregando más bloques y personalizando esos bloques en el menú de la izquierda.

Cuando estés satisfecho con el aspecto de la página, haz clic en el botón ‘Guardar’. Luego puedes seleccionar ‘Publicar’ para que esa página esté activa.

Cómo agregar divisores de forma a un tema de WordPress

El editor de arrastrar y soltar de SeedProd te da la libertad de agregar un divisor de forma único a cualquier página. Sin embargo, a veces es posible que desees usar los mismos divisores de forma en varias páginas web o incluso en todo tu blog de WordPress o sitio web.

Esto te ayudará a crear un diseño coherente y también puede ahorrarte mucho tiempo. En este caso, recomendamos agregar un divisor de forma a tu tema usando el constructor de temas de SeedProd.

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

Luego puedes personalizar estos archivos usando el familiar constructor de arrastrar y soltar. Esto incluye agregar divisores de forma siguiendo el mismo proceso descrito anteriormente.

Cuando activas el nuevo tema usando SeedProd, sobrescribirá tu tema de WordPress existente, por lo que solo debes usar este método si deseas reemplazar tu tema actual.

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

Preguntas frecuentes: Divisores de forma personalizados

Aquí hay algunas preguntas que nuestros lectores hacen con frecuencia sobre la creación de un divisor de forma personalizado:

¿Los divisores de forma afectarán la velocidad de mi sitio?

En general, los divisores de forma no tienen un gran impacto en el rendimiento, especialmente si se crean usando CSS puro o SeedProd. Son ligeros y cargan rápido en el navegador.

Sin embargo, si los usas en exceso o dependes de archivos de imagen, podría aumentar ligeramente los tiempos de carga. Para mantener tu sitio rápido:

• Usa plugins mínimos.
• Prefiere SVGs a archivos de imagen grandes.
• Evita superponer demasiados efectos en una sola sección.

Equilibrar el diseño y la velocidad es clave para una experiencia de usuario fluida.

¿Cómo me aseguro de que mis divisores de forma se vean bien en dispositivos móviles?

El diseño adaptable es súper importante. Si estás usando un constructor de páginas, la mayoría te permitirá ajustar la visibilidad, altura y orientación del divisor de forma por separado para escritorio, tableta y móvil.

Aquí tienes algunos consejos:

• Prueba tus divisores de forma en diferentes tamaños de pantalla. SeedProd lo hace fácil al permitirte previsualizar cómo se ve tu diseño en el móvil directamente dentro del constructor de arrastrar y soltar.
• Usa formas más pequeñas o simplificadas en el móvil.
• Evita formas que dificulten la lectura del texto o que se superpongan a contenido importante.

Herramientas como SeedProd ofrecen controles responsivos que te permiten ajustar cada versión de tu sitio fácilmente.

¿Dónde puedo encontrar SVGs de divisores de formas listos para usar?

Hay muchos recursos gratuitos donde puedes descargar divisores de formas SVG prediseñados. Estos funcionan muy bien si quieres algo personalizado sin tener que diseñar desde cero.

Aquí tienes algunas opciones:

• Haikei – Generador gratuito de SVG para formas únicas y personalizables.
• ShapeDividers.com – Ofrece varios divisores SVG que puedes copiar y pegar.

Una vez que descargues el SVG, puedes pegarlo en un bloque HTML personalizado o incluirlo en los archivos de tu tema, dependiendo de tu configuración.

Descubre más consejos y trucos de diseño para WordPress

¿Quieres agregar más funciones de diseño que impresionen a los visitantes de tu sitio web? Consulta estos consejos y trucos de diseño para WordPress para obtener más información:

• Cómo agregar un efecto parallax a cualquier tema de WordPress
• Cómo crear una barra de pie de página flotante "pegajosa" en WordPress
• Guía para principiantes para crear un menú de WordPress responsivo y listo para dispositivos móviles
• Cómo agregar una animación de precarga a WordPress (paso a paso)
• Cómo agregar letras capitales en las entradas de WordPress
• Guía para principiantes para agregar modo oscuro a tu sitio web de WordPress (fácil)
• Cómo añadir un fondo animado en WordPress

Esperamos que este tutorial te haya ayudado a aprender cómo crear un divisor de formas personalizado en WordPress. También podrías querer aprender cómo agregar cajas de características con íconos en WordPress y nuestros consejos expertos sobre formas de crear un sitio web de WordPress amigable para dispositivos móviles.

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.