Menu Fermer

Albert Calmette

Comment compléter sa page

Afin de se faciliter la tache, nous avons utilisé l’éditeur de page web Elementor. Cette documentation est partiellement tirée et traduite de la page How to build your first page.

Elementor utilise trois concepts distincts pour construire une page : les Sections, les Colonnes et les Widgets. 

Les Sections contiennent un certain nombre de Colonnes, qui elles même contiennent un certain nombre de Widgets. Les données (images, textes, etc.) seront contenus dans les Widgets.

 Les Sections, les  Colonnes et les Widgets se contrôlent surtout par leurs poignées.

Interface

Elementor divise la fenêtre en deux parties. La grande est une prévisualisation de la page, tel qu’elle devrait apparaitre pour un simple visiteur. Le panneau de gauche (plus étroit) est l’éditeur de page. Toutes les modifications du contenu et de la forme des Widgets se font via l’éditeur de page. 

En haut à droite de l’éditeur de page, l’icône représentant 9 petits carrés permet d’accéder au menu des Widgets.  C’est uniquement depuis là que l’on peut ajouter un widget à la page.

En bas, l’on trouve une barre qui comporte les boutons « Réglages » et « Navigateur » qu’il ne faut pas utiliser. Ensuite le bouton « Historique » permet d’annuler une ou plusieurs modifications (Ctrl + Z). Le bouton « Mode Responsive » permet de prévisualiser la page sur d’autres plateformes (Tablette, Natel). « Prévisualiser les modifications » ouvre un nouvel onglet avec la page tel qu’elle est actuellement enregistrée.

Enfin le bouton « METTRE À JOUR » sauvegarde les modifications effectuées.

NOTE : Sauvegardez régulièrement votre progression, car il est strictement IMPOSSIBLE de récupérer des données. Toute actualisation de la page (F5, bouton d’actualisation ou redémarrage de votre navigateur web) vous fera perdre toute progression non enregistrée. Quand l’on travaille sur un site, toute donnée qui n’est pas envoyée au site ne peut être enregistrée.

Modification

Pour modifier les Sections, Colonnes et Widgets, il faut faire un clic droit sur leurs poignées. Notez qu’il est aussi possible de modifier les Widgets par un simple double-clique.

Section

  • Cliquez le bouton pour créer une nouvelle section
  • Choisissez la structure de vos colonnes
  • Un clic droit sur la poignée vous permet de Modifier, Dupliquer et Supprimer votre Section.
  • La poignée permet de Déplacer, Ajouter ou Supprimer une Section
Plus d'informations sur les sections (en anglais)

Colonne

  • Définir la largeur des colonnes : vous pouvez le faire sous l’onglet mise en page ou en déplaçant la ligne traitilée
  • Ajouter une colonne : Clic droit sur la poignée > Ajouter une nouvelle colonne
  • Il est aussi possible d’utiliser le Widget Section Interne pour créer une structure de colonne
Plus d'informations sur les colonnes (en anglais)

Widget

  • Les Widgets sont de simples blocs qui contiennent un type de données
  • Insérez un Widget depuis le panneau de gauche
  • La modification d’un widget se fait en lui cliquant dessus dans 
  • La largeur d’un Widget est définie par la largeur de la Colonne qui le contient
  • Certains Widgets (ceux avec le cadenas) ne sont pas disponibles pour la création de ce site
  • L’onglet Style permet de mettre en forme vos différents widgets. Cependant, il n’est pas conseillé de mettre en forme les couleurs et la typographie afin de garder une harmonie au niveau du site.
  • Les Widgets les plus utiles sont : Titre, Section Interne (permet de créer une sous-structure de colonne), Image (et Vidéo), Éditeur de texte et Glossaire

Widget : Titre

Afin de garder une harmonie au niveau du site, il est recommandé d’utiliser la balise HTML « H2 » pour le titre de la page puis d’incrémenter la valeur de la balise de 1 pour chaque nouveau niveau de sous-titre. 

Ainsi le titre d’une section aura la balise HTML « H3 », le titre d’une sous-section la balise HTML « H4 », etc. 

Widget : Section interne

Permet d’ajouter un niveau supplémentaire de « modularité » en proposant de créer une Section avec sa structure en colonne. Peut-être très utile pour ajouter une image à côté d’un paragraphe ou plusieurs images côte à côte.

Widget : Image (et Vidéo)

Permet d’ajouter des images (ou des Vidéos), qu’elles soient hébergées sur le site KrobPro ou sur des sites externes. 

La Taille de l’image recommandée est la taille Medium – 300 x 300.

De manière générale, il est recommandé de noter soit l’auteur, soit le lien du site si l’image n’est pas déjà hébergée sur KrobsPro.

Comme l’on est sur un site, les pages ne stockent pas elle mêmes les images (pas comme un document Word par exemple). Ces images doivent donc être stockées dans un fichier externe et liés via (par exemple) leur nom de fichier. Cela implique qu’il n’est pas possible d’utiliser une image tirée d’un document Word ou d’une autre page web en faisant un Copier-Coller ou (pire) un Glisser-Déposer. 

Pour ajouter un fichier, il faut soit disposer du fichier (.jpg, .png ou – pour les images animées – .gif) et les téléverser (upload) sur le site. Soit disposer d’une URL référençant une image (souvent en finissant par .jpg, .png ou .gif).

Widget : Éditeur de texte

Afin de maximiser l’harmonie entre les différentes pages, il est recommandé de ne pas changer la couleur et la typographie des paragraphes. Maj + Ctrl + V sur Linux et Windows et Maj + Cmd + Opt + V sur MacOS permettent de coller du texte sans le formatage. Il est donc recommandé de l’utiliser plutôt qu’un simple Ctrl + V ou  Cmd + V (sauf si vous collez du contenu issu directement de ce site).

Malheureusement, il n’est pas possible d’écrire à l’exposant (x2) ou à l’indice (CO2) en utilisant l’éditeur visuel d’Elementor, il existe deux solutions alternatives.

  1.  Utiliser l’éditeur textuel (Texte dans le coin en haut à droite). Ensuite écrire <sub> (respectivement <sup>) avant, et </sub> (respectivement </sup>) après le texte que l’on veut écrire à l’indice (respectivement à l’exposant). Ainsi CO2 s’écrit CO<sub>2</sub> et x2048 s’écrit x<sup>2048</sup>
  2. Copier (Ctrl + C) un texte à l’exposant ou à l’indice sur le site (p.e. les exemples ci-dessus) et le coller (Ctrl + V). Modifier ensuite le texte pour arriver au résultat voulu.
NOTE : Il est recommandé d’utiliser qu’une fois la méthode 1 par page puis de copier-coller le texte issu de la méthode 1.

Widget : glossaire

Ce widget est censé être utilisé qu’une seule fois en fin de page.

Son interface est légèrement différente des autres widgets, car il s’agit d’une liste où l’on peut facilement duplique ou supprimer un élément. Pour modifier un élément (couple Terme / Définition) il suffit de cliquer sur cet élément dans la liste. 

Les champs Terme et Définition (qui s’utilise de la manière que le Widget : Éditeur de texte) sont requis. 

Le champ id permet de spécifier l’identifiant du champ est de le lier avec un lien.

Le champ Lien permet quant à lui de rediriger sur une documentation plus complexe du terme.

Facultatif : Id, liens et glossaire

Afin de rediriger rapidement le lecteur vers un paragraphe, un titre ou une entrée d’un glossaire, HTML nous propose d’ajouter un attribut id qui est un identifiant unique sur la page. 

Cet identifiant peut être entré comme « ID de CSS » sous l’onglet « Avancé » pour les titres et les paragraphes (cf. image de droite), et via le champ « id » pour une entrée de glossaire.

Le lien vers un identifiant se fait simplement en le précédent d’un hashtag. Ainsi le lien vers le titre Widget qui a comme id « widget-exemple », sera #widget-exemple. Cela marche aussi en le précédant d’une URL : https://krobspro.ch/comment-rediger-une-page/#widget-exemple

Note : L’id est sensible à la casse et ne peut contenir d’espaces (l’utilisation du tiret à la place est recommandée) et ne peut commencer par un chiffre