Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente |
procedures:sinp-aura:tutoriels:cms:elementor [2021/01/11 11:20] – dmaillard | procedures:sinp-aura:tutoriels:cms:elementor [2023/09/15 13:27] (Version actuelle) – dmaillard |
---|
===== Tutoriel Elementor : Editer le site internet de l'ORB ===== | ====== Présentation globale d'Elementor : Editeur du site de l'ORB ====== |
| |
=== Elementor en quelques lignes === | |
| |
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. | Le site de l'ORB a été conçu avec WordPress, et son plugin Elementor qui embarque son propre éditeur de contenus. Cet éditeur Elementor remplace l'éditeur par défaut de Wordpress, et permet de créer des rendus plus esthétiques, plus rapidement, et avec des compétences moindres (pas de code etc). |
| |
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. | Elementor "code pour vous" un ensemble de widgets que vous pourrez importer 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). | Dans le cadre de l'ORB, nous disposons de la licence Elementor Pro, nous permettant d'avoir accès à davantage de widgets (éléments) et fonctionnalités. |
| |
| |
| ===== WordPress, Elementor : qui fait quoi ? ===== |
| |
=== Des sections et des élements === | **Elementor ne prend en charge que la gestion et l'organisation des contenus directement visibles par les visiteurs du site**. Il remplace l'éditeur par défaut de Wordpress (Gutenberg) pour le contenu des pages en lui-même. |
| |
Le composeur d'Elementor s'appuie sur des **sections** qui permettent de **structurer la page**. Ces sections définissent un ensemble de zones au sein desquelles on pourra intégrer notre contenu. Ce contenu est alors mis en forme avec des **éléments** tels que : | **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) restent gérées par WordPress de manière classique**. De même, les fonctionnalités permettant de publier, programmer, dépublier un article, modifier les menus, gérer les médias ou créer des utilisateurs par exemple, restent totalement gérés par l'interface classique de WordPress (/wp-admin). |
| |
| Si vous ne savez pas qui de WordPress ou Elementor fait ce que vous souhaitez faire, demandez-vous simplement si l'utilisateur le verra ou non sur le site. |
| |
| |
| ===== Fonctionnement général : des conteneurs et des éléments ===== |
| |
| Le composeur d'Elementor s'appuie sur des **conteneurs** qui permettent de **structurer la page**. Ces conteneurs de tailles variables peuvent être imbriqués les uns dans les autres pour définir un ensemble de "zones" ou "blocs" au sein desquels on pourra intégrer notre contenu. |
| |
| Ce contenu est alors représenté par des **éléments** (widgets) préconçus, tels que : |
* des titres, | * des titres, |
* des paragraphes, | * des paragraphes, |
* des vidéos, | * des vidéos, |
* des boutons, | * des boutons, |
* des formulaires | * des formulaires, |
* et quelques dizaines d'autres... | * des cartes, |
| * des graphiques, |
Des éléments plus avancés permettent d'améliorer la lisibilité pour l'utilisateur : onglets, accordéons, galeries filtrables etc | * et quelques dizaines d'autres possibilités... |
| |
| |
=== L'éditeur d'Elementor === | |
| |
== 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 | |
| |
{{ :procedures:sinp-aura:tutoriels:cms:capture_d_e_cran_2021-01-11_a_11.37.30.png?direct&600 |}} | |
| |
== Créer des sections et des colonnes == | |
Afin d'organiser votre page et aboutir à une page 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 : | |
{{ :procedures:sinp-aura:tutoriels:cms:create_sections.webm |}} | |
| |
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 le contenu). | |
| |
| |
== Intégrer des éléments de contenu == | |
Une fois que vous avez créé un ou des blocs, vous pouvez y intégrer votre contenu sous forme d'éléments. Pour ce faire, l'éditeur vous propose une banque d'élements disponibles, que vous pourrez placer dans votre sections par un simple glisser-coller (drag & drop). | |
| |
Un contenu "type" est alors importé dans votre bloc, et l'éditeur s'ouvre sur le panneau de configuration de l'élément pour y personnaliser le contenu, la mise en forme, la position etc. | |
| |
== Paramétrer les sections == | |
| |
== Paramétrer les éléments == | |
| |
== Paramètres avancés == | Des éléments plus aboutis permettent de gérer la mise en page pour des contenus denses, mais doivent être utilisés avec parcimonie : onglets, accordéons, galeries filtrables etc |
| |
| Pour schématiser : les conteneurs sont les murs et les étages de votre page, tandis que les éléments (widgets) sont les meubles et la décoration : il est ainsi essentiel de commencer par créer et organiser ses conteneurs, pour pouvoir y intégrer vos widgets. |
| |
=== Importer ou Enregistrer une section réutilisable === | Les éléments et conteneurs créés sur une page ou un article peuvent être enregistrés puis réutilisés à d'autres endroits du site, ou être dupliqués sur une page (utile pour conserver une même mise en page pour un même type de contenu par exemple). |
| |
| ===== Documentation officielle et aides ===== |
| |
| Une documentation officielle importante est disponible (en anglais) sur le site d'Elementor : |
| [[https://elementor.com/help/]] |
| |
| De nombreux tutoriels sont disponibles sur youtube, notamment en français. |
| |
| Enfin n'hésitez pas à solliciter Flavia APE pour la prise en main ou pour toute demande d'aide. |