procedures:sinp-aura:tutoriels:cms:elementor_content [CBNA SINP]

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Créer ou éditer du contenu avec Elementor ======

Afin de créer ou modifier du contenu sur le site de l'ORB Aura, vous devrez vous connecter à l'interface d'administration de WordPress à l'adresse suivante : <adresse_du_site>/administration-login

Votre identifiant et mot de passe sont à demander à l'animateur du site internet, Flavia APE (Donovan Maillard). 

**Rappelez-vous qu'Elementor ne fait que gérer le contenu directement visible par l'utilisateur. Un certain nombre d'actions (créer des pages, des articles, leur donner un titre etc) reposent donc sur les interfaces classiques de WordPress**.

===== Accéder à l'éditeur des pages ou articles =====
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

{{ :procedures:sinp-aura:tutoriels:cms:capture_d_e_cran_2021-01-11_a_11.37.30.png?direct&800 |}}


===== Comprendre la structure des pages et articles =====

Afin d'organiser votre page ou article et aboutir à une présentation ergonomique, Elementor s'appuie sur des **sections** pour créer une **structure de page**. Ces sections forment une sorte de "tableau" au sein duquel vous disposerez vos contenus.

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 l'icône {{:procedures:sinp-aura:tutoriels:cms:screenshot_2021-01-12_elementor_accueil.png?direct&30|}} disponible en bas de page, et peuvent comporter un ou plusieurs conteneurs. La largeur, la disposition de ces conteneurs et leur nombre est modifiable par la suite : 
{{ :procedures:sinp-aura:tutoriels:cms:create_sections.webm |}}

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.

**Modifier une section :** 
Une fois une que vous avez ajouté une ou des sections avec l'icône {{:procedures:sinp-aura:tutoriels:cms:screenshot_2021-01-12_elementor_accueil.png?direct&30|}}, celle-ci se positionnera sur votre page. Lors de sa création, l'éditeur affiche automatiquement le panneau de configuration de cette section. Mais vous pouvez rouvrir ce panneau à tout moment en cliquant sur le bouton {{:procedures:sinp-aura:tutoriels:cms:capture_d_e_cran_2021-01-12_a_11.13.57.png?direct&100|}}, disponible au survol en haut de chaque section. 

  * L'icône {{:procedures:sinp-aura:tutoriels:cms:capture_d_e_cran_2021-01-12_a_11.19.08_3.png?direct&30|}} permet de créer une nouvelle section au dessus de la section courante
  * L'icône {{:procedures:sinp-aura:tutoriels:cms:capture_d_e_cran_2021-01-12_a_11.19.08_2.png?direct&30|}} permet de rouvrir le panneau d'édition de la section courante
  * L'icône {{:procedures:sinp-aura:tutoriels:cms:capture_d_e_cran_2021-01-12_a_11.19.08_1.png?direct&30|}} permet de dupliquer la section courante (utile pour reproduire une mise en page et y modifier le contenu ultérieurement)
  * L'icône {{:procedures:sinp-aura:tutoriels:cms:capture_d_e_cran_2021-01-12_a_11.19.08.png?direct&30|}} permet de supprimer la section courante

**Modifier une colonne :**
Les colonnes peuvent être éditées en cliquant sur l'icône {{:procedures:sinp-aura:tutoriels:cms:capture_d_e_cran_2021-01-14_a_11.27.20.png?direct&30|}} présente dans l'angle supérieur gauche de chaque colonne.

Vous pourrez alors : 
  * {{:procedures:sinp-aura:tutoriels:cms:capture_d_e_cran_2021-01-14_a_11.27.20.png?direct&30|}} éditer la colonne courante
  * {{:procedures:sinp-aura:tutoriels:cms:capture_d_e_cran_2021-01-14_a_11.30.20_1.png?direct&30|}}dupliquer la colonne courante
  * {{:procedures:sinp-aura:tutoriels:cms:capture_d_e_cran_2021-01-14_a_11.30.20_3.png?direct&30|}}créer une nouvelle colonne après la colonne courante
  * {{:procedures:sinp-aura:tutoriels:cms:capture_d_e_cran_2021-01-14_a_11.30.20_2.png?direct&30|}}supprimer la colonne courante

De plus, vous pourrez modifier la largeur de chaque colonne en déplaçant simplement leurs limites vers la gauche ou la droite.

===== Intégrer du contenu aux pages =====
Une fois que vous aurez créé une ou des sections/colonnes, vous pourrez y intégrer des **éléments** de contenu. Pour ce faire, l'éditeur vous propose **une banque d'éléments** disponibles via l'icône {{:procedures:sinp-aura:tutoriels:cms:capture_d_e_cran_2021-01-14_a_11.34.59.png?direct&30|}}(disponible en haut à droite du panneau d'édition). Vous pourrez **glisser-coller** (drag & drop) un ou plusieurs **widgets** dans la zone de votre choix. 

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

Par exemple :
{{ :procedures:sinp-aura:tutoriels:cms:elements.webm |}}


===== Comprendre l'éditeur =====
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 !

{{ :procedures:sinp-aura:tutoriels:cms:capture_d_e_cran_2021-01-12_a_08.22.32.png?direct&600 |}}


=== Mise en page des sections et colonnes ===
Permet de définir la mise en page de la zone sélectionnée : sa largeur (pleine largeur ou encadré de taille variable), l'écartement des colonnes, la hauteur de la zone, l'alignement vertical du contenu (en haut, en bas, au milieu de la zone), l'alignement horizontal du contenu ou, le cas échéant, la balise html à utiliser (laisser "div" par défaut). 

Dans le cas des colonnes, c'est également dans cet onglet que se configure le lien à appliquer lorsque l'utilisateur clique sur la colonne (permet d'éviter l'ajout de boutons dans certains cas). 


=== Contenu des éléments ===
Cet onglet comporte toutes les informations de contenu de l'élément, et est donc variable en fonction de l'élément sélectionné. 

C'est ici que vous définirez l'image, le titre, le texte à afficher selon le widget en question, ou que vous choisirez le lien d'un bouton ainsi que le texte qu'il doit afficher. 

Pour certains éléments disposant de contenus multiples (champs d'un formulaire, éléments d'une galerie filtrable, onglets d'un accordéon etc), c'est dans cet onglet que vous pourrez ajouter ou supprimer des contenus.

Dans certains cas particuliers, cet onglet comporte aussi les choix de couleur à afficher.  

=== Style des sections, colonnes et éléments ===
Pour les colonnes et sections, cet onglet style permet notamment de définir les arrières-plans à utiliser, les types de bordure ou les limites (possibilité de délimiter le haut ou le bas d'une zone).

Pour les éléments, il vous permet de configurer la couleur, la police de caractère, le cas échéant l'arrondi des angles, les types de bordures, les ombres de boites etc qui s'appliqueront à votre contenu. 

=== Paramètres avancés des sections, colonnes et éléments ===
L'onglet "**avancé**" des sections, colonnes et éléments permet de définir notamment les marges à appliquer à l'objet, ou pour les utilisateurs plus avancés, de définir les classes et identifiants css ainsi que les règles css propres à l'objet. 

Cet onglet permet également, en cas de besoin, de gérer le responsive en définissant si l'objet doit être, ou non, affiché sur mobile ou tablette.


==== Gestion des couleurs ====
L'éditeur a en mémoire les couleurs de la charte graphique de l'ORB. Lorsque vous devrez définir des couleurs, cliquez sur l'icône {{:procedures:sinp-aura:tutoriels:cms:capture_d_e_cran_2021-01-14_a_13.06.44_2_.png?direct&30|}} pour accéder à cette liste pré-établie.

{{ :procedures:sinp-aura:tutoriels:cms:capture_d_e_cran_2021-01-14_a_16.24.05_2_.png?direct&200 |}}

==== Enregistrer et réutiliser des sections ====
Il est possible d'enregistrer des sections dans "mes modèles", afin de pouvoir les réutiliser à d'autres endroits du site par la suite. C'est par exemple ce qui est fait pour les formulaires de contact des différents pôles, ou l'image d'entête des pages (permet d'avoir les mêmes dimensions et polices sur toutes les pages notamment). 

Pour **enregistrer une section** que vous avez créée, vous devrez simplement faire un clic droit sur l'icône {{:procedures:sinp-aura:tutoriels:cms:capture_d_e_cran_2021-01-12_a_11.19.08_2.png?direct&30|}} en haut de la section à sauvegarder.
Vous pourrez alors cliquer sur **enregistrer comme modèle** et lui donner un nom. 
{{ :procedures:sinp-aura:tutoriels:cms:capture_d_e_cran_2021-01-14_a_16.18.12_2_.png?direct&200 |}}

Pour le réutiliser, sur la même page ou partout ailleurs sur le site, il vous suffira d'ajouter une nouvelle section en cliquant en bas de page sur {{:procedures:sinp-aura:tutoriels:cms:screenshot_2021-01-14_elementor_acce_der_aux_donne_es_1_.png?direct&30|}}. Vous pourrez alors retrouver votre section dans **mes modèles**.
{{ :procedures:sinp-aura:tutoriels:cms:screenshot_2021-01-14_elementor_accueil.png?direct&600 |}}