Visual Editor: change your site on the page

#Open it

The Visual Editor tab sits beside Studio in a workspace on a paid plan; on Free the tab doesn't show. The editor fills the window, and the arrow at the top left goes back to the project. Across the top are:

#Choose what to change

• Click anything on the page, or find it in Layers. Open a row's arrow to see what sits inside it; choosing on the page opens the way down to it.
• The trail at the top of the panel names what it sits in. Click a step to choose that instead, or press Escape.
• Shift-click to choose several. A change to the look goes to all of them.
• When the same element repeats, such as the cards of a list, they all light up, and a change to the look changes them all. The words of each are its own.
• Right-click anything, or press Shift+F10, for its menu.

The right-click menu

An item that can't apply stays dimmed and says why. While you type, a small bar offers Bold, Italic, Link and Line break.

#Words and links

Words kept in your site's details, such as its email address or its name, change everywhere they show, and the panel says how many places that is. The editor warns about a dash used as punctuation and offers a comma, and about a button whose words wrap onto two lines. Quick edit in the panel lists every word and picture of one section in a single form.

#The look

The panel has five tabs: Element, Motion, Quick edit, Site and Check. Under Element, Look holds Layout, Space inside and Space outside, Text, Fill, Stroke and Effects. A value set at the width you are looking at shows in full; one carried up from a smaller width shows greyed, and hovering a field shows its clear button.

Colours are your site's own roles, never a colour of their own, so the site stays in step. Classes the panel does not set are kept as they are, listed under Kept as written.

The Site tab sets what every section reads: its Colours, its Type for headlines and text, Text styles, Buttons, Boxes, and under Page its mode, corners, width and rhythm. The × beside a setting returns it to your site's own design.

#Add and arrange

• Add offers Section, Text, Heading, Button, Picture, Video, Icon, Divider, Form and Embed. Click one to add it where you chose, or drag it to where it should land.
• An Embed shows a page from another website. Maps and players from Google, YouTube, Vimeo, Spotify, SoundCloud and Calendly work on every site; any other website must be added first under Settings, Preferences, Allowed websites.
• + Add section between two sections offers Designed (free, the sections Briks builds with, in your site's colours), Blank (free) or Generate with AI, about 5 credits: your words go to the builder as a change.
• Picture in the Element tab replaces it with Replace from your media, sets its Alt text (or marks it Decorative, nothing to read aloud), crops it and sets the point that stays in view at each width. Section background… sets a colour, gradient, picture or video behind a section.
• Picture swaps join the draft and go live with your other changes.
• In Layers, a section's row on the home page moves it up or down, copies it or hides it, and hidden sections are listed under Hidden from this page to show again. On other pages, a section's row moves it or takes it off the page. Rename gives a layer a name of your own, which is only for the editor and never published.

#Pages

Pages lists the site's pages. Add page starts a Blank page or a Copy of a page, with its Title and Address. Each page's menu has Search and share (its Search title, Search description, Hide from search engines and Share picture), Rename, Duplicate, Move up, Move down, Hide from menu and Delete. Deleting a page asks where links to it should lead instead. Page changes wait in the draft like any other.

#Work on it together

• One shared draft. Your changes are saved to the project's draft a moment after you make each one, so they survive a reload, a closed tab or another device, and everyone who opens the editor sees them. The bar says Draft saved · not live yet, with when and by whom. If someone else changed the draft since you opened it, a bar asks you to Reload before you go on.
• Who else is here. The faces of others with the editor open sit in the bar. Hover one to see the page and element they are on; their chosen element is outlined in their colour. Nothing is locked.
• Comments. Choose an element and press C, or right-click and choose Comment. Type @ to name someone. A comment is up to 2,000 characters, is pinned to the element, and has Reply, Resolve and Open again. Everyone in the workspace can comment, Viewers included; only Editors, Admins and Owners can resolve. The bell tells everyone, and people you name also hear it in their chats with the Briks bot.

Viewers can open the editor to look through the site and comment. The page says “You can look through this site here. Your role in this workspace can't change it.”

#Ask AI and the builder

For something the panel does not do, such as a new element or another layout, Ask AI in the right-click menu, or Ask the builder at the foot of the Element tab, sends your words to the builder about the element you chose, as a normal change that uses credits:

• New design for this section and Fix the layout show what the work usually takes against your balance before you send, such as Design it for about 5 credits. The change builds and publishes as a Studio message does, and Versions takes it back.
• Ask about this… answers a question about the element here, free, without building anything.
• Publish or discard the draft first: the builder works from the published site, so the editor asks you to before it sends.
• Write alt text in Picture is free when a description of the picture is already stored, otherwise up to 0.10 credits. Use this keeps it.

The Check tab looks at the page at the width you are on for pictures without alt text, words hard to read, headings out of order, reading order, and links and buttons without a name. Checking is free; a fix marked Uses credits goes to the builder.

#Publish, or change your mind

• Nothing goes live until you publish. A draft holds up to 300 changes.
• Publish writes the changes into your site's code and publishes it as a new version, usually in about half a minute, with no credits used. Publishing empties the draft.
• If a change can't be made, nothing is published, and the editor says which and why.
• Drop this change in Changes removes one. Discard draft in the ⋯ menu drops them all, for everyone editing the site, and asks first.
• History lists the site's versions. Preview shows one as it was published, and Restore puts it back live; your draft is kept. See Versions, undo and redo.

#Keyboard shortcuts