Éditeur visuel : modifiez votre site sur la page

#Ouvrez-le

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 :

#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

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

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.

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.

#Raccourcis clavier