Editor Visual: altere seu site direto na página

#Abrir

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:

#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

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

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.

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.

#Atalhos de teclado