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;

Laisser un commentaire

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

dolor. non quis, elementum consectetur libero. sed luctus massa tempus