Painel de camadas
O painel de camadas mostra todos os elementos da página atual em uma árvore hierárquica. Clique em Camadas na barra lateral esquerda para abri-lo. É a maneira mais fácil de acessar elementos pequenos, escondidos atrás de outros ou em níveis mais profundos da árvore.
Ao abrir Camadas, a área de edição muda para Editar, pois a árvore é criada a partir da página que você está editando. O painel não está disponível no editor de código.
Como encontrar e selecionar elementos
Cada linha mostra o tipo do elemento ou o nome de um componente. Clique na seta ao lado de uma linha para expandi-la ou recolhê-la.
- Clique em uma linha para selecionar o elemento. A área de edição rola até ele e o painel de edição mostra suas configurações.
- Selecione na área de edição, e a árvore se expande até a linha desse elemento.
- Passe o cursor sobre uma linha para destacar o elemento na área de edição. Ao passar o cursor sobre um elemento na área de edição, a linha correspondente ganha um contorno.
- Clique em um espaço vazio no painel para limpar a seleção.
Você também pode navegar pela árvore com o teclado. Up e Down movem entre as linhas, Right expande uma linha e Left a recolhe, e Enter ou Space seleciona. Atalhos como Delete, ⌘C, ⌘V, ⌘X, ⌘D e ⌘Z (Ctrl no Windows) funcionam no elemento selecionado, e ⌘K / Ctrl+K abre a barra Editar com IA abaixo da linha.
Como reordenar elementos
Arraste uma linha para cima ou para baixo para mudar a ordem do elemento. As linhas se movem entre elementos do mesmo nível, dentro do mesmo elemento pai. A área de edição é atualizada assim que você solta a linha.
Algumas linhas não podem ser arrastadas porque o WebTwizz não consegue encontrá-las no seu código. Ao passar o cursor sobre uma delas, um aviso explica isso.
Menu do botão direito
Clique com o botão direito em uma linha para abrir o mesmo menu disponível na área de edição.
| Item | Atalho | O que faz |
|---|---|---|
| Editar | ⌘E | Seleciona o elemento e abre o painel de edição |
| Copiar, Colar, Recortar | ⌘C, ⌘V, ⌘X | Copiam, colam e recortam elementos |
| Duplicar | ⌘D | Cria uma cópia do elemento |
| Excluir | ⌫ | Remove o elemento |
| Copiar estilo, Colar estilo | ⌘⌥C, ⌘⌥V | Copiam o estilo de um elemento e o colam em outro |
| Converter em componente | ⌘⇧K | Transforma o elemento em um componente reutilizável |
| Editar com IA | ⌘K | Abre a barra Editar com IA para o elemento |
No Windows, use Ctrl no lugar de ⌘ e Alt no lugar de ⌥.
Enquanto a IA trabalha
Enquanto a IA edita seu site, você não pode arrastar linhas e todos os itens do menu do botão direito ficam desativados. Tudo é liberado quando a IA termina.