# Se repérer dans l’éditeur

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

1. Dans l’administration de votre Staging, ouvrez **Pages** puis **Toutes les pages**. Pour une entrée, ouvrez le menu de son type de contenu.
2. 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é.

![L’éditeur ouvert sur l’accueil d’un domaine viticole : la barre du haut, la vue en liste à gauche avec le bloc Titre 2 sélectionné, la page au centre avec la barre d’outils du titre Nos vins, puis l’inspecteur à droite sur l’onglet Styles, avec la liste des styles de titre et la rangée des états.](https://static.lovelyrender.com/uploads/2026/10/929-doc-pages-editeur.png)

## 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](https://lovelyrender.com/fr/documentation/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](https://lovelyrender.com/fr/documentation/accessibilite/) les décrit. |
| **Réglages** | Ouvre ou ferme l’inspecteur. |
| **Publier** | Publie la page dans le Staging. |

**Remarque :** Une page publiée dans l’éditeur part en ligne avec tout le Staging lors de la prochaine publication du site. [Publier votre site](https://lovelyrender.com/fr/documentation/publier/) explique cette publication.

## 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](https://lovelyrender.com/fr/documentation/animations/) 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**.

![Le haut de l’onglet Bloc d’une carte : le bloc Flex et sa description, ses trois variantes, sa balise HTML, les onglets Réglages, Styles et Animations, la liste Styles avec Carte sélectionnée et le bouton Créer, puis la rangée des états Par défaut, Survol et Actif et la rangée des écrans.](https://static.lovelyrender.com/uploads/2026/10/931-doc-pages-onglets.png)

## 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.

1. Sélectionnez le bloc, puis ouvrez l’onglet **Styles**.
2. Dans la rangée des états, cliquez sur **Survol**.
3. Changez un réglage, par exemple la couleur de fond. La page montre le bloc survolé.
4. 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**.

![La rangée des états d’un champ de formulaire : Par défaut, Survol, Focus, Actif, Obligatoire, Désactivé, Valide et Invalide, puis la rangée des quatre écrans.](https://static.lovelyrender.com/uploads/2026/10/150-design-champ.png)

**Remarque :** **Valide** et **Invalide** s’appliquent quand le serveur répond à l’envoi du formulaire. Un champ obligatoire encore vide au chargement de la page ne s’affiche jamais en erreur.

## 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.

**Remarque :** Choisir **Mobile** dans la rangée des écrans ne rétrécit pas la page. Pour voir la page à cette largeur, choisissez **Mobile** dans le menu **Voir** de la barre du haut.

## 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. |

**Attention :** Si vous mettez à jour le style après avoir cliqué sur le cercle barré, le réglage sort du style pour tous les blocs qui le portent. [Enregistrer le style d’un bloc](https://lovelyrender.com/fr/documentation/styles-enregistres/) explique la mise à jour d’un style.

## 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](https://lovelyrender.com/fr/documentation/nouvelle-version/).

Chaque enregistrement garde une révision de la page, avec le nom de la personne qui a enregistré.

## Voir aussi

- [Ajouter un bloc](https://lovelyrender.com/fr/documentation/ajouter-un-bloc/)
- [Partir d’une création toute faite](https://lovelyrender.com/fr/documentation/creations/)
- [Enregistrer le style d’un bloc](https://lovelyrender.com/fr/documentation/styles-enregistres/)
- [Vérifier l’accessibilité de vos pages](https://lovelyrender.com/fr/documentation/accessibilite/)