Je vous partage une extension qui permet d’ajouter des formes de séparation personnalisées aux sections du constructeur de page Elementor.
Son fonctionnement est très simple : un type de contenu personnalisé qui alimente le réglage forme de séparation (surligné en jaune ci-dessous) dans les sections Elementor :
Prérequis à l’utilisation de l’extension
- Votre installation WordPress doit autoriser le téléversement des fichiers SVG (en utilisant par exemple l’extension Safe SVG);
- Seuls les fichiers SVG sont affichés par Elementor, si vous utilisez des fichiers PNG ou JPEG, vos formes de séparation ne s’afficheront pas;
- Les fichiers SVG doivent être nettoyés (pas de style en ligne, pas d’identifiants, pas d’éléments superflus), vous pouvez utiliser pour cela le site SVG OMG;
- Les éléments paths des fichiers SVG doivent comporter la classe
elementor-shape-fillpour notamment afficher les couleurs sélectionnées dans le réglage forme de séparation;
Exemple de fichier SVG valide :
<svg viewBox="0 0 1000 50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<path class="elementor-shape-fill" d="M -0.19 51.146 L 1004.238 50.978 L -0.104 0.112 L -0.19 51.146 Z"/>
</svg>
Vous pouvez utiliser Boxy SVG pour créer vos formes vectorielles, ou n’importe quel autre logiciel.
Comment utiliser l’extension
- Téléverser et activer l’extension qui se trouve sur GitHub;
- Dans le tableau de bord, ajouter votre première forme personnalisée dans le sous menu Elementor > Formes personnalisées;
- Entrer un titre et téléverser un fichier SVG comme image mise en avant, c’est ce fichier qui sera utilisé comme forme de séparation dans les sections;
- Dans une section Elementor, choisir votre forme personnalisée dans le réglage « forme de séparation »;
English version
Elementor : Add custom sections shapes divider
I share an extension that allows you to add custom Shapes divider to the Elementor page builder sections.
Its method is very simple: a custom post type that feeds the setting Shape Divider in Elementor sections.
Prerequisites to use the plugin
- Your WordPress installation must allow uploading of SVG files (for example using the Safe SVG plugin);
- Only SVG files are displayed by Elementor, if you use PNG or JPEG files, your Shape Divider will not be displayed;
- SVG files must be cleaned (no inline style, no IDs, no superfluous elements), you can use SVG OMG to clean your SVG;
- The path elements of SVG files must have the class
elementor-shape-fillto display the selected colors in the Shape Divider setting;
Example of a valid SVG file:
<svg viewBox="0 0 1000 50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<path class="elementor-shape-fill" d="M -0.19 51.146 L 1004.238 50.978 L -0.104 0.112 L -0.19 51.146 Z"/>
</svg>
You can use Boxy SVG to create your shapes, or any other software.
How to use the plugin
- Download and activate the plugin on GitHub;
- In the dashboard, create your first Custom Shape at the sub menu Elementor > Custom Shapes;
- Enter a title and upload a SVG file as featured image, this is the file that will be used as sections shape divider ;
- In an Elementor section, choose your custom shape in the Shape Divider setting;
5 réponses à “Ajouter des formes de séparation aux sections Elementor”
Bonjour Marie,
merci pour le partage de ce plugin qui fonctionne très bien, mais il y a un point que je n’ai pas pu résoudre et d’après ce que j’ai pu voir sur GitHub, c’est apparemment une limitation propre à Elementor, je souhaitais avoir un fond transparent au niveau de la couleur de fond de mon de « shape divider » pour avoir une démarcation nette lors du scroll en les sections Elementor et une image en arrière plan sur ma page, savez-vous si c’est réalisable ? J’ai testé pas mal de choses sans succès et j’ai l’impression que tant qu’Elementor ne fera pas évoluer la fonctionnalité cela restera difficile, ou impossible à contourner…
Merci par avance
Christophe
Bonjour Christophe,
je ne comprends pas ce que vous souhaitez faire (« fond transparent au niveau de la couleur de fond de mon de « shape divider » »
Merci pour cette réponse rapide, oui, ce n’est pas très évident à synthétiser, une capture serait plus parlante… quand on utilise la fonction « shape divider », la partie du fond de la section qui est en dehors du « shape divider » est obligatoirement opaque, une couleur transparente permettrait d’avoir une continuité avec le reste du design de la page et notamment des éléments graphiques en arrière plan…
Voici un lien sur cette thématique https://github.com/elementor/elementor/issues/3829, j’ai posté une capture en fin de discussion sous « Abescom »
Ok je comprends mieux, et non je ne vois pas de solution.
Avez-vous testé la solution donnée ici https://github.com/elementor/elementor/issues/3829#issuecomment-461847775 ?
oui, mais je n’étais pas arrivé à la mettre en œuvre, je vais essayer de m’y pencher à nouveau…
Merci