Une belle ligne de séparation rend une page visuellement plus haut de gamme en cinq minutes de travail. C’est le moyen le moins coûteux d’ajouter du caractère à un site: pas de refonte nécessaire, pas de designer nécessaire, juste une ligne vectorielle au bon endroit.

Le problème, c’est que le jeu intégré d’Elementor devient vite lassant. Les vagues et triangles standards du Shape Divider se retrouvent sur une page d’atterrissage sur deux, et le widget Divider se contente de tracer une ligne droite avec une icône FontAwesome. Vous voulez des ornements, des motifs botaniques ou des étoiles, et c’est là que la recherche commence.

Cette collection contient tout ce qu’il vous faut pour de belles séparations: six styles SVG prêts à l’emploi que nous avons dessinés nous-mêmes et inclus directement dans l’article, un tour d’horizon de l’extension SVG Divider for Elementor, un regard honnête sur les outils intégrés et une méthode pour insérer n’importe quel code SVG sans aucune extension.

💡 Aperçu rapide:

• Étape 1: déterminez le style de séparateur adapté au design de votre site, exemples des six styles ci-dessous dans la galerie
• Étape 2: pour des vagues et des pentes basiques, activez le Shape Divider intégré dans les paramètres de section d’Elementor
• Étape 3: pour des séparateurs animés dessinés à la main, installez l’extension SVG Divider for Elementor
• Étape 4: pour un contrôle total, copiez le code SVG depuis l’article et insérez-le via le widget HTML

Pourquoi une page a besoin de séparateurs et pourquoi le SVG en particulier

Un séparateur remplit trois fonctions: il sépare les blocs sémantiques, donne le rythme de défilement et dirige le regard vers la section suivante. Un mur de texte sans pauses visuelles est fatigant, le lecteur abandonne la page avant d’atteindre le bouton.

Le format SVG est le mieux adapté à cet usage, et le marché le confirme: selon les statistiques W3Techs sur le SVG, ce format est utilisé par 66,8% de tous les sites (juillet 2026). Les raisons sont pratiques. Le vectoriel ne perd pas en netteté sur les écrans retina ni à aucun niveau de zoom. Un fichier contenant une illustration entière pèse moins lourd qu’un seul logo matriciel. Et chaque élément à l’intérieur d’un SVG, ligne, pétale, point, peut être animé séparément via CSS.

Le public concerné par ce sujet est immense: Elementor lui-même, d’après le catalogue WordPress.org, est installé sur 10 millions de sites, et WordPress dans son ensemble propulse 41,5% de tous les sites internet (compteur W3Techs, juillet 2026). Autrement dit, des millions de pages utilisent les mêmes vagues standard. Se démarquer est facile, et nous vous montrons comment ci-dessous.

Galerie: six styles de séparateurs SVG avec exemples

Tous les séparateurs ci-dessous ont été dessinés par nos soins spécialement pour cet article et téléversés dans la bibliothèque de médias en tant que fichiers SVG ordinaires. La palette est neutre, bleu avec une touche dorée, chaque style est étiqueté selon son usage. Utilisez-les comme référence pour choisir votre propre style ou récupérez le code pour vous: nous expliquons comment insérer un SVG sur une page sans extension dans une section plus bas.

Vague

Le style le plus polyvalent. Une double ligne avec différentes transparences crée de la profondeur, et des points au centre offrent un ancrage au regard. Convient presque partout: blogs, pages d’atterrissage de services, portfolios.

Ornement classique

Une ligne avec des volutes et un losange au centre, une technique tout droit venue de la mise en page imprimée. Un tel séparateur appelle une typographie avec empattement: services juridiques, restaurants gastronomiques, sites de mariage, maisons d’édition.

Motif botanique

Des feuilles et des baies sur un axe fin. Un style pour tout ce qui est «naturel et fait main»: produits écologiques, cosmétiques, studios de yoga, produits fermiers, articles artisanaux.

Géométrie de losanges

Une chaîne de losanges de taille décroissante. Une variante stricte sans aucune ligne courbe, qui n’entre pas en conflit avec la grille de mise en page: sites corporate, SaaS, finance, blogs tech.

Double ligne avec médaillon

Le plus proche parent du widget Divider intégré, mais nettement plus raffiné: une double ligne d’épaisseurs différentes et un médaillon rond avec une étoile. Idéal comme séparateur final avant le pied de page ou la signature de l’auteur.

Ligne pointillée avec éclats

Une ligne pointillée et des éclats à quatre branches dispersés. Le style le plus «ambiance»: promotions festives, produits pour enfants, portfolios créatifs, pages d'atterrissage pour le Nouvel An.

Ce qu'Elementor sait faire sans extension

Avant d'installer des plugins, il est utile de tirer le maximum des outils intégrés. Elementor propose deux outils standards, et ils couvrent les scénarios de base.

Shape Divider se trouve dans les paramètres de section (onglet Style). Il s'agit d'une bordure profilée entre les sections: vague, pente, colline, nuages, zigzag, une douzaine de formes au total avec des réglages de couleur, hauteur et symétrie, certaines prenant en charge les calques. Plus de détails dans le guide Elementor sur Shape Divider. La limite fondamentale: c'est une forme de bordure de section, pas un élément décoratif séparé, et il n'y a pas d'animation de révélation.

Le widget Divider se place entre les blocs de contenu: une ligne droite, des réglages d'épaisseur et de couleur, éventuellement une icône ou un texte au milieu. Un minimum fonctionnel et honnête. Mais la ligne est toujours droite, les icônes proviennent uniquement des jeux standards, pas d'animation.

La conclusion est simple: pour une mise en page corporate stricte, les outils intégrés suffisent. Pour des ornements, des graphismes faits main et de l'animation, il vous faut soit une extension, soit mettre la main à la pâte. Commençons par une extension.

L'extension SVG Divider for Elementor: 90 séparateurs dessinés à la main

SVG Divider for Elementor, par le studio Let's WP, ajoute un widget distinct avec deux modes. Selon l'annonce sur le blog de Let's WP, l'ensemble comprend 90 designs dessinés à la main et un mode classique avec des lignes et des icônes, dont plus de 300 icônes issues de leur propre jeu ainsi que des séries thématiques exclusives pour les sites de voyage et les restaurants.

Le mode Drawn est le cœur du plugin: des illustrations ornementales avec une animation de révélation où chaque pétale et chaque boucle a son propre rythme. Toutes les animations sont écrites en CSS pur, sans bibliothèques externes, et seuls les styles réellement utilisés sont chargés sur la page. Une couche optionnelle de paillettes ajoute un scintillement infini par-dessus le dessin.

Le mode Classic reprend l'idée du widget Divider standard, mais en plus flexible: lignes doubles et pointillées avec réglage de la distance via un curseur, icône à gauche, au centre ou à droite, intégration avec le bouton Elementor.

La sélection du design passe par un sélecteur popup propriétaire avec recherche en direct: une grille de 90 vignettes, l'animation démarre au survol de la souris, le passage d'une option à l'autre prend quelques secondes. Le plugin est léger: du SVG inline de quelques kilo-octets, la seule dépendance est jQuery, déjà chargé par le cœur de WordPress.

Passons à la partie honnête. Le plugin est vendu sur la page du plugin sur CodeCanyon sous licence standard pour un site, nécessite Elementor 2.8+ et n'a pas connu de mise à jour notable depuis 2020. Son architecture est simple, il n'y a presque rien qui puisse casser, mais acheter un produit sans support actif reste un risque que chacun évalue pour soi-même. Avant de payer, vérifiez la démo sur la version actuelle d'Elementor.

Comment insérer votre propre séparateur SVG sans extension

Tout séparateur de notre galerie, comme n'importe quel autre SVG, peut être inséré gratuitement sur une page en trois étapes. La méthode fonctionne dans Elementor, Gutenberg et de manière générale dans tout constructeur disposant d'un bloc HTML.

Première étape: récupérez le code SVG. Voici une version raccourcie de notre vague, copiez-la directement ici et modifiez les couleurs pour les adapter à votre charte graphique:

1
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="120" viewBox="0 0 1200 120">
2
  <path d="M60,60 C210,20 360,100 510,60 S810,20 960,60 S1140,100 1140,60"
3
        fill="none" stroke="#4a6fa5" stroke-width="3" stroke-linecap="round"/>
4
  <circle cx="600" cy="60" r="6" fill="#c9a227"/>
5
</svg>

Deuxième étape: dans Elementor, faites glisser le widget HTML à l'emplacement souhaité et collez le code. Le SVG inline s'affiche instantanément, ne génère pas de requêtes HTTP et hérite de la mise à l'échelle du conteneur. La syntaxe des tracés et des formes est bien expliquée dans la documentation MDN sur le SVG.

Troisième étape, s'il est plus pratique de passer par la médiathèque: notez que WordPress interdit par défaut le téléversement de fichiers SVG. Ce n'est pas un caprice, mais une question de sécurité: un script exécutable peut se cacher dans un SVG, le fichier doit donc être assaini avant publication. La tâche est résolue par l'extension gratuite Safe SVG: elle nettoie les fichiers au moment du téléversement, après quoi le SVG s'insère avec le widget Image habituel.

La règle de sécurité est simple: ne téléversez jamais sur votre site un SVG provenant d'une source non vérifiée sans l'avoir assaini. Votre propre code et les fichiers de cet article sont propres par conception, ils ne contiennent que des tracés et des formes.

Comparatif: quelle méthode choisir

Quelques mots sur la ligne du milieu du tableau: Shape Dividers Plus étend le Shape Divider intégré avec de nouveaux styles de bord (pinceau, géométrie, papier), fonctionne dans l'interface native et est mis à jour, la dernière version datant de février 2026. Un module similaire Animated Shape Divider avec prise en charge des SVG personnalisés est également disponible dans Premium Addons. Si vous avez spécifiquement besoin d'un bord de section galbé, commencez par ces options, pas par des illustrations payantes.

⁉️🤔 Foire aux questions

L'extension SVG Divider fonctionne-t-elle sans Elementor?

Non. Il s'agit d'un addon qui ajoute un widget au panneau d'Elementor et ne fonctionne pas sans lui, aucune version autonome n'existe. La configuration minimale requise, Elementor 2.8+, est indiquée sur CodeCanyon. Pour les sites sans Elementor, utilisez l'insertion de votre propre code SVG via un bloc HTML.

Les séparateurs SVG ralentissent-ils un site?

Pratiquement non. Le vecteur inline s'affiche sans requêtes HTTP supplémentaires, et le poids du séparateur se mesure en kilooctets, ce que confirme l'analyse détaillée de l'auteur de l'extension. Les animations CSS utilisent l'accélération matérielle du navigateur. Une seule bannière en pixels est généralement plus lourde que tous les séparateurs de la page réunis.

Pourquoi WordPress ne vous permet-il pas de téléverser un SVG dans la médiathèque?

Pour des raisons de sécurité: le SVG est un document XML, à l'intérieur duquel un script peut être intégré. Le cœur bloque ces téléversements par défaut. La solution, l'extension Safe SVG du catalogue officiel: elle assainit les fichiers au téléversement et ouvre un aperçu dans la médiathèque.

Puis-je utiliser les séparateurs de votre galerie sur mon site?

Oui, librement. Nous les avons dessinés spécialement pour cet article: enregistrez le fichier SVG depuis la galerie ou copiez le code d'exemple de la section sur l'insertion sans extension et modifiez les couleurs pour les adapter à votre palette. La mention de la source n'est pas obligatoire, il n'y a aucune restriction de licence.

L'extension n'a pas été mise à jour depuis plusieurs années, vaut-elle la peine d'être achetée?

Pesez le risque. L'architecture est simple, du CSS pur couplé à l'API Elementor, l'extension continue donc de fonctionner sur les versions actuelles. Mais il n'y a pas de support actif, et si la prochaine mise à jour d'Elementor casse quelque chose, personne ne sera là pour le corriger. Testez la démo avant d'acheter et gardez un plan de repli sous la forme de votre propre code SVG.

Quelle est la différence entre Shape Divider et le widget Divider?

Ce sont deux outils Elementor différents. Shape Divider définit un bord galbé pour une section entière (vague, pente, nuages) et se configure dans le style de la section. Le widget Divider place une ligne horizontale entre des blocs de contenu, avec éventuellement une icône. Le premier relève de la géométrie de mise en page, le second d'une pause à l'intérieur d'une colonne de texte.

💎 Conclusions et points à retenir

De beaux séparateurs constituent une amélioration visuelle peu coûteuse, accessible quel que soit le budget. Recette par scénario: pour une géométrie de section basique, le Shape Divider intégré ou le module gratuit Shape Dividers Plus suffit. Pour un tracé dessiné à la main avec une animation de révélation, il existe SVG Divider pour Elementor, mais achetez-le en gardant un œil sur la fréquence des mises à jour. Enfin, la flexibilité maximale est apportée par votre propre code SVG via un widget HTML: gratuit, sans dépendance et avec un contrôle total sur chaque ligne.

Conseil pratique: choisissez un seul style de séparateur et utilisez-le sur l’ensemble du site. Trois ornements différents sur une même page produisent un effet moins heureux que leur absence, tandis qu’un style répété fonctionne comme un élément d’identité de marque.

Prenez le séparateur qui vous plaît dans la galerie, adaptez les couleurs à votre charte et indiquez en commentaire lequel des six styles vous installer: vague, ornement ou paillettes?