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.

Curabitur Donec Praesent dolor. adipiscing et, commodo