---
title: "Editor Visual: altere seu site direto na página | Briks"
url: https://briks.dev/pt-br/docs/visual-editor
description: "Clique em qualquer item da sua página para mudar textos, links, imagens, visual, seções e páginas, trabalhe em equipe e publique sem gastar créditos."
last_updated: 2026-10-08
---

# Editor Visual: altere seu site direto na página

O Visual Editor abre a própria página do seu site ao lado de um painel, como funciona uma ferramenta de design. Clique em qualquer coisa para mudar o texto, o destino, a imagem ou o visual para celulares, tablets e desktops; adicione, mova, copie ou oculte elementos, seções e páginas; e defina as cores e as fontes do site inteiro. Suas alterações ficam em um rascunho compartilhado pela sua equipe e entram no ar quando você publica, sem usar créditos. Vem com os planos pagos.

10 min de leitura Conferido com o estúdio em 8 de outubro de 2026

## Abrir

Onde

1. Projects
2. Your project
3. Visual Editor

A aba **Visual Editor** fica ao lado de **Studio** em um espaço de trabalho com plano pago; no Free, a aba não aparece. O editor ocupa a janela inteira, e a seta no canto superior esquerdo volta ao projeto. No topo estão:

| Na barra | O que ele faz |
| --- | --- |
| **Open layers** | Abre e fecha **Layers**, a página seção por seção. |
| **Pages** | Escolhe a página em que trabalhar e adiciona, renomeia, move e exclui páginas. |
| **Add** | Adiciona um elemento ou uma seção. A tecla A faz o mesmo. |
| Setas de desfazer e refazer | Volte e avance pelas suas alterações. ⌘Z e ⇧⌘Z fazem o mesmo. |
| **Changes** | Lista cada mudança aguardando publicação, cada uma com **Drop this change**. |
| **Comments** | Comentários fixados em elementos da página. |
| **History** | As versões do site, para ver uma delas ou restaurá-la. |
| **Publish** | Mostra **Publish 3 changes**, por exemplo. Coloca o rascunho no ar. |
| **Desktop**, **Tablet**, **Phone** | A largura em que você vê a página: 1440, 834 ou 390 pixels. |
| **Use the page** | Deixa os cliques chegarem ao site, para abrir o menu ou um pop-up e escolher dentro dele. Pressione P para voltar a editar. |
| O menu ⋯ | **Keyboard shortcuts** e **Discard draft**. |
| **Open the page** | Abre a página publicada em uma nova aba. |

Bom saber

Um site publicado antes do Visual Editor existir precisa de uma publicação para que o editor consiga lê-lo. Se a página disser “This page has not answered the editor. Publish the site once, then open the editor again.”, publique uma vez pelo estúdio e abra o editor de novo.

## Escolha o que mudar

- Clique em qualquer elemento da página ou encontre-o em **Layers**. Abra a seta de uma linha para ver o que há dentro dela; ao escolher na página, o caminho até o elemento se abre.
- O caminho no topo do painel diz onde o elemento está. Clique em uma etapa para escolher essa, ou pressione Escape.
- Clique com Shift para escolher vários. Uma mudança no visual vale para todos eles.
- Quando o mesmo elemento se repete, como os cartões de uma lista, todos se acendem, e uma mudança no visual altera todos eles. O texto de cada um é só dele.
- Clique com o botão direito em qualquer item, ou pressione Shift+F10, para abrir o menu dele.

### O menu do botão direito

| Item | O que ele faz |
| --- | --- |
| **Edit text** | Digite sobre as palavras da página. |
| **Rewrite with AI** | **Rewrite**, **Shorter**, **Longer**, **Friendlier tone**, **More formal tone** ou **Bolder tone**, cada um por até 0.20 créditos. Veja as novas palavras e depois **Keep**, **Try again** ou **Discard**. |
| **Replace picture** ou **Replace video** | Escolha outra na sua biblioteca de mídia. |
| **Alt text…**, **Link…**, **Style…** | Abra essa parte do painel. |
| **Ask AI** | **New design for this section**, **Fix the layout** ou **Ask about this…**. Veja Pergunte à IA e o criador. |
| **Move up**, **Move down**, **Move out of its container**, **Move into the next container** | Mova entre os elementos ao lado, para fora de uma caixa ou para dentro dela. |
| **Select parent**, **Select section** | Escolha onde ele fica, ou a seção inteira. |
| **Lock** | Evita que seja escolhido na página por acidente. O mesmo item o libera de novo. |
| **Duplicate**, **Copy style**, **Paste style** | Copie-o ou leve o visual dele para outro elemento. |
| **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** e **Section background…**. |
| **Comment**, **Check the page…** | Fixe um comentário nela ou verifique se a página tem problemas. |
| **Delete** | Remove o item. Em uma seção inteira, aparece **Remove from page**. |

Um item que não pode ser aplicado fica esmaecido e diz o motivo. Enquanto você digita, uma barra pequena oferece **Bold**, **Italic**, **Link** e **Line break**.

## Textos e links

1. Dê dois cliques nas palavras

   Onde: Page

   Digite sobre eles na página. Enter os mantém; Escape os restaura. Ou digite em **Content** no painel.

2. Mude para onde ele leva

   Onde: Link

   Um link ou botão leva a uma **Page** do site, uma **Section**, um **Web address**, um **Email**, um número de **Phone** ou um **File**, e pode **Open in a new tab**.

3. Confira em cada largura

   Onde: Bar

   Alterne entre **Desktop**, **Tablet** e **Phone** para ver como as palavras quebram.

Palavras guardadas nos dados do seu site, como o endereço de email ou o nome, mudam em todos os lugares onde aparecem, e o painel informa quantos lugares são. O editor avisa sobre travessão usado como pontuação e sugere uma vírgula, e sobre um botão cujo texto quebra em duas linhas. **Quick edit** no painel lista todas as palavras e imagens de uma seção em um único formulário.

## O visual

O painel tem cinco abas: **Element**, **Motion**, **Quick edit**, **Site** e **Check**. Em **Element**, **Look** reúne **Layout**, **Space inside** e **Space outside**, **Text**, **Fill**, **Stroke** e **Effects**. Um valor definido na largura que você está vendo aparece normal; um valor herdado de uma largura menor aparece em cinza, e ao passar o mouse sobre um campo aparece o botão de limpar.

| Você quer | Faça isto |
| --- | --- |
| Um título menor só nos celulares | Mude para **Phone** e escolha um **Size** menor em **Text**. Tablets e desktops mantêm o deles. |
| Algo escondido nos celulares | Clique com o botão direito nele e escolha **Show**, depois **Hide on phone**. |
| Uma cor do próprio site | Em **Fill**, clique em uma amostra. Cada uma é pintada como o seu site a pinta, e o painel diz o quanto o texto fica legível sobre aquele fundo. |
| Mais espaço interno | Arraste uma alça verde na página ou ajuste em **Space inside**; o botão de moldura ali abre cada lado. |
| Uma mudança ao passar o mouse | Escolha **On hover** no topo do visual e depois ajuste. Aponte para ele na página para ver. |
| Algo que entra em movimento | Em **Motion**, escolha uma **Entrance** como **Fade**, **Rise** ou **Slide from the left**, defina **Time** e **Wait**, e aperte **Play** para ver uma vez. |

As cores são os papéis de cor do seu próprio site, nunca uma cor avulsa, assim o site se mantém coerente. As classes que o painel não define são mantidas como estão, listadas em **Kept as written**.

A aba **Site** define o que cada seção lê: suas **Colours**, seu **Type** para títulos e textos, **Text styles**, **Buttons**, **Boxes** e, em **Page**, o modo, os cantos, a largura e o ritmo. O × ao lado de uma configuração volta ao design do seu próprio site.

## Adicionar e organizar

- **Add** oferece **Section**, **Text**, **Heading**, **Button**, **Picture**, **Video**, **Icon**, **Divider**, **Form** e **Embed**. Clique em um para adicioná-lo onde você escolheu, ou arraste-o até onde ele deve ficar.
- Um **Embed** mostra uma página de outro site. Mapas e players do Google, YouTube, Vimeo, Spotify, SoundCloud e Calendly funcionam em todos os sites; qualquer outro site precisa ser adicionado antes em **Settings**, **Preferences**, **Allowed websites**.
- **+ Add section** entre duas seções oferece **Designed** (grátis, as seções com que o Briks constrói, nas cores do seu site), **Blank** (grátis) ou **Generate with AI**, cerca de 5 créditos: suas palavras vão para o construtor como uma alteração.
- **Picture** na aba **Element** a substitui com **Replace from your media**, define o **Alt text** (ou marca como **Decorative, nothing to read aloud**), recorta e define o ponto que fica à vista em cada largura. **Section background…** define uma cor, um gradiente, uma imagem ou um vídeo atrás de uma seção.
- As trocas de imagem entram no rascunho e vão ao ar junto com as outras alterações.
- Em **Layers**, a linha de uma seção na página inicial a move para cima ou para baixo, a copia ou a oculta, e as seções ocultas ficam listadas em **Hidden from this page** para serem exibidas de novo. Nas outras páginas, a linha de uma seção a move ou a retira da página. **Rename** dá a uma camada um nome seu, que serve só para o editor e nunca é publicado.

## Páginas

**Pages** lista as páginas do site. **Add page** começa uma **Blank page** ou uma **Copy of a page**, com seu **Title** e seu **Address**. O menu de cada página tem **Search and share** (seu **Search title**, **Search description**, **Hide from search engines** e **Share picture**), **Rename**, **Duplicate**, **Move up**, **Move down**, **Hide from menu** e **Delete**. Ao excluir uma página, o estúdio pergunta para onde os links que levavam a ela devem apontar. As mudanças nas páginas esperam no rascunho como qualquer outra.

## Trabalhem nisso juntos

- **Um rascunho compartilhado.** Suas alterações são salvas no rascunho do projeto logo depois de cada uma, então sobrevivem a um recarregamento, a uma aba fechada ou a outro dispositivo, e todos que abrirem o editor as veem. A barra diz **Draft saved · not live yet**, com quando e por quem. Se outra pessoa alterou o rascunho desde que você o abriu, uma barra pede que você use **Reload** antes de continuar.
- **Quem mais está aqui.** Os rostos de outras pessoas com o editor aberto ficam na barra. Passe o mouse sobre um para ver a página e o elemento em que a pessoa está; o elemento escolhido por ela fica contornado na cor dela. Nada é bloqueado.
- **Comentários.** Escolha um elemento e pressione C, ou clique com o botão direito e escolha **Comment**. Digite @ para citar alguém. Um comentário tem até 2.000 caracteres, fica fixado no elemento e tem **Reply**, **Resolve** e **Open again**. Todos no espaço de trabalho podem comentar, inclusive Viewers; só Editors, Admins e Owners podem resolver. O sino avisa todo mundo, e as pessoas que você cita também recebem o aviso nas conversas delas com o bot do Briks.

Viewers podem abrir o editor para navegar pelo site e comentar. A página diz “You can look through this site here. Your role in this workspace can't change it.”

## Ask AI e o builder

Para algo que o painel não faz, como um elemento novo ou outro layout, **Ask AI** no menu do botão direito, ou **Ask the builder** no pé da aba **Element**, envia suas palavras ao construtor sobre o elemento escolhido, como uma alteração normal que usa créditos:

- **New design for this section** e **Fix the layout** mostram, antes de você enviar, quanto o trabalho costuma custar em relação ao seu saldo, como **Design it for about 5 credits**. A mudança é criada e publicada como uma mensagem do Studio, e **Versions** desfaz.
- **Ask about this…** responde a uma pergunta sobre o elemento aqui, de graça, sem construir nada.
- Publique ou descarte o rascunho primeiro: o criador trabalha a partir do site publicado, por isso o editor pede isso antes de enviar.
- **Write alt text** em **Picture** é grátis quando já existe uma descrição da imagem guardada; caso contrário, custa até 0.10 créditos. **Use this** a mantém.

A aba **Check** analisa a página na largura em que você está e procura imagens sem texto alternativo, palavras difíceis de ler, títulos fora de ordem, ordem de leitura e links e botões sem nome. A verificação é gratuita; uma correção marcada com **Uses credits** vai para o construtor.

## Publique, ou mude de ideia

- Nada vai ao ar até você publicar. Um rascunho comporta até 300 alterações.
- **Publish** grava as mudanças no código do seu site e o publica como uma nova versão, em geral em cerca de meio minuto, sem usar créditos. Publicar esvazia o rascunho.
- Se uma alteração não puder ser feita, nada é publicado, e o editor diz qual e por quê.
- **Drop this change** em **Changes** remove uma. **Discard draft** no menu ⋯ descarta todas, para todos que editam o site, e pergunta antes.
- **History** lista as versões do site. **Preview** mostra uma como foi publicada, e **Restore** a coloca de volta no ar; seu rascunho é mantido. Veja [Versões, desfazer e refazer](https://briks.dev/pt-br/docs/versions).

## Atalhos de teclado

| Chaves | O que eles fazem |
| --- | --- |
| Esc | Escolha onde o elemento fica, ou recoloque as palavras digitadas. |
| Seta para baixo, esquerda e direita | Escolha o primeiro elemento dentro dele, ou o que está ao lado. |
| Enter ou clique duplo | Digite as palavras do elemento. |
| ⌘B, ⌘I, ⌘K | Negrito, itálico ou link, enquanto você digita. |
| Alt com a seta para cima ou para baixo | Mova-o, ou mova o item da lista dele. |
| ⌘D, Backspace | Duplique ou exclua. |
| ⌘Alt+C, ⌘Alt+V | Copie o estilo dele ou cole um estilo. |
| A, C, P | Adicione, comente ou use a página. |
| ? | Mostrar todos os atalhos. |

No Windows, Ctrl faz o papel do ⌘.

### O Editor Visual usa créditos?

As alterações feitas nele, e a publicação delas, não usam nenhum. Só os itens de IA usam: reescrever textos (até 0,20 crédito), escrever texto alternativo que ainda não está salvo (até 0,10 crédito) e tudo o que for enviado ao criador, que é cobrado como uma alteração.

### Quem pode usar?

Todos em um espaço de trabalho em um plano pago. Owners, Admins e Editors alteram e publicam; Viewers olham e comentam.

### Por que não consigo digitar algumas palavras?

Essas palavras são calculadas no código do site ou ficam entre outros elementos. Escolha cada parte separadamente ou peça ao construtor.

### Duas pessoas podem editar ao mesmo tempo?

Sim. Vocês compartilham um rascunho, se veem na barra, e o editor pede que você recarregue se alguém alterou o rascunho depois que você o abriu.

## Leia a seguir

- [Trabalhando em um projeto **Como fazer alterações no site** Como mudar seu site escrevendo ao Briks: o que dizer, imagens, o que uma mudança inclui e custa, páginas internas, pedidos na fila e como corrigir um erro.](https://briks.dev/pt-br/docs/making-changes)
- [Trabalhando em um projeto **Versões, desfazer e refazer** Cada build e alteração é salva como versão do seu site. Desfaça, refaça ou recoloque no ar qualquer versão anterior, exatamente como era, sem reter créditos.](https://briks.dev/pt-br/docs/versions)
- [Os recursos do seu site **Biblioteca de mídia** Envie suas imagens e vídeos uma vez à biblioteca de mídia do espaço de trabalho, use-os em todo projeto pela caixa de prompt e troque imagens do site de graça.](https://briks.dev/pt-br/docs/media-library)
- [Primeiros passos **Créditos e planos** Créditos da Briks: reservas de 50 e 5, cobrança pelo trabalho feito, estimativas, builds em espera, o que acontece no zero e o que cada plano inclui.](https://briks.dev/pt-br/docs/credits-and-plans)

Ainda travado?

Escreva para [hello@briks.dev](mailto:hello@briks.dev) com o nome do seu projeto e o que você esperava ver. Uma captura de tela ajuda.