Elementor est un plugin WordPress qui embarque son propre composeur de thèmes et de pages. En complétant (ou plutôt en remplaçant) l'éditeur par défaut de Wordpress, il permet de créer des rendus plus esthétiques plus rapidement et avec des compétences moindres en code.

Pour ce faire, Elementor "code pour vous" un ensemble de widgets que vous pourrez injecter dans vos pages et que vous pourrez paramétrer dans une assez grande mesure. Pour les utilisateurs plus avancés, il permet d'ajouter des règles css et de personnaliser encore davantage les widgets mis à disposition.

Dans le cadre de l'ORB, nous disposons de la licence Elementor Pro, nous permettant d'avoir accès à davantage de widgets (éléments).

Le composeur d'Elementor s'appuie sur des sections qui permettent de structurer la page. Ces sections définissent un ensemble de "zones" ou "blocs" au sein desquels on pourra intégrer notre contenu. Une section peut comporter une ou plusieurs colonnes, de largeur variable.

Ce contenu est alors constitué d'éléments tels que :

• des titres,
• des paragraphes,
• des images,
• des vidéos,
• des boutons,
• des formulaires
• et quelques dizaines d'autres…

Des éléments plus avancés permettent d'améliorer la lisibilité pour l'utilisateur : onglets, accordéons, galeries filtrables etc

Elementor ne prend en charge que la création et l'organisation des contenus tels qu'ils sont visibles par les visiteurs du site. Ces informations sont classiquement gérés par l'éditeur par défaut Gutenberg, qui est contourné dans notre cas.

Les "métadonnées" des pages et articles (auteurs, mots-clés, images mises en avant, référencement, dates de publications, catégories, permaliens etc) sont gérées par WordPress de manière classique.

Pour dépublier un article, l'associer à une catégorie, modifier les menus, gérer les médias ou créer des utilisateurs par exemple, c'est l'interface classique de WordPress (/wp-admin) qui est utilisée.

On peut accéder à l'éditeur de contenu Elementor par différents moyens :

• Depuis la liste des articles/pages : lien modifier avec Elementor
• Depuis la page de création ou modification d'une page/article : bouton modifier avec Elementor
• Depuis le site en mode connecté : lien modifier avec Elementor dans la barre d'outil qui se situe au dessus des menus

Chaque objet (Sections, Colonnes, Eléments) est configurable et personnalisable via un panneau d'édition, composé de 3 onglets :

• Mise en page (Sections, Colonnes) ou Contenu (Eléments)
  • Pour les sections et colonnes, l'onglet mise en page permets de définir la largeur ou hauteur du bloc, l'alignement du contenu dans ce bloc (Haut, Milieu, Bas etc) et de modifier le cas échéant la structure (ajout/suppression de colonnes)
  • Pour les éléments, l'onglet contenu permet de personnaliser le contenu affiché : titre, textes, photos, vidéos, liens affectés, légendes, position etc. Les paramètres proposés sont ainsi propres à chaque élément.
• Style
  • Cet onglet permet de personnaliser l'apparence des objets : couleurs, polices, images de fonds, bordures, ombres etc.
• Avancé
  • Cet onglet permet de gérer les aspects les plus avancés (classes css, identifiants css, éditeur de règles css personnalisées etc). Il permet aussi de gérer les marges internes et externes des objets, souvent très utiles !

=== Afin d'organiser votre page ou votre article et aboutir à une présentation ergonomique, Elementor s'appuie sur des sections pour créer une structure de page.

Vous pouvez ajouter autant de sections que vous le souhaitez à votre page, et vous pourrez intégrer autant de widgets que vous voudrez à chacune de vos sections ensuite. Les sections sont ajoutées par un petit "+" en bas de page, et peuvent comporter une ou plusieurs colonnes. La largeur de ces colonnes et leur nombre est modifiable par la suite :

Sections et éléments peuvent s'ajouter en parallèle, il n'est pas nécessaire de faire 100% de la structure de la page avant d'y intégrer du contenu.

Une fois que vous avez créé tout ou partie de la structure de votre page, vous pouvez y intégrer votre contenu sous forme d'éléments. Pour ce faire, l'éditeur vous propose une banque d'éléments disponibles, que vous pourrez placer dans votre sections par un simple glisser-coller (drag & drop).

Un contenu exemple est alors importé dans votre bloc, et l'éditeur affiche un panneau de configuration de l'élément ajouté pour y personnaliser le contenu, la mise en forme, la position etc.

Par exemple :