Aller au contenu

Éditer une page basique

Note: 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 ont été 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 alors 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é