Edição e estilo

A maior parte da edição acontece selecionando um elemento na área central ou na árvore de elementos e usando a barra lateral direita.

Árvore de elementos

O painel Elementos mostra a estrutura da página atual. Ele permite expandir, recolher, ver o primeiro nível, mostrar avisos de elementos ocultos e salvar filtros por classe ou atributo.

Use o filtro da árvore de elementos para limitar a árvore a elementos que correspondam a uma classe ou atributo. Isso ajuda a encontrar componentes repetidos, atributos de dados específicos ou elementos muito aninhados sem expandir manualmente a página inteira.

Propriedades do elemento

O painel Propriedades do elemento pode editar:

• ID do elemento, que também é usado como destino para links de âncora para esse elemento.
• Classes CSS, classes de animação adicionadas ao entrar na visualização e classes de animação removidas ao entrar na visualização.
• Seção de dados e categoria.
• Atributos de dados.
• Dimensões, display, posição, z-index, gap, overflow e proporção.
• Controles de ajuste de imagem.
• Margem e padding.
• Tipografia.
• Fundo e borda.
• Eventos JavaScript.
• Configurações de link.
• Origem da imagem, texto alt e comportamento de carregamento.
• Configurações de script inline.

Edição de texto

A edição de texto inline inclui uma barra flutuante para negrito, itálico, sublinhado, links, cor do texto, cor de fundo, fonte e tamanho.

Editor CSS

Arquivos CSS abrem no editor CSS, onde os usuários podem editar o código de estilos e pedir ajuda à IA para CSS.

Editor JavaScript

Arquivos JavaScript abrem no editor JS, onde os usuários podem editar código de scripts e pedir ajuda à IA para JavaScript.

Editor de ícones SVG

Ícones SVG podem ser editados em um modal dedicado. Usuários podem ajustar largura, altura, preenchimento, traço, classes, escolher ícones Tabler ou salvar ícones personalizados na biblioteca pessoal.

O modal do editor de ícones SVG permite alterar as cores do ícone, substituir o SVG por outro ícone ou importar um SVG personalizado. Isso é útil para combinar os ícones com o design da página sem editar manualmente o código SVG.

Painel SEO

O painel Configurações da página e SEO edita título da página, meta descrição, palavras-chave, campos Open Graph, comportamento robots, URL canônica e campos SEO específicos por idioma quando i18n está habilitado.