Visão geral do editor

O editor é onde você cria e monta seu site. Seu site funciona em tempo real na área de edição, no centro. Os painéis à esquerda permitem adicionar elementos, gerenciar páginas e conversar com a IA. O painel de edição à direita ajusta o estilo do que você selecionar.

A barra de ferramentas

Da esquerda para a direita:

• Logo do WebTwizz abre o menu do logo: Ir para o painel, Arquivo, Editar, Histórico de versões, Configurações do site, Preferências (tema claro, escuro ou do sistema), Ajuda (documentação e atalhos de teclado) e Configurações da conta.
• Navegar e Editar alternam o comportamento da área de edição. Veja Navegar e Editar abaixo.
• Alternador de código (o botão <>) abre o editor de código. Clique nele novamente para voltar à área de edição.
• Menu de largura (o ícone de dispositivo) define a largura da área de edição. Veja Design responsivo.
• Barra de caminho mostra a página em que você está, como / ou /about. Clique nela e digite para ir para outra página. O botão de atualizar dentro dela recarrega a área de edição.
• Desfazer e Refazer.
• Pré-visualização (ícone de olho) abre seu site em uma nova aba do navegador. Veja Pré-visualização e publicação.
• Salvar mostra se seu trabalho está salvo. Quando tudo está salvo, mostra uma marca de verificação. Clicar nela abre o histórico de versões. Veja Como salvar seu trabalho.
• Fazer upgrade aparece no plano Free.
• Publicar abre o painel de publicação.

Enquanto Configurações ou Dados estiver aberto, a barra de caminho fica oculta e o lado direito da barra de ferramentas mostra apenas Pré-visualização, Fazer upgrade e Publicar.

A barra lateral esquerda

Cada ícone na faixa à esquerda abre um painel:

• Elementos adiciona elementos, layouts e componentes. Veja Painel de elementos.
• Assistente de IA abre o chat com a IA.
• Camadas mostra todos os elementos da página em uma estrutura de árvore. Veja Painel de camadas.
• Páginas adiciona, renomeia e organiza páginas. Veja Painel de páginas.
• Dados gerencia suas coleções e fontes de dados. Veja Dados e CMS.
• Configurações abre as configurações do site.

Clique novamente no ícone do painel aberto para recolher a barra lateral ou pressione ⌘B / Ctrl+B.

A área de edição

A área de edição é seu site real funcionando em tempo real. As alterações aparecem assim que você as faz.

Navegar e Editar

Use os botões Navegar e Editar na barra de ferramentas para alternar entre os modos.

• Navegar permite usar o site como um visitante. Os links levam a outras páginas, os botões e menus funcionam, e os formulários são enviados. Nenhum elemento é selecionado.
• Editar permite alterar a página. Passe o cursor para destacar um elemento, clique para selecioná-lo, clique duas vezes no texto para digitar, clique com o botão direito para abrir o menu de contexto e arraste para mover os itens.

O editor lembra o último modo que você usou. Na primeira vez que você o abre, ele inicia no modo Navegar. Abrir o painel Camadas muda para o modo Editar. Os botões ficam indisponíveis enquanto a IA está trabalhando, no editor de código e no histórico de versões.

O painel de edição

Quando você seleciona um elemento, o painel de edição à direita mostra seus estilos e configurações. Pressione ⌘E / Ctrl+E para mostrar ou ocultar o painel, ou clique na seta na borda direita. Veja Painel de edição.

Edições rápidas com Editar com IA

Selecione um elemento e pressione ⌘K / Ctrl+K para abrir a barra Editar com IA abaixo dele. Digite uma alteração, como "maior" ou "texto azul-marinho", e veja o resultado na página antes de escolher. Veja Editar com IA.

No celular

Em uma tela menor que a de um tablet, o editor é voltado para conversar com a IA e conferir o resultado:

• As abas Chat e Pré-visualização na parte superior alternam entre o chat com a IA e seu site. Toque em Pré-visualização novamente para recarregá-la.
• A área de edição funciona como o modo Navegar. A seleção de elementos, o painel de edição e o editor de código precisam de uma tela maior.
• O botão de salvar fica ao lado do logo. Seu trabalho também é salvo automaticamente cerca de 30 segundos depois que você para de editar.
• O menu do logo tem um menu Pré-visualização para abrir a pré-visualização em uma nova aba, recarregá-la ou reiniciar o servidor de pré-visualização. As configurações ficam em Configurações do site, e Voltar ao editor leva você de volta ao seu site.

Atalhos essenciais

Ação	Mac	Windows
Desfazer	⌘Z	Ctrl+Z
Refazer	⌘⇧Z	Ctrl+Shift+Z
Salvar	⌘S	Ctrl+S
Editar com IA (elemento selecionado)	⌘K	Ctrl+K
Excluir elemento	⌫	Backspace ou Delete
Desmarcar seleção	Esc	Esc
Mostrar ou ocultar o painel de edição	⌘E	Ctrl+E
Mostrar ou ocultar a barra lateral	⌘B	Ctrl+B
Histórico de versões	⌘H	Ctrl+H

Veja a lista completa em Menu de contexto e atalhos.