L’éditeur est l’écran où vous composez une page, un contenu ou un gabarit avec des blocs. Cet article présente ses zones et ses trois onglets de réglages. Vous saurez régler un bloc pour un état comme le survol et pour un écran comme le téléphone.
Avant de commencer
- L’éditeur s’ouvre dans votre Staging. La Production ne se modifie pas : elle reçoit une copie du Staging à chaque publication du site.
- Les couleurs, les polices, les tailles et les espacements que l’éditeur propose sont ceux du design system de votre site.
Ouvrir l’éditeur
- Dans l’administration de votre Staging, ouvrez Pages puis Toutes les pages. Pour une entrée, ouvrez le menu de son type de contenu.
- Survolez le titre de la page et cliquez sur Modifier. L’éditeur s’ouvre.
L’éditeur garde le menu de l’administration à gauche et ouvre la vue en liste à côté.
Les zones de l’éditeur
| Zone | Rôle |
|---|---|
| La barre du haut | Les outils de la page : ajouter un bloc, annuler, ouvrir la vue en liste, enregistrer, prévisualiser et publier. |
| La vue en liste, à gauche | L’arbre des blocs de la page. Un clic sur une ligne sélectionne le bloc, un glisser le déplace. L’onglet Structure montre le plan de la page par ses titres. |
| La page, au centre | La page telle que vos visiteurs la verront, avec l’en-tête et le pied de page de son gabarit. Vous écrivez directement dans les blocs. |
| L’inspecteur, à droite | Deux onglets. Page règle le contenu entier, par exemple son état, son slug, son parent et son référencement. Bloc règle le bloc sélectionné. |
Les boutons de la barre du haut
| Bouton | Effet |
|---|---|
| Outil d’insertion de bloc (+) | Ouvre la liste des blocs à ajouter. Ajouter un bloc détaille l’insertion. |
| Annuler et Rétablir | Défont ou refont votre dernière modification. |
| Vue d’ensemble du document | Ouvre ou ferme la vue en liste. |
| Enregistrer le brouillon | Enregistre sans la publier une page qui n’a jamais été publiée. |
| Voir | Montre la page à la largeur d’un Ordinateur de bureau, d’une Tablette ou d’un Mobile. |
| Aperçu en mode sombre | Passe la page en mode sombre. Le même bouton, Aperçu en mode clair, la ramène. |
| Accessibilité | Ouvre les contrôles d’accessibilité de la page. Vérifier l’accessibilité de vos pages les décrit. |
| Réglages | Ouvre ou ferme l’inspecteur. |
| Publier | Publie la page dans le Staging. |
Sélectionner un bloc
Cliquez sur un bloc dans la page, ou sur sa ligne dans la vue en liste. Une barre d’outils s’affiche au-dessus du bloc et l’inspecteur passe sur l’onglet Bloc.
- Les flèches de la barre d’outils montent ou descendent le bloc. La poignée à six points le fait glisser.
- Le menu Options, les trois points de la barre d’outils, sert à copier, dupliquer ou supprimer le bloc, ou à ajouter un bloc juste avant ou après.
- En bas de l’écran, le fil donne le chemin du bloc sélectionné, par exemple Page > Flex > Titre 2. Un clic sur un maillon sélectionne ce bloc parent.
Lire l’onglet Bloc
L’onglet Bloc commence par le nom du bloc et sa description. Certains blocs y montrent leurs variantes, par exemple les niveaux d’un titre ou les dispositions d’un conteneur. Dessous, trois onglets rangent tous les réglages du bloc, dans le même ordre sur chaque bloc.
| Onglet | Contenu |
|---|---|
| Réglages | Le comportement et la structure du bloc : le niveau d’un titre, la disposition d’un conteneur ou un lien. Le panneau Avancé donne au bloc son Ancre HTML, pour un lien qui mène droit à lui. |
| Styles | L’apparence du bloc : la liste de ses styles, puis les panneaux Couleurs, Images de fond, Typographie, Taille et espacement, Bordures, Effets, Transitions et CSS avancé, selon ce que le bloc accepte. |
| Animations | Les animations du bloc et ses interactions avec d’autres blocs. Animer un bloc les décrit. |
Un onglet sans réglage pour le bloc sélectionné ne s’affiche pas. L’inspecteur s’ouvre sur Réglages. Quand cet onglet ne contient que le panneau Avancé, comme pour un paragraphe, il s’ouvre sur Styles.
Régler un état
Vous choisissez l’état à régler dans la rangée en haut de l’onglet Styles. Vos changements dans les panneaux de styles ne valent que pour cet état. La page montre le bloc dans cet état.
- Sélectionnez le bloc, puis ouvrez l’onglet Styles.
- Dans la rangée des états, cliquez sur Survol.
- Changez un réglage, par exemple la couleur de fond. La page montre le bloc survolé.
- Revenez sur Par défaut pour régler le bloc au repos.
| État | Quand il s’applique |
|---|---|
| Par défaut | Le bloc au repos. Toujours présent. |
| Survol | Le pointeur est sur le bloc. |
| Focus | Le bloc, ou un élément qu’il contient, a le focus clavier. |
| Actif | Le bloc est marqué actif : la diapositive ou l’onglet à l’écran, l’entrée de la page en cours de lecture ou un bloc qu’un autre active. |
| Coché | La case ou le bouton radio est coché. |
| Obligatoire, Désactivé | Le champ de formulaire est obligatoire, ou désactivé. |
| Valide, Invalide | Le champ de formulaire passe la validation, ou y échoue. |
| Impair, Pair | Les rangées impaires ou paires d’un tableau, pour alterner leurs couleurs. |
Seuls les états utiles au bloc sont proposés : un titre ou un conteneur propose Par défaut, Survol et Actif. Un état que vous ne réglez pas garde le rendu de Par défaut. Survolez un état pour lire quand il s’applique. Quand vous sélectionnez un autre bloc, la rangée revient sur Par défaut.
Régler pour un écran
Vous choisissez l’écran dans la seconde rangée, sous les états : Ensemble, Bureau, Tablette et Mobile. Chaque réglage de l’onglet Styles vaut pour un état et un écran.
- Ensemble donne la valeur de tous les écrans.
- Un écran ne garde que ce qui diffère d’Ensemble. Laissé vide, il reprend Ensemble.
- Les écrans ne se recopient pas entre eux : Tablette ne reprend jamais Bureau.
- Une pastille sur un écran signale qu’il porte une valeur pour l’état en cours.
Par exemple, une marge intérieure de 24 px sur Ensemble et de 16 px sur Mobile donne 16 px sur un téléphone et 24 px sur un ordinateur ou une tablette.
Un réglage placé au-dessus des deux rangées vaut pour tous les états et tous les écrans.
Revenir à la valeur d’un style
Un bloc porte souvent un style enregistré, par exemple Carte ou Titre 2. Ses réglages en viennent tant que vous ne les changez pas. À côté du nom d’un réglage, une icône dit d’où vient sa valeur. Survolez-la pour lire son nom.
| Icône | Elle apparaît quand | Un clic |
|---|---|---|
| Flèche circulaire, Surcharge locale. Cliquez pour hériter du style | Le style donne une valeur et vous en avez posé une autre sur le bloc. | Rend au bloc la valeur du style. |
| Cercle barré, Supprimer la valeur héritée | La valeur vient du style et vous ne l’avez pas changée. | Retire la valeur du style sur ce bloc. Un second clic, Rétablir la valeur héritée, la rend. |
| Corbeille, Retirer la valeur | Le style ne donne pas de valeur et vous en avez posé une. | Retire votre valeur. |
Voir la page en mode sombre
Le bouton Aperçu en mode sombre passe toute la page en sombre, fond compris, comme pour un visiteur qui a choisi le mode sombre. Aperçu en mode clair la ramène. L’éditeur ne suit pas le réglage de votre ordinateur. Votre choix reste en place d’une visite à l’autre sur ce navigateur.
Sur un site qui ne montre que le mode clair ou que le mode sombre, le bouton n’apparaît pas : la page s’affiche toujours dans ce mode.
Enregistrer vos modifications
Vos modifications restent dans l’éditeur tant que vous n’enregistrez pas. Sur une page publiée, l’enregistrement remplace la version publiée dans le Staging. Pour préparer des changements sans toucher à la page publiée, suivez Préparer la nouvelle version d’une page en ligne.
Chaque enregistrement garde une révision de la page, avec le nom de la personne qui a enregistré.