Tutorial WordPress: Crear separadores (dividers) ondulados entre secciones con CSS

Introducción

Este tutorial explica, paso a paso y con todo lujo de detalles, cómo crear separadores ondulados (dividers) entre secciones en WordPress usando CSS y SVG. Verás varias técnicas —inline SVG, background SVG, pseudo-elementos, clip-path y animaciones— con ejemplos listos para copiar y adaptar. Incluyo además buenas prácticas sobre accesibilidad, rendimiento y compatibilidad entre navegadores.

Concepto y alternativas

Un separador ondulado es un recurso visual que crea una transición suave entre dos secciones de una página. Las formas más comunes para implementarlo son:

SVG inline: añadir el SVG directamente en el HTML para máxima flexibilidad y control del color desde CSS.
SVG como background-image: usar la forma como fondo útil cuando no quieres tocar el HTML del contenido.
Pseudo-elementos (:before/:after): crear la forma con un SVG o con bordes y transformaciones, sin modificar la estructura del contenido.
clip-path: recortar el contenedor con una forma compleja potente pero con limitaciones de soporte y a veces complicada para curvas suaves.
Animaciones: añadir movimiento a la onda usando CSS keyframes o animaciones SVG para un efecto dinámico.

Consideraciones previas

Usa un child theme o CSS adicional (Personalizar → CSS adicional, o un plugin de CSS) para evitar perder cambios al actualizar el tema.
Accesibilidad: las ondas son decorativas marca el SVG con aria-hidden=true o role=presentation para que los lectores de pantalla lo ignoren.
Rendimiento: los SVG inline son ligeros, evita cargas innecesarias si tienes muchas secciones con SVGs distintos.
Responsive: usa unidades relativas (vw, %) y viewBox en SVG para que la onda se adapte al ancho.

Ejemplo 1 — Onda simple con SVG inline (recomendado)

Esta técnica inserta un pequeño fragmento SVG entre secciones. Es precisa y fácilmente coloreable desde CSS.

Estructura HTML típica de dos secciones (colócala en un bloque HTML en el editor o en plantilla):

ltsection class=seccion seccion--oscuragt
  ltdiv class=contenidogt
    lth3gtBloque superiorlt/h3gt
    ltpgtContenido...lt/pgt
  lt/divgt
lt/sectiongt

lt!-- Separador ondulado: SVG inline --gt
ltsvg class=divider divider--wave xmlns=http://www.w3.org/2000/svg viewBox=0 0 1200 100 preserveAspectRatio=none aria-hidden=truegt
  ltpath d=M0,30 C150,80 350,0 600,30 C850,60 1050,10 1200,40 L1200,100 L0,100 Zgtlt/pathgt
lt/svggt

ltsection class=seccion seccion--claragt
  ltdiv class=contenidogt
    lth3gtBloque inferiorlt/h3gt
    ltpgtContenido...lt/pgt
  lt/divgt
lt/sectiongt

CSS para que el SVG actúe como separador y sea responsive:

/ Estructura base /
.seccion { position: relative padding: 4rem 1rem }
.seccion--oscura { background: #1f2937 color: #fff }
.seccion--clara { background: #ffffff color: #111 }

/ Estilo del SVG divider /
svg.divider {
  display: block
  width: 100%
  height: 80px / ajustar según el diseño /
  margin: 0
  line-height: 0
  transform: translateY(1px) / evitar gaps subpixel /
}
svg.divider path {
  fill: #ffffff / color de la curva: normalmente el color de la siguiente sección /
}
/ Si quieres invertir la onda (colocar al final de la sección superior):
   añade transform: rotate(180deg) al SVG o cambia el orden/posición. /

Cómo colorear la onda según la sección

Una buena práctica es que el trazado (path) tenga el color de la sección que viene debajo. En el ejemplo la sección inferior es blanca, por eso el path se pinta de blanco. Para mantener control en CSS puedes usar variables:

:root {
  --color-oscuro: #1f2937
  --color-claro: #ffffff
}

.seccion--oscura   svg.divider path { fill: var(--color-claro) }
.seccion--clara   svg.divider path  { fill: var(--color-oscuro) }

Ejemplo 2 — Separador usando pseudo-elemento y background SVG

Si no quieres insertar SVGs en el contenido, puedes usar un pseudo-elemento sobre el contenedor para mostrar la forma como background. Esto es útil con constructores visuales cuando no puedes editar HTML.

CSS (añádelo a tu style.css o CSS adicional):

/ Contenedor de la sección /
.seccion {
  position: relative
  padding: 4rem 1rem
  overflow: visible
}

/ Pseudo-elemento que contiene la onda como background SVG inline (data URI) /
.seccion::after {
  content: 
  position: absolute
  left: 0
  right: 0
  bottom: -1px / ajusta para que se solape con la siguiente sección /
  height: 100px
  background-repeat: no-repeat
  background-position: bottom center
  background-size: 100% 100%
  pointer-events: none
  / SVG como data URI — aquí un ejemplo de onda simple /
  background-image: url(data:image/svg xmlutf8,ltsvg xmlns=http://www.w3.org/2000/svg viewBox=0 0 1200 100 preserveAspectRatio=nonegtltpath d=M0,30 C150,80 350,0 600,30 C850,60 1050,10 1200,40 L1200,100 L0,100 Z fill=#ffffff/gtlt/svggt)
}

/ Si la siguiente sección tiene un color oscuro, cambia el fill en la URL o usa otra clase /

Ventajas y limitaciones

Ventaja: no necesitas modificar el HTML. Ideal para temas donde el editor restringe HTML.
Limitación: editar el SVG embebido en el data URI es menos cómodo cuidado con el encoding de caracteres (# -> #, etc.).

Ejemplo 3 — Onda animada usando SVG y CSS

Para añadir movimiento sutil (por ejemplo, efecto marea), puedes animar la translación del path o usar dos paths superpuestos con opacidad y animación de desplazamiento.

HTML (inline SVG):

ltsvg class=divider divider--wave-anim xmlns=http://www.w3.org/2000/svg viewBox=0 0 1200 100 preserveAspectRatio=none aria-hidden=truegt
  ltg class=wave-groupgt
    ltpath class=wave wave--1 d=M0,30 C150,80 350,0 600,30 C850,60 1050,10 1200,40 L1200,100 L0,100 Z /gt
    ltpath class=wave wave--2 d=M0,40 C150,90 350,10 600,40 C850,70 1050,20 1200,50 L1200,100 L0,100 Z /gt
  lt/ggt
lt/svggt

CSS para animar:

svg.divider--wave-anim { height: 120px }
.wave { fill: rgba(255,255,255,0.9) transform-origin: center }

/ Animaciones suaves /
@keyframes waveMove {
  0%   { transform: translateX(0) }
  50%  { transform: translateX(-20px) }
  100% { transform: translateX(0) }
}
.wave--1 {
  animation: waveMove 6s ease-in-out infinite
}
.wave--2 {
  animation: waveMove 10s ease-in-out infinite reverse
  opacity: 0.6
}

Ejemplo 4 — Usar clip-path para formas onduladas

clip-path con SVG path o polygon funciona si quieres recortar el propio contenedor en lugar de superponer un SVG. Es potente pero algunos navegadores antiguos no soportan clipping complejo.

/ clipped-section recortada con una curva (ejemplo simple) /
.clipped-section {
  background: linear-gradient(180deg, #6b7280 0%, #374151 100%)
  color: #fff
  padding: 6rem 1rem
  -webkit-clip-path: path(M0,0 L0,80 C150,140 350,20 600,80 C850,140 1050,40 1200,80 L1200,0 Z)
  clip-path: path(M0,0 L0,80 C150,140 350,20 600,80 C850,140 1050,40 1200,80 L1200,0 Z)
}

Compatibilidad

clip-path con path() es potente pero tiene soporte parcial prueba en los navegadores objetivo.
SVG inline y pseudo-elementos con background SVG tienen mejor compatibilidad.

Cómo integrarlo en WordPress: instrucciones prácticas

Decide el método: SVG inline (más control) o background/pseudo-elementos (más sencillo si tu editor no permite HTML).
Añade el HTML (si usas SVG inline): usa un bloque HTML personalizado en el editor de bloques o inserta en la plantilla de tu theme (por ejemplo, template-parts o page templates).
Añade el CSS: preferiblemente en el child theme style.css o en Apariencia → Personalizar → CSS adicional. Si usas un constructor visual, introdúcelo en el CSS global o en la opción de CSS personalizado del bloque/sección.
Prueba en móviles: reduce la altura del SVG, ajusta viewBox o usa media queries para mantener la lectura y evitar que la onda tape contenido importante.
Accesibilidad: marca el SVG con aria-hidden=true y role=presentation. Si la forma transmite información importante (raro), añade alternativa textual.

Ejemplo de cómo encolar un CSS en functions.php (child theme)

Si prefieres cargar un archivo CSS específico desde tu child theme, aquí tienes un ejemplo de cómo hacerlo en functions.php:

Consejos avanzados y optimizaciones

Reutiliza SVGs: si tienes muchas secciones, crea un SVG reutilizable con colores variables usando currentColor o CSS variables.
Usa currentColor: dentro del SVG, fill=currentColor permite colorear la onda con la propiedad color del contenedor, útil para temas dinámicos.
Inline SVG minificado: elimina espacios y comentarios para reducir peso.
Controla el z-index: si la onda debe superponerse ligeramente sobre una sección, ajusta z-index y posición relativa del contenedor.
Prueba en diferentes tamaños: algunos paths se deforman en pantallas muy estrechas ajusta el viewBox o usa media queries para cambiar la altura o versión del SVG.

Checklist antes de publicar

¿El SVG está marcado como decorativo (aria-hidden / role)?
¿Funciona correctamente en móvil y tablet?
¿El color de la onda coincide con la sección de abajo (o se adapta con variables)?
¿No hay saltos visuales entre sección y separador (ajusta translateY, height, preserveAspectRatio)?
¿Se ha probado en los navegadores objetivo?

Conclusión

Crear separadores ondulados en WordPress es una mejora visual de alto impacto que puede conseguirse con técnicas sencillas (SVG inline o backgrounds) o soluciones más avanzadas (clip-path, animaciones). Escoge la técnica según tu nivel de acceso al HTML del tema y la complejidad deseada. Con SVGs responsivos, buenas prácticas de accesibilidad y un poco de CSS puedes lograr transiciones elegantes y fluidas entre secciones.

SushiHost