---
title: "Éditeur visuel : modifiez votre site sur la page | Briks"
url: https://briks.dev/fr/docs/visual-editor
description: "Cliquez sur un élément de votre page pour changer textes, liens, images, style, sections et pages, travaillez en équipe, puis publiez sans crédit."
last_updated: 2026-10-08
---

# Éditeur visuel : modifiez votre site sur la page

Le Visual Editor ouvre la page de votre site à côté d'un panneau, comme le fait un outil de design. Cliquez sur n'importe quel élément pour modifier son texte, sa destination, son image ou son apparence sur téléphone, tablette et ordinateur ; ajoutez, déplacez, copiez ou masquez des éléments, des sections et des pages ; et réglez les couleurs et les polices de tout le site. Vos modifications attendent dans un brouillon partagé par votre équipe et sont mises en ligne quand vous publiez, sans utiliser de crédits. Il est inclus dans les offres payantes.

10 minutes de lecture Vérifié par rapport au studio le 8 octobre 2026

## Ouvrez-le

Où

1. Projects
2. Your project
3. Visual Editor

L'onglet **Visual Editor** se trouve à côté de **Studio** dans un espace de travail avec un forfait payant ; avec Free, l'onglet ne s'affiche pas. L'éditeur remplit la fenêtre, et la flèche en haut à gauche ramène au projet. En haut se trouvent :

| Dans la barre | Ce que ça fait |
| --- | --- |
| **Open layers** | Ouvre et ferme **Layers**, la page section par section. |
| **Pages** | Choisit la page sur laquelle travailler, et ajoute, renomme, déplace et supprime des pages. |
| **Add** | Ajoute un élément ou une section. La touche A fait de même. |
| Flèches annuler et rétablir | Revenez en arrière et avancez dans vos modifications. ⌘Z et ⇧⌘Z font la même chose. |
| **Changes** | Liste chaque changement en attente de publication, chacun avec **Drop this change**. |
| **Comments** | Des commentaires épinglés sur des éléments de la page. |
| **History** | Les versions du site, pour en consulter une ou la restaurer. |
| **Publish** | Affiche **Publish 3 changes**, par exemple. Met le brouillon en ligne. |
| **Desktop**, **Tablet**, **Phone** | La largeur à laquelle vous voyez la page : 1440, 834 ou 390 pixels. |
| **Use the page** | Laisse les clics atteindre le site, pour ouvrir son menu ou une fenêtre contextuelle et y choisir quelque chose. Appuyez sur P pour revenir à la modification. |
| Le menu ⋯ | **Keyboard shortcuts** et **Discard draft**. |
| **Open the page** | Ouvre la page en ligne dans un nouvel onglet. |

Bon à savoir

Un site publié avant l'arrivée de l'éditeur visuel doit être publié une fois avant que l'éditeur puisse le lire. Si la page affiche « This page has not answered the editor. Publish the site once, then open the editor again. », publiez une fois depuis le studio et rouvrez l'éditeur.

## Choisissez ce qu'il faut modifier

- Cliquez sur n'importe quel élément de la page, ou trouvez-le dans **Layers**. Ouvrez la flèche d'une ligne pour voir ce qu'elle contient ; choisir un élément sur la page ouvre le chemin jusqu'à lui.
- Le fil d'Ariane en haut du panneau indique ce qui contient l'élément. Cliquez sur une étape pour la choisir à la place, ou appuyez sur Échap.
- Maj-clic pour en choisir plusieurs. Un changement d'apparence s'applique à tous.
- Quand un même élément se répète, comme les cartes d'une liste, tous s'illuminent, et un changement d'apparence les modifie tous. Les mots de chacun lui appartiennent.
- Faites un clic droit sur n'importe quel élément, ou appuyez sur Maj+F10, pour ouvrir son menu.

### Le menu du clic droit

| Élément | Ce que ça fait |
| --- | --- |
| **Edit text** | Tapez par-dessus les mots de la page. |
| **Rewrite with AI** | **Rewrite**, **Shorter**, **Longer**, **Friendlier tone**, **More formal tone** ou **Bolder tone**, chacun jusqu'à 0.20 crédit. Voyez les nouveaux mots, puis **Keep**, **Try again** ou **Discard**. |
| **Replace picture** ou **Replace video** | Choisissez-en une autre dans votre médiathèque. |
| **Alt text…**, **Link…**, **Style…** | Ouvre cette partie du panneau. |
| **Ask AI** | **New design for this section**, **Fix the layout** ou **Ask about this…**. Voir Demander à l'IA et le créateur. |
| **Move up**, **Move down**, **Move out of its container**, **Move into the next container** | Déplacez-le parmi ses voisins, ou hors d'un bloc ou dans un bloc. |
| **Select parent**, **Select section** | Choisissez ce qui le contient, ou toute sa section. |
| **Lock** | Évite qu'il soit choisi sur la page par accident. Le même élément le libère à nouveau. |
| **Duplicate**, **Copy style**, **Paste style** | Copiez-le, ou reportez son apparence sur un autre élément. |
| **Show** | **Hide on phone**, **Hide on tablet** ou **Hide everywhere**. |
| **Section** | **Quick edit section…**, **Add section above…**, **Add section below…**, **Move section up**, **Move section down**, **Duplicate section** et **Section background…**. |
| **Comment**, **Check the page…** | Épinglez-y un commentaire, ou vérifiez la page à la recherche de problèmes. |
| **Delete** | Le supprime. Sur une section entière, il indique **Remove from page**. |

Un élément qui ne peut pas s'appliquer reste grisé et dit pourquoi. Pendant la saisie, une petite barre propose **Bold**, **Italic**, **Link** et **Line break**.

## Textes et liens

1. Double-cliquez sur les mots

   Où : Page

   Tapez par-dessus directement sur la page. Entrée les conserve, Échap les rétablit. Ou saisissez-les sous **Content** dans le panneau.

2. Changer sa destination

   Où : Link

   Un lien ou un bouton mène à une **Page** du site, une **Section**, une **Web address**, un **Email**, un numéro de **Phone** ou un **File**, et peut s'**Open in a new tab**.

3. Vérifiez-le à chaque largeur

   Où : Bar

   Passez de **Desktop** à **Tablet** ou **Phone** pour voir comment les mots passent à la ligne.

Les mots conservés dans les informations de votre site, comme son adresse e-mail ou son nom, changent partout où ils apparaissent, et le panneau indique combien d'endroits sont concernés. L'éditeur signale un tiret utilisé comme ponctuation et propose une virgule, ainsi qu'un bouton dont le texte passe sur deux lignes. **Quick edit** dans le panneau liste en un seul formulaire tous les mots et toutes les images d'une section.

## L'apparence

Le panneau comporte cinq onglets : **Element**, **Motion**, **Quick edit**, **Site** et **Check**. Sous **Element**, **Look** regroupe **Layout**, **Space inside** et **Space outside**, **Text**, **Fill**, **Stroke** et **Effects**. Une valeur définie à la largeur affichée apparaît normalement ; une valeur héritée d'une largeur plus petite apparaît en grisé, et survoler un champ fait apparaître son bouton d'effacement.

| Vous voulez | À faire |
| --- | --- |
| Un titre plus petit sur téléphone uniquement | Passez sur **Phone**, puis choisissez une **Size** plus petite sous **Text**. Les tablettes et les ordinateurs gardent la leur. |
| Un élément masqué sur mobile | Faites un clic droit dessus et choisissez **Show**, puis **Hide on phone**. |
| Une couleur propre au site | Sous **Fill**, cliquez sur un échantillon. Chacun est rendu comme votre site le rend, et le panneau indique si les mots se lisent bien sur leur fond. |
| Plus d'espace à l'intérieur | Faites glisser une poignée verte sur la page, ou réglez-le sous **Space inside** ; le bouton en forme de cadre ouvre chaque côté. |
| Un changement au survol | Choisissez **On hover** en haut de l'apparence, puis réglez-la. Pointez-la sur la page pour la voir. |
| Un élément qui entre en mouvement | Sous **Motion**, choisissez une **Entrance** comme **Fade**, **Rise** ou **Slide from the left**, sa **Time** et son **Wait**, puis appuyez sur **Play** pour la voir une fois. |

Les couleurs sont les rôles propres à votre site, jamais une couleur isolée, pour que le site reste cohérent. Les classes que le panneau ne règle pas sont conservées telles quelles, listées sous **Kept as written**.

L'onglet **Site** règle ce que lit chaque section : ses **Colours**, son **Type** pour les titres et le texte, les **Text styles**, les **Buttons**, les **Boxes**, et sous **Page** son mode, ses angles, sa largeur et son rythme. Le × à côté d'un réglage le ramène au design propre de votre site.

## Ajouter et organiser

- **Add** propose **Section**, **Text**, **Heading**, **Button**, **Picture**, **Video**, **Icon**, **Divider**, **Form** et **Embed**. Cliquez sur l'un d'eux pour l'ajouter à l'endroit choisi, ou faites-le glisser là où il doit atterrir.
- Un **Embed** affiche une page d'un autre site web. Les cartes et lecteurs de Google, YouTube, Vimeo, Spotify, SoundCloud et Calendly fonctionnent sur tous les sites; tout autre site web doit d'abord être ajouté sous **Settings**, **Preferences**, **Allowed websites**.
- **+ Add section** entre deux sections propose **Designed** (gratuit, les sections avec lesquelles Briks construit, aux couleurs de votre site), **Blank** (gratuit) ou **Generate with AI**, environ 5 crédits : vos mots sont transmis au créateur sous forme de modification.
- **Picture** dans l'onglet **Element** le remplace avec **Replace from your media**, définit son **Alt text** (ou le marque **Decorative, nothing to read aloud**), le recadre et fixe le point qui reste visible à chaque largeur. **Section background…** définit une couleur, un dégradé, une image ou une vidéo derrière une section.
- Les remplacements d'images rejoignent le brouillon et passent en ligne avec vos autres modifications.
- Dans **Layers**, la ligne d'une section de la page d'accueil la monte ou la descend, la copie ou la masque, et les sections masquées sont listées sous **Hidden from this page** pour les réafficher. Sur les autres pages, la ligne d'une section la déplace ou la retire de la page. **Rename** donne à un calque un nom de votre choix, qui ne sert qu'à l'éditeur et n'est jamais publié.

## Pages

**Pages** liste les pages du site. **Add page** démarre une **Blank page** ou une **Copy of a page**, avec son **Title** et son **Address**. Le menu de chaque page contient **Search and share** (son **Search title**, **Search description**, **Hide from search engines** et **Share picture**), **Rename**, **Duplicate**, **Move up**, **Move down**, **Hide from menu** et **Delete**. Supprimer une page demande vers où les liens qui y mènent doivent pointer à la place. Les changements de page attendent dans le brouillon comme tous les autres.

## Travaillez dessus ensemble

- **Un brouillon partagé.** Vos modifications sont enregistrées dans le brouillon du projet un instant après chacune, elles survivent donc à un rechargement, à un onglet fermé ou à un autre appareil, et tous ceux qui ouvrent l'éditeur les voient. La barre indique **Draft saved · not live yet**, avec le moment et l'auteur. Si quelqu'un d'autre a modifié le brouillon depuis votre ouverture, une barre vous demande de **Reload** avant de continuer.
- **Qui d'autre est là.** Les visages des autres personnes ayant l'éditeur ouvert apparaissent dans la barre. Survolez-en un pour voir la page et l'élément où elle se trouve ; son élément choisi est entouré de sa couleur. Rien n'est verrouillé.
- **Commentaires.** Choisissez un élément et appuyez sur C, ou faites un clic droit et choisissez **Comment**. Tapez @ pour nommer quelqu'un. Un commentaire compte jusqu'à 2 000 caractères, est épinglé à l'élément, et propose **Reply**, **Resolve** et **Open again**. Tous les membres de l'espace de travail peuvent commenter, Viewers compris ; seuls les Editors, Admins et Owners peuvent résoudre. La cloche prévient tout le monde, et les personnes que vous nommez sont aussi prévenues dans leurs conversations avec le bot Briks.

Les Viewers peuvent ouvrir l'éditeur pour parcourir le site et commenter. La page indique « You can look through this site here. Your role in this workspace can't change it. »

## Ask AI et le builder

Pour ce que le panneau ne fait pas, comme un nouvel élément ou une autre mise en page, **Ask AI** dans le menu du clic droit, ou **Ask the builder** au bas de l'onglet **Element**, envoie vos mots au créateur à propos de l'élément choisi, comme une modification normale qui consomme des crédits :

- **New design for this section** et **Fix the layout** montrent ce que le travail coûte en général par rapport à votre solde avant l'envoi, par exemple **Design it for about 5 credits**. La modification se construit et se publie comme un message du studio, et **Versions** permet de l'annuler.
- **Ask about this…** répond gratuitement à une question sur l'élément ici, sans rien construire.
- Publiez ou abandonnez d'abord le brouillon : le créateur travaille à partir du site publié, c'est pourquoi l'éditeur vous le demande avant l'envoi.
- **Write alt text** dans **Picture** est gratuit quand une description de l'image est déjà enregistrée, sinon jusqu'à 0.10 crédit. **Use this** la conserve.

L'onglet **Check** examine la page à la largeur où vous êtes : images sans texte alternatif, mots difficiles à lire, titres dans le désordre, ordre de lecture, liens et boutons sans nom. La vérification est gratuite ; une correction marquée **Uses credits** part vers le créateur.

## Publier, ou changer d'avis

- Rien n'est mis en ligne tant que vous ne publiez pas. Un brouillon peut contenir jusqu'à 300 modifications.
- **Publish** écrit les changements dans le code de votre site et le publie comme nouvelle version, généralement en une demi-minute, sans consommer de crédits. Publier vide le brouillon.
- Si un changement ne peut pas être fait, rien n'est publié, et l'éditeur dit lequel et pourquoi.
- **Drop this change** dans **Changes** en supprime une. **Discard draft** dans le menu ⋯ les supprime toutes, pour tous ceux qui modifient le site, et demande confirmation d'abord.
- **History** liste les versions du site. **Preview** en montre une telle qu'elle a été publiée, et **Restore** la remet en ligne ; votre brouillon est conservé. Voir [Versions, annuler et rétablir](https://briks.dev/fr/docs/versions).

## Raccourcis clavier

| Clés | Ce qu'ils font |
| --- | --- |
| Échap | Choisissez ce dans quoi l'élément se trouve, ou remettez le texte saisi. |
| Flèche bas, gauche et droite | Choisissez le premier élément à l'intérieur, ou celui qui est à côté. |
| Entrée ou double-clic | Saisissez les mots de l'élément. |
| ⌘B, ⌘I, ⌘K | Gras, italique ou lien, pendant la saisie. |
| Alt avec la flèche haut ou bas | Déplacez-le, ou déplacez son élément de liste. |
| ⌘D, Backspace | Dupliquez-le ou supprimez-le. |
| ⌘Alt+C, ⌘Alt+V | Copiez son style, ou collez le style. |
| A, C, P | Ajoutez, commentez ou utilisez la page. |
| ? | Afficher tous les raccourcis. |

Sous Windows, Ctrl remplace ⌘.

### L'éditeur visuel utilise-t-il des crédits ?

Les modifications qui y sont faites, et leur publication, n'en utilisent aucun. Seuls les éléments IA en consomment : réécrire des textes (jusqu'à 0,20 crédit), rédiger un texte alternatif qui n'est pas encore enregistré (jusqu'à 0,10 crédit), et tout ce qui est envoyé au créateur, facturé comme une modification.

### Qui peut l'utiliser ?

Tous les membres d'un espace de travail sur un forfait payant. Les Owners, Admins et Editors modifient et publient ; les Viewers consultent et commentent.

### Pourquoi ne puis-je pas saisir certains mots ?

Leurs mots sont calculés dans le code du site, ou se trouvent parmi d'autres éléments. Choisissez chaque partie séparément, ou demandez à l'agent de construction.

### Pouvons-nous modifier à deux en même temps ?

Oui. Vous partagez un même brouillon, vous vous voyez dans la barre, et l'éditeur vous demande de recharger si quelqu'un a modifié le brouillon depuis que vous l'avez ouvert.

## À lire ensuite

- [Travailler sur un projet **Faire des modifications** Modifiez votre site en écrivant à Briks : que dire, ajouter des images, contenu et coût d'un changement, pages internes, demandes en file et corriger un raté.](https://briks.dev/fr/docs/making-changes)
- [Travailler sur un projet **Versions, annuler et rétablir** Chaque création et modification est une version de votre site. Annulez, rétablissez ou republiez une ancienne version à l'identique, sans crédit retenu.](https://briks.dev/fr/docs/versions)
- [Les fonctionnalités de votre site **Médiathèque** Importez vos images et vidéos une fois dans la médiathèque de l'espace de travail, placez-les sur tout projet depuis le prompt, changez des images sans frais.](https://briks.dev/fr/docs/media-library)
- [Premiers pas **Crédits et plans** Comment fonctionnent les crédits Briks : réserves de 50 et 5, travail facturé, estimations et créations en attente, solde à zéro et contenu de chaque plan.](https://briks.dev/fr/docs/credits-and-plans)

Toujours bloqué ?

Écrivez à [hello@briks.dev](mailto:hello@briks.dev) en indiquant le nom de votre projet et ce que vous espériez voir. Une capture d'écran aide.