Ceci est une ancienne révision du document !
Tutoriel Elementor : Editer le site internet de l'ORB
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).
Fonctionnement général : des sections et des é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
L'éditeur d'Elementor
Elementor a son propre éditeur, permettant de composer des pages ou des articles simplement.
Accéder à l'éditeur
L'éditeur Elementor "remplace" l'éditeur de WordPress. On peut y accéder 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
Créer des sections et des colonnes
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 élements 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.
Intégrer des éléments de 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 :