Ajouter des formes de séparation aux sections Elementor

Read the English version

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 :

Capture d'écran du réglage 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-fill pour 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

  1. Téléverser et activer l’extension qui se trouve sur GitHub;
  2. Dans le tableau de bord, ajouter votre première forme personnalisée dans le sous menu Elementor > Formes personnalisées;
  3. 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;
  4. 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-fill to 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

  1. Download and activate the plugin on GitHub;
  2. In the dashboard, create your first Custom Shape at the sub menu Elementor > Custom Shapes;
  3. Enter a title and upload a SVG file as featured image, this is the file that will be used as sections shape divider ;
  4. In an Elementor section, choose your custom shape in the Shape Divider setting;

Publié par : Marie Comet

Développeuse et intégratrice web indépendante, spécialisée WordPress.

Retrouvez-moi sur :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

5 commentaires sur Ajouter des formes de séparation aux sections Elementor

  • Christophe

    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

    • Marie

      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 » »

  • Christophe

    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 »

  • Christophe

    oui, mais je n’étais pas arrivé à la mettre en œuvre, je vais essayer de m’y pencher à nouveau…
    Merci

consequat. in quis mi, sem, elit. felis