Los divisores estándar de Elementor son suficientes para diseños típicos, pero cuando un diseño exige un contorno de onda único, un bisel con identidad de marca o una diagonal que coincida exactamente con la maqueta, el conjunto integrado de 26 formas se queda corto. El diseñador crea una transición personalizada entre secciones y el desarrollador se pregunta: ¿cómo añadir su propio SVG a Elementor para que tome el color de los ajustes y sobreviva a la próxima actualización del plugin?

El problema no es la falta de mecanismo: el filtro elementor/shapes/additional_shapes existe en el núcleo desde hace mucho tiempo. El problema es que la mayoría de los tutoriales en línea sugieren colocar el SVG en la propia carpeta del plugin, lo cual es una vía directa para perder el archivo durante las actualizaciones automáticas. Y los parámetros url/path a menudo se omiten; sin ellos, el divisor simplemente no se renderiza en el editor.

A continuación se presenta un flujo de trabajo probado: desde la preparación del archivo vectorial hasta su registro mediante un filtro con ubicación en el tema hijo. Después de esto, su divisor de forma personalizado aparecerá en el menú desplegable junto a los estándar y persistirá independientemente de las actualizaciones de Elementor.

💡 Resumen rápido:

• Prepare un boceto rasterizado en Photoshop: recorte el área requerida y rellénela con negro.
• Convierta el PNG a SVG mediante un servicio en línea, simplificándolo a un solo color.
• Limpie el código SVG: elimine etiquetas innecesarias, añada elementor-shape-fill y preserveAspectRatio.
• Coloque el archivo en la carpeta del tema hijo y regístrelo mediante add_filter con las claves url, path y has_negative.
• Pruebe el divisor en el editor de Elementor, cambie el color y la altura.

Qué es un divisor de forma y por qué añadir uno propio

Un divisor de forma es una figura SVG superpuesta en el borde superior o inferior de una sección en Elementor. Crea una transición suave entre bloques: una onda, un bisel, un arco o un borde puntiagudo. La biblioteca estándar incluye 26 formas: montañas, gotas, nubes, curvas, etc.

Un divisor personalizado es necesario en tres casos. Primero, cuando el diseño contiene una forma única que no se encuentra en el conjunto estándar. Segundo, por motivos de marca (por ejemplo, una transición con forma de logotipo o una onda distintiva). Tercero, cuando varios proyectos utilizan el mismo conjunto personalizado; en ese caso, los divisores se añaden de forma centralizada mediante un tema hijo o un plugin personalizado.

Técnicamente, el mecanismo se implementa a través del filtro elementor/shapes/additional_shapes. El gancho acepta un array donde cada elemento describe un divisor: el nombre, la ruta del archivo, la capacidad de volteo y la opción negativa. Tras el registro, la forma aparece en el menú desplegable del editor.

Creación de un archivo SVG para el divisor

El principio de funcionamiento de los divisores de forma es que el área visible es aquello que usted rellena en el SVG. Así que primero debe comprender qué parte del boceto se convertirá en la forma.

Supongamos que el diseñador creó una transición con una sección inferior azul y una "onda" superior blanca. El contorno blanco debe convertirse en la forma; eso es lo que necesita recortar y rellenar con un color sólido.

Punto clave: si se equivoca y selecciona el área azul en lugar de la blanca, el divisor en Elementor se verá invertido o recortado. Determine siempre qué debe ser exactamente la forma visible.

Pasos en Photoshop

Abra el boceto en Photoshop y complete tres pasos:

• Elimine el área de fondo que NO debe ser el divisor. En el ejemplo anterior, elimine la parte azul.

• Rellene el área restante (la "onda" blanca) con negro. El negro simplifica el trazado vectorial posterior; el conversor no se confunde con diferentes tonos.

• Recorte el lienzo a los límites de la forma y exporte a PNG. Photoshop genera SVG con envoltorios y artefactos adicionales, por lo que el PNG como formato intermedio es más fiable.

¿Por qué negro en lugar del color del sitio directamente? Elementor aplica el color del divisor desde sus propios ajustes; el relleno del SVG no importa. Y una silueta negra sobre fondo blanco produce el vector más limpio después del trazado automático.

Resultado tras el procesamiento en Photoshop:

Conversión de PNG a SVG

A continuación, necesita un vector limpio. Utilice el conversor en línea pngtosvg.com; no requiere registro y maneja formas de un solo color sin ruido innecesario en el código.

Suba el PNG y establezca los parámetros:

• Simplificación máxima, un color. Esto elimina curvas "basura" y mantiene el SVG compacto.

• Número de colores: 1 (o 2 si necesita un fondo transparente; en ese caso, establezca el segundo color como transparente).

Descargue el SVG resultante y ábralo en un editor de código: Notepad++, VS Code o un editor de texto plano. A continuación viene la limpieza manual.

Ajuste del SVG a los requisitos de Elementor

Para que el divisor tome el color y escale correctamente, realice tres ediciones directamente en el código del archivo:

Añada la clase elementor-shape-fill. Sin ella, Elementor no puede recolorear el SVG. Busque la etiqueta <path> o <polygon> y añada el atributo class="elementor-shape-fill".

Elimine width y height. Conserve solo viewBox y añada preserveAspectRatio="none"; esto permite que el divisor se estire a todo el ancho de la sección. Si los atributos width/height no están presentes, déjelos como están y solo asegúrese de que viewBox esté ahí.

Elimine todo lo innecesario. Borre las construcciones <?xml...>, <!DOCTYPE...> y cualquier encabezado XML fuera de la etiqueta <svg>. Conserve solo el código limpio dentro de <svg>...</svg>; Elementor analiza dichos archivos de forma más fiable.

El SVG final debería verse aproximadamente así:

1
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
2
  <path class="elementor-shape-fill" d="M0,0 C300,100 900,0 1200,120 L0,120 Z"/>
3
</svg>

Dónde colocar el archivo SVG

El enfoque más burdo y común es la carpeta /wp-content/plugins/elementor/assets/shapes/. Funciona exactamente hasta la primera actualización automática de Elementor, que sobrescribe silenciosamente el contenido de la carpeta del plugin junto con su archivo.

El enfoque correcto es un tema hijo. Cree una carpeta assets/shapes/ dentro de él y coloque el SVG allí:

1
/wp-content/themes/your-child-theme/assets/shapes/shape-custom.svg

Casi todos los temas modernos (Hello Elementor, GeneratePress, Astra, Kadence) admiten temas hijos. Si no tiene uno, créelo: en la raíz del tema, solo necesita un style.css con un encabezado /* Theme Name: My Child Theme Template: parent-theme */ y un functions.php.

Una alternativa es un plugin personalizado. Pero para uno o dos divisores, un tema hijo es más sencillo y no crea entidades adicionales.

Código para registrar el divisor

En el archivo functions.php del tema hijo (o mediante el plugin Code Snippets), añada el siguiente código:

1
/**
2
 * Registers a custom shape divider in Elementor.
3
 * SVG is located in the assets/shapes/ folder of the child theme.
4
 */
5
add_filter( 'elementor/shapes/additional_shapes', function( $additional_shapes ) {
6
 
7
    $additional_shapes['shape-custom-wave'] = [
8
        'title'        => esc_html__( 'Custom Wave', 'my-child-theme' ),
9
        'url'          => get_stylesheet_directory_uri() . '/assets/shapes/shape-custom.svg',
10
        'path'         => get_stylesheet_directory() . '/assets/shapes/shape-custom.svg',
11
        'has_flip'     => true,
12
        'has_negative' => true,
13
        'height_only'  => false,
14
    ];
15
 
16
    return $additional_shapes;
17
 
18
} );

Desglose clave:

• title: el nombre del divisor en el menú desplegable del editor. Escríbalo en caracteres latinos; es un identificador interno que se muestra tal cual en la interfaz.
• url: la URL pública del archivo, utilizada para la vista previa del editor. get_stylesheet_directory_uri() apunta a la carpeta del tema hijo.
• path: la ruta del servidor al archivo. Necesaria para el renderizado del lado del servidor y algunas comprobaciones.
• has_flip: habilita el volteo vertical del divisor (el botón Voltear en el editor).
• has_negative: necesario si tiene dos archivos: shape.svg (directo) y shape-negative.svg (con colores invertidos). Si no hay negativo, establézcalo en false.
• height_only: cuando es true, Elementor solo permite cambiar la altura del divisor; cuando es false, también se puede cambiar el ancho.

La diferencia clave con respecto a las instrucciones que circulan por los foros: la presencia de url y path es obligatoria. Sin ellos, el divisor no se renderizará; Elementor simplemente no encontrará el archivo.

Nota importante sobre el ID del divisor

El identificador shape-custom-wave (la clave del array) debe ser único. Si otro plugin registra un divisor con la misma clave, el suyo será sobrescrito. Utilice siempre un prefijo: por ejemplo, mytheme-wave-1 en lugar de solo wave.

Pruebas en el editor

Después de añadir el código, abra cualquier página en el editor de Elementor, seleccione una sección y vaya a la pestaña Estilo → Divisor de forma. Su divisor debería aparecer en el menú desplegable debajo de los estándar.

Pruebe tres escenarios:

• Color: cambie el color del divisor en los ajustes. El SVG debería recolorearse. Si no, verifique la presencia de class="elementor-shape-fill" en el archivo.
• Altura: ajuste la altura con el control deslizante. El divisor debería escalar sin distorsión.
• Volteo: si has_flip está habilitado, el botón de volteo debería estar activo.

Si no aparece en absoluto, primero verifique la URL: abra get_stylesheet_directory_uri() . '/assets/shapes/shape-custom.svg' en el navegador. Debería mostrar código SVG limpio, no un error 404.

Vea el proceso completo desde la maqueta hasta el divisor funcional en tiempo real; en este video el autor recorre todo el camino, incluyendo matices con preserveAspectRatio y la depuración de rutas rotas:

⁉️🤔 Preguntas frecuentes

¿El divisor personalizado desaparecerá cuando se actualice Elementor?

No, si el SVG está en un tema hijo o plugin personalizado. Las actualizaciones de Elementor solo sobrescriben su propia carpeta /wp-content/plugins/elementor/. Los archivos del tema no se tocan. Sin embargo, si colocó el SVG en /wp-content/plugins/elementor/assets/shapes/, se eliminará en la primera actualización automática.

¿Puedo crear un divisor con degradado?

No directamente a través de los ajustes de Elementor; allí solo hay colores sólidos disponibles. Pero puede definir un degradado directamente en el SVG, dentro de <defs> y <linearGradient>. En ese caso, Elementor no recoloreará la forma (no añada la clase elementor-shape-fill a esa ruta), y el divisor se mostrará con el degradado "integrado".

¿Por qué no aparece el divisor en el editor aunque no haya errores en el código?

Las tres causas más comunes: olvido de url/path en el array de registro, una ruta de archivo incorrecta (verifique el acceso directo a la URL), o falta de la clase elementor-shape-fill en el SVG; sin ella, Elementor omite silenciosamente el divisor.

¿Es obligatorio usar Photoshop?

No, cualquier editor rasterizado funciona: GIMP, Figma (exportar a PNG), Photopea, incluso Paint.NET. La clave es obtener una silueta negra limpia sobre fondo transparente o blanco antes de convertir a SVG. El trazado en sí no se realiza en el editor, sino a través de pngtosvg o una herramienta similar.

¿Cuántos divisores personalizados puedo añadir?

No hay límite de cantidad; registre tantos como necesite en la misma llamada a add_filter. Cada uno con su propia clave, ruta y ajustes. El límite práctico es la comodidad: más de 10-15 divisores en un menú desplegable se vuelve engorroso para buscar.

¿Vale la pena el esfuerzo de crear un divisor de forma personalizado?

Si el proyecto es único y la "onda" estándar es suficiente, no. Las 26 formas integradas de Elementor cubren la mayoría de los diseños típicos, y el tiempo dedicado a preparar SVG y depurar código se invierte mejor en contenido.

Pero cuando el diseño requiere una coincidencia exacta con la maqueta, o tiene una serie de sitios con la misma transición de marca entre secciones, un divisor personalizado se amortiza desde el primer uso. Lo añade una vez a través del tema hijo y queda disponible en todas las páginas de la red sin complicaciones.

La conclusión principal: **no coloque el SVG en la carpeta del plugin, especifique siempre url y path en el filtro, y no olvide **elementor-shape-fill. Estos tres puntos son la raíz de la mayoría de los problemas que surgen en los hilos del foro y en las incidencias de GitHub.