Les séparateurs Elementor standard suffisent pour les mises en page classiques, mais lorsqu’une maquette exige un contour de vague spécifique, un biseau dans la charte graphique ou une diagonale qui reproduit le design au pixel près, la bibliothèque intégrée de 26 formes montre ses limites. Le designer crée une transition personnalisée entre les sections et le développeur se retrouve face à la question: comment ajouter son propre SVG à Elementor pour qu’il reprenne la couleur des réglages et survive à la prochaine mise à jour du plugin?

Le problème ne vient pas d’une absence de mécanisme: le filtre elementor/shapes/additional_shapes existe dans le cœur depuis longtemps. Le problème, c’est que la plupart des tutoriels en ligne conseillent de placer le SVG dans le dossier du plugin lui-même, ce qui garantit de perdre le fichier lors des mises à jour automatiques. Et les paramètres url/path sont souvent omis; sans eux, le séparateur ne s’affiche tout simplement pas dans l’éditeur.

Voici une méthode testée: de la préparation du fichier vectoriel à son enregistrement via un filtre, avec un placement dans le thème enfant. Une fois ces étapes réalisées, votre séparateur de forme personnalisé apparaîtra dans la liste déroulante aux côtés des formes standard et persistera indépendamment des mises à jour d’Elementor.

💡 Aperçu rapide:

• Préparez une esquisse bitmap dans Photoshop: recadrez la zone nécessaire et remplissez-la de noir.
• Convertissez le PNG en SVG via un service en ligne, en simplifiant vers une seule couleur.
• Nettoyez le code SVG: supprimez les balises inutiles, ajoutez elementor-shape-fill et preserveAspectRatio.
• Placez le fichier dans le dossier du thème enfant et enregistrez-le via add_filter avec les clés url, path et has_negative.
• Testez le séparateur dans l’éditeur Elementor, modifiez la couleur et la hauteur.

Qu’est-ce qu’un séparateur de forme et pourquoi ajouter le vôtre

Un Shape Divider est une forme SVG superposée sur le bord supérieur ou inférieur d’une section dans Elementor. Il crée une transition fluide entre les blocs: vague, biseau, arc ou bord en pointe. La bibliothèque standard comprend 26 formes: montagnes, gouttes, nuages, courbes, etc.

Un séparateur personnalisé est nécessaire dans trois cas. Premièrement, lorsque la maquette contient une forme unique absente du jeu standard. Deuxièmement, pour des besoins de marque (par exemple, une transition reprenant la forme d’un logo ou une vague signature). Troisièmement, lorsque plusieurs projets utilisent le même jeu personnalisé; dans ce cas, les séparateurs sont ajoutés de manière centralisée via un thème enfant ou un plugin sur mesure.

Techniquement, le mécanisme est implémenté via le filtre elementor/shapes/additional_shapes. Ce hook accepte un tableau où chaque élément décrit un séparateur: le nom, le chemin du fichier, la possibilité de symétrie et l’option négative. Après l’enregistrement, la forme apparaît dans la liste déroulante de l’éditeur.

Créer un fichier SVG pour le séparateur

Le principe de fonctionnement des séparateurs de forme est que la zone visible correspond à ce que vous remplissez dans le SVG. Il faut donc d’abord comprendre quelle partie de l’esquisse deviendra la forme.

Supposons que le designer ait créé une transition avec une section inférieure bleue et une «vague» supérieure blanche. Le contour blanc doit devenir la forme; c’est lui qu’il faut découper et remplir avec une couleur unie.

Point essentiel: si vous vous trompez et sélectionnez la zone bleue au lieu de la blanche, le séparateur dans Elementor apparaîtra inversé ou rogné. Déterminez toujours ce qui doit exactement constituer la forme visible.

Étapes dans Photoshop

Ouvrez l’esquisse dans Photoshop et réalisez trois étapes:

• Supprimez la zone d’arrière-plan qui ne doit PAS être le séparateur. Dans l’exemple ci-dessus, supprimez la partie bleue.

• Remplissez la zone restante (la «vague» blanche) avec du noir. Le noir simplifie le traçage vectoriel ultérieur; le convertisseur n’est pas perturbé par différentes nuances.

• Recadrez le canevas aux limites de la forme et exportez en PNG. Photoshop génère des SVG avec des enveloppes et des artefacts superflus, le PNG comme format intermédiaire est donc plus fiable.

Pourquoi du noir plutôt que directement la couleur du site? Elementor applique la couleur du séparateur depuis ses propres réglages; le remplissage du SVG n’a pas d’importance. Et une silhouette noire sur fond blanc produit le vecteur le plus propre après le traçage automatique.

Résultat après traitement dans Photoshop:

Conversion du PNG en SVG

Ensuite, vous avez besoin d’un vecteur propre. Utilisez le convertisseur en ligne pngtosvg.com; il ne nécessite pas d’inscription et traite les formes monochromes sans bruit inutile dans le code.

Téléversez le PNG et réglez les paramètres:

• Simplification maximale, une couleur. Cela supprime les courbes «parasites» et garde le SVG compact.

• Nombre de couleurs: 1 (ou 2 si vous avez besoin d’un fond transparent; dans ce cas, définissez la deuxième couleur comme transparente).

Téléchargez le SVG obtenu et ouvrez-le dans un éditeur de code: Notepad++, VS Code ou un éditeur de texte simple. Ensuite vient le nettoyage manuel.

Adapter le SVG aux exigences d’Elementor

Pour que le séparateur reprenne correctement la couleur et l’échelle, effectuez trois modifications directement dans le code du fichier:

Ajoutez la classe elementor-shape-fill. Sans elle, Elementor ne peut pas recolorer le SVG. Trouvez la balise <path> ou <polygon> et ajoutez l’attribut class="elementor-shape-fill".

Supprimez width et height. Conservez uniquement viewBox et ajoutez preserveAspectRatio="none"; cela permet au séparateur de s’étirer sur toute la largeur de la section. Si les attributs width/height ne sont pas présents, laissez-les tels quels et assurez-vous simplement que viewBox est là.

Supprimez tout ce qui est inutile. Effacez les constructions <?xml...>, <!DOCTYPE...> et tout en-tête XML en dehors de la balise <svg>. Gardez uniquement le code propre à l’intérieur de <svg>...</svg>; Elementor analyse ces fichiers de manière plus fiable.

Le SVG final devrait ressembler approximativement à ceci:

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>

Où placer le fichier SVG

L’approche la plus grossière et la plus répandue est le dossier /wp-content/plugins/elementor/assets/shapes/. Cela fonctionne exactement jusqu’à la première mise à jour automatique d’Elementor, qui écrase silencieusement le contenu du dossier du plugin, y compris votre fichier.

La bonne approche est un thème enfant. Créez un dossier assets/shapes/ à l’intérieur et placez-y le SVG:

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

Presque tous les thèmes modernes (Hello Elementor, GeneratePress, Astra, Kadence) prennent en charge les thèmes enfants. Si vous n’en avez pas, créez-le: à la racine du thème, vous avez seulement besoin d’un style.css avec un en-tête /* Theme Name: My Child Theme Template: parent-theme */ et d’un functions.php.

Une alternative est un plugin personnalisé. Mais pour un ou deux séparateurs, un thème enfant est plus simple et ne crée pas d’entités supplémentaires.

Code pour enregistrer le séparateur

Dans le fichier functions.php du thème enfant (ou via le plugin Code Snippets), ajoutez le code suivant:

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
} );

Détail des clés:

• title: le nom du séparateur dans la liste déroulante de l’éditeur. Écrivez en caractères latins; c’est un identifiant interne affiché tel quel dans l’interface.
• url: l’URL publique du fichier, utilisée pour l’aperçu dans l’éditeur. get_stylesheet_directory_uri() pointe vers le dossier du thème enfant.
• path: le chemin serveur vers le fichier. Nécessaire pour le rendu côté serveur et certaines vérifications.
• has_flip: active la symétrie verticale du séparateur (le bouton Flip dans l’éditeur).
• has_negative: nécessaire si vous avez deux fichiers: shape.svg (direct) et shape-negative.svg (avec couleurs inversées). S’il n’y a pas de négatif, mettez false.
• height_only: quand true, Elementor permet seulement de changer la hauteur du séparateur; quand false, la largeur peut aussi être modifiée.

La différence clé par rapport aux instructions qui circulent sur les forums: la présence de url et path est obligatoire. Sans eux, le séparateur ne s’affichera pas; Elementor ne trouvera tout simplement pas le fichier.

Remarque importante sur l’identifiant du séparateur

L’identifiant shape-custom-wave (la clé du tableau) doit être unique. Si un autre plugin enregistre un séparateur avec la même clé, le vôtre sera écrasé. Utilisez toujours un préfixe: par exemple, mytheme-wave-1 au lieu de simplement wave.

Test dans l’éditeur

Après avoir ajouté le code, ouvrez une page dans l’éditeur Elementor, sélectionnez une section et allez dans l’onglet Style → Shape Divider. Votre séparateur devrait apparaître dans la liste déroulante en dessous des formes standard.

Testez trois scénarios:

• Couleur: changez la couleur du séparateur dans les réglages. Le SVG doit être recoloré. Si ce n’est pas le cas, vérifiez la présence de class="elementor-shape-fill" dans le fichier.
• Hauteur: ajustez la hauteur avec le curseur. Le séparateur doit se redimensionner sans distorsion.
• Symétrie: si has_flip est activé, le bouton de symétrie doit être actif.

S’il n’apparaît pas du tout, vérifiez d’abord l’URL: ouvrez get_stylesheet_directory_uri() . '/assets/shapes/shape-custom.svg' dans le navigateur. Elle doit afficher du code SVG propre, pas une erreur 404.

Regardez l’ensemble du processus, de la maquette au séparateur fonctionnel, en temps réel; dans cette vidéo, l’auteur parcourt tout le chemin, y compris les nuances avec preserveAspectRatio et le débogage des chemins cassés:

⁉️🤔 Questions fréquentes

Le séparateur personnalisé disparaîtra-t-il lors d’une mise à jour d’Elementor?

Non, si le SVG se trouve dans un thème enfant ou un plugin personnalisé. Les mises à jour d’Elementor écrasent uniquement son propre dossier /wp-content/plugins/elementor/. Les fichiers du thème ne sont pas touchés. En revanche, si vous avez placé le SVG dans /wp-content/plugins/elementor/assets/shapes/, il sera supprimé lors de la première mise à jour automatique.

Puis-je créer un séparateur avec un dégradé?

Pas directement via les réglages d’Elementor; seules les couleurs unies y sont disponibles. Mais vous pouvez définir un dégradé directement dans le SVG, à l’intérieur de <defs> et <linearGradient>. Dans ce cas, Elementor ne recolorera pas la forme (n’ajoutez pas la classe elementor-shape-fill à ce chemin) et le séparateur s’affichera avec le dégradé «intégré».

Pourquoi le séparateur n’apparaît-il pas dans l’éditeur même s’il n’y a pas d’erreurs dans le code?

Les trois causes les plus fréquentes: url/path oubliés dans le tableau d’enregistrement, un chemin de fichier cassé (vérifiez l’accès direct par URL) ou l’absence de la classe elementor-shape-fill dans le SVG; sans elle, Elementor ignore silencieusement le séparateur.

Photoshop est-il obligatoire?

Non, n’importe quel éditeur bitmap fonctionne: GIMP, Figma (export en PNG), Photopea, même Paint.NET. L’essentiel est d’obtenir une silhouette noire nette sur un fond transparent ou blanc avant la conversion en SVG. Le traçage lui-même ne se fait pas dans l’éditeur, mais via pngtosvg ou un outil similaire.

Combien de séparateurs personnalisés puis-je ajouter?

Il n’y a pas de limite de quantité; enregistrez autant de séparateurs que nécessaire dans le même appel add_filter. Chacun avec sa propre clé, son chemin et ses réglages. La limite pratique est le confort d’utilisation: au-delà de 10 à 15 séparateurs, la liste déroulante devient fastidieuse à parcourir.

Cela vaut-il la peine de créer un séparateur de forme personnalisé

Si le projet est ponctuel et que la «vague» standard suffit, non. Les 26 formes Elementor intégrées couvrent la plupart des mises en page courantes et le temps passé à préparer le SVG et à déboguer le code est mieux investi dans le contenu.

Mais lorsque la maquette exige une correspondance exacte ou que vous avez une série de sites avec la même transition de marque entre les sections, un séparateur personnalisé est rentabilisé dès la première utilisation. Vous l’ajoutez une fois via le thème enfant et il devient disponible sur toutes les pages du réseau sans effort supplémentaire.

Le principal enseignement: **ne placez pas le SVG dans le dossier du plugin, spécifiez toujours url et path dans le filtre, et n’oubliez pas **elementor-shape-fill. Ces trois points sont à l’origine de la plupart des problèmes qui remontent dans les fils de discussion des forums et les tickets GitHub.