Aller au contenu

Éditer une page basique

Prérequis

Dans cette section, nous nous basons sur une page créée dans la partie précédente : créer une page basique.

Mise en page

Avant d’ajouter du contenu à notre page, il faut comprendre comment est gérée la mise en page. Vous pouvez visualiser cela comme des briques qui s’assemblent pour construire une page en suivant ces étapes :

  1. ajout d’une rangée : réserve une première zone horizontale sur la page.
  2. choix d’une ou plusieurs colonnes sur la rangée : jusqu’à 4 colonnes pour organiser le contenu côte à côte
  3. ajout de blocs de contenus : placés à l’intérieur des colonnes, c’est dans ces blocs que le contenu du site est écrit (image, texte, titres, listes, etc.).

Voici la structure que je souhaite donner à la page "Nos missions" :

  1. un petit texte d’introduction
  2. trois missions côte à côte
  3. section « notre méthode » avec un texte et une image côte à côte
  4. un bouton de prise de contact qui renvoie vers notre formulaire de contact

Je commence par créer cette structure en ajoutant ces 4 rangées (bouton "ajouter" de la définition "3. Mise en page personnalisée" associée à l’image précédente).

Choix du nombre de colonnes pour une nouvelle rangée

Ci-dessous, le rendu obtenu : chaque rangée comporte le nombre de colonnes attendu. Les séparations entre les colonnes étant peu visibles, elles sont ici surlignées en rouge afin de faciliter leur identification.

Page "Nos missions" avec ses quatre rangées et respectivement une, trois, deux et une colonnes.

Ajout de blocs de contenus

Pour ajouter le texte d’introduction dans la première rangée, un clic sur sa colonne ouvre une fenêtre qui liste les blocs disponibles.

Choisir le bloc "Texte". Le bloc est alors inséré dans la rangée, et il prend toute sa largeur car cette rangée n’est composée que d’une seule colonne.

Nous pouvons ensuite renseigner le texte de ce premier bloc. Pour cet exemple, j’utilise deux paragraphes de texte fictif (généré automatiquement).

Bloc de texte de deux paragraphes, ses menus sont annotés
1. Options du bloc

Barre d’outils spécifique au bloc « Texte ». Elle permet notamment de mettre en forme le contenu (gras, italique) et d’ajouter des liens.

2. Menu du bloc

Ce menu est composé des éléments :

  • éditer (icone stylo) : ouvre une interface de modification du bloc, contenant des options de style supplémentaires (couleur de texte, alignement, etc.).
  • insérer après (icone plus) : ouvre la fenêtre de sélection de bloc pour en ajouter un nouveau.
  • supprimer (icone poubelle) : supprime le bloc et son contenu.
  • déplacer pour réordonner  (icone six petits points) : en restant appuyé sur ce bouton, il est alors possible de modifier l’emplacement du bloc (changement de rangée, colonne ou ordre des blocs entre eux dans une colonne).
  • plus  (icone trois petits points): menu déroulant contenant toutes les options du bloc.

Je répète alors l'opération dans chaque colonne en sélectionnant le bon type de bloc (texte, titre, liste, image et bouton).

Les blocs sont classés par type de contenu. Vous pouvez afficher ou masquer une catégorie en cliquant sur le chevron correspondant.

Voici un exemple de résultat obtenu une fois les blocs de contenus ajoutés. Il est possible à tout moment d’enregistrer notre avancement en cliquant sur le bouton "enregistrer" en haut à droite de la page (ou en utilisant le raccourci clavier Ctrl+s).

Page "Nos missions" avec tous ses blocs de contenus, annoté
1. Visualiser la page

Lien permettant d'ouvrir la page sur le site

2. Bloc titre

Titre de niveau H2, c'est-à-dire un titre de deuxième niveau dans la hiérarchie de la page. Le titre principal de cette page est de niveau 1, ses sous-parties sont de niveau 2, et ainsi de suite. Essentiel CMS génère automatiquement le titre de niveau 1 à partir du nom de la page, ici "Nos missions".

3. Fichiers disponibes sur cette page

Maintenant qu’une image a été chargée sur cette page, je peux la voir dans le menu latéral.

4. Bloc liste

Liste non ordonnée

5. Bloc bouton

Créé un lien sur la page sous forme de bouton. Le bouton est configuré pour afficher le texte "Contactez nous" avec un lien qui amenera l'utilisateur sur la page de contact du site.