> ## Documentation Index
> Fetch the complete documentation index at: https://help.scribe-mail.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Vue d'ensemble de l'éditeur

> Découvrez l'éditeur de signature Scribe et voyez comment le panneau d'arborescence, le canevas, le panneau de style, la barre supérieure et la barre d'actions s'articulent pour créer des signatures.

L'éditeur Scribe est l'endroit où vous concevez vos signatures e-mail. Il suit une disposition en trois panneaux similaire à celle d'outils de design comme Figma ou Framer : un [panneau d'arborescence](/fr/editor/tree-panel) à gauche, un [canevas](/fr/editor/canvas) au centre et un [panneau de style](/fr/editor/styling-panel) à droite.

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/editor-overview-three-panel-layout.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=b921c9bfe8ba7ac80bfc5599c483157e" alt="Disposition à trois panneaux de l'éditeur Scribe avec arborescence, canevas et panneau de style" width="3456" height="1928" data-path="images/editor-overview-three-panel-layout.png" />
</Frame>

## Disposition

**Panneau d'arborescence (à gauche)** : affiche la structure hiérarchique de votre signature sous forme d'arborescence repliable. Chaque bloc de votre signature y apparaît : colonnes, blocs de texte, images, bannières. Depuis ce panneau, vous pouvez sélectionner, réorganiser, dupliquer, masquer et supprimer des blocs.

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/editor-overview-tree-panel.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=e00a98504c39679c23f6b1a558016e7d" alt="Panneau d'arborescence à gauche montrant la hiérarchie des blocs de signature" title="Panneau d'arborescence à gauche montrant la hiérarchie des blocs de signature" className="mx-auto" style={{ width:"34%" }} width="728" height="1764" data-path="images/editor-overview-tree-panel.png" />
</Frame>

**Canevas (au centre)** : aperçu en direct de votre signature, mis à jour en temps réel à chaque modification. Cliquez sur un bloc directement dans le canevas pour le sélectionner, ou utilisez le panneau d'arborescence. Le canevas affiche les données réelles d'un collaborateur via les Smartfields, pour que vous puissiez visualiser le rendu final de la signature.

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/editor-overview-canvas-center.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=5015dd3876200251071a928ce99ebeff" alt="Canevas central de l'éditeur affichant l'aperçu en direct de la signature" title="Canevas central de l'éditeur affichant l'aperçu en direct de la signature" className="mx-auto" width="2156" height="1746" data-path="images/editor-overview-canvas-center.png" />
</Frame>

**Panneau de style (à droite)** : apparaît lorsque vous sélectionnez un bloc. Il regroupe toutes les options de style du bloc : propriétés de mise en page, formatage du texte, couleurs, espacements et connexions aux Smartfields. Les options varient selon le type de bloc sélectionné.

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/editor-overview-styling-panel.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=e8248501203acf14c76286f788b4b7cf" alt="Panneau de style à droite affichant les options de configuration du bloc" title="Panneau de style à droite affichant les options de configuration du bloc" className="mx-auto" style={{ width:"33%" }} width="696" height="1766" data-path="images/editor-overview-styling-panel.png" />
</Frame>

## Barre supérieure

La [barre supérieure](/fr/editor/editor-top-bar) affiche les informations et actions clés :

* **Flèche retour** : revenir à la page de détail de la signature
* **Nom et statut de la signature** : affiche le nom de la signature, le nombre de collaborateurs assignés et le statut actuel (Brouillon ou Publiée)
* **Modèles** : parcourez la bibliothèque de modèles pour partir d'un design prédéfini
* **Contrôle qualité** : lance une vérification de compatibilité sur le design de votre signature. Cliquez pour afficher une checklist qui vérifie que votre signature s'adapte de manière responsive à toutes les tailles d'écran, fonctionne avec tous les clients de messagerie et navigateurs, s'affiche correctement sur ordinateur, mobile et tablette, se charge rapidement grâce à un HTML léger, s'affiche correctement à la rédaction des e-mails et conserve les proportions des images sur toutes les plateformes. Tous les contrôles doivent être au vert avant la publication.
* **Aperçu** : ouvre la fenêtre d'aperçu pour visualiser le rendu de la signature pour chaque collaborateur
* **Publier** : met en ligne vos modifications de design. Après la publication, les mises à jour sont automatiquement envoyées à tous les collaborateurs ayant installé la signature.

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/editor-overview-top-bar.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=c72972192e2a0ce27e68763eee6cbed9" alt="Barre supérieure de l'éditeur avec les actions Modèles, Contrôle qualité, Aperçu et Publier" width="3456" height="176" data-path="images/editor-overview-top-bar.png" />
</Frame>

## Barre d'actions

En bas du canevas, la barre d'actions propose :

* **Annuler / Rétablir** : revenez en arrière ou avancez dans vos modifications
* **Poignée de déplacement** : repositionnez la vue du canevas
* **Contrôles de zoom** : zoom avant (+), zoom arrière (−) ou définition d'un niveau de zoom précis (par exemple, 100 %)

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/editor-overview-action-bar.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=8ffc4d4f58a9e87a76920ddacdaed15a" alt="Barre d'actions de l'éditeur avec les contrôles d'annulation, de rétablissement et de zoom" title="Barre d'actions de l'éditeur avec les contrôles d'annulation, de rétablissement et de zoom" className="mx-auto" style={{ width:"66%" }} width="668" height="226" data-path="images/editor-overview-action-bar.png" />
</Frame>

## Articles associés

* [Barre d'actions](/fr/editor/action-bar)
* [Ajouter des blocs](/fr/editor/add-blocks)
* [Créer des mises en page avec colonnes et lignes](/fr/editor/building-layouts-with-columns-and-rows)
