Painel de edição

O painel de edição fica no lado direito do editor e mostra os controles do que você selecionou. Quando nada está selecionado, ele permite ajustar o estilo da própria página.

Pressione ⌘E / Ctrl+E para mostrar ou ocultar o painel. Quando ele estiver oculto, clique na seta na borda direita da janela para exibi-lo novamente. O painel não aparece enquanto Configurações, Dados ou o editor de código estiver aberto.

Cada alteração que você faz aqui vai direto para o código do seu site, e a área de edição é atualizada na hora.

Painel flutuante

Arraste a alça pontilhada na parte superior do painel (Arraste para desacoplar) para deixá-lo flutuando sobre a área de edição. Depois, mova-o para onde for mais prático. Arraste a borda inferior para aumentar ou diminuir a altura.

Para fixá-lo novamente, arraste-o até a borda direita da janela. Uma faixa destacada mostra onde ele ficará (Solte na borda direita para fixar). O editor lembra se o painel está flutuante e onde você o deixou.

Estilos da página

Quando nada está selecionado, o painel mostra os estilos da página inteira: Fundo, Tipografia, Espaçamento, Efeitos, Transições e Avançado. O espaçamento define o espaçamento interno da página.

Os valores correspondem ao que você vê, mesmo quando a cor da página vem dos estilos globais do site, e não da própria página.

Aba Estilo

Selecione um elemento na área de edição ou no painel de camadas, e o painel mostrará duas abas: Estilo e Propriedades. O painel lembra qual aba você usou por último.

A linha de botões na parte superior fixa um elemento com posição absoluta, fixa ou aderente à esquerda, ao centro ou à direita e no topo, no meio ou na base. Para outros elementos, esses botões ficam desativados. Abaixo deles, há seções que você pode abrir e fechar. O painel lembra quais você mantém abertas.

Se você selecionar vários elementos, as alterações de estilo serão aplicadas a todos eles.

Layout

Escolha uma opção de Exibição: bloco, flex, grade ou nenhum. As opções abaixo mudam conforme a escolha:

• Bloquear: Transbordamento e Flutuação (com Limpar ao flutuar).
• Flex: Direção, Justificar, Alinhar, Quebrar linha e Espaçamento.
• Grade: Colunas, Linhas e Espaçamento.

Posição define o posicionamento como estático, relativo, absoluto, fixo ou aderente. Absoluto e fixo adicionam um campo para cada lado: superior, direito, inferior e esquerdo.

Tamanho

Use Dimensões para alternar entre largura e altura. Defina Largura, Largura mínima e Largura máxima (ou as versões de altura) usando opções predefinidas como Automático, Total, Tela e frações, ou digite seu próprio valor. Transbordamento controla o que acontece quando o conteúdo não cabe.

Espaçamento

Alterne entre Espaçamento interno (espaço dentro do elemento) e Margem (espaço fora dele). Depois, defina cada lado na caixa.

Tipografia

Família, Tamanho, Peso, Altura (altura da linha), Espaçamento (espaçamento entre letras), Cor, Alinhar, Estilo (itálico), Transformar (maiúsculas, minúsculas, iniciais maiúsculas) e Decoração (sublinhado, tachado).

Fundo, borda e mais

• Fundo: escolha Cor ou Imagem como tipo. O seletor de cores permite usar cores sólidas e gradientes. Uma imagem tem configurações de Posição, Tamanho, Repetir e Anexar.
• Borda: Cor, Largura, Raio (todos os cantos ou cada canto), Estilo (sólido, tracejado, pontilhado) e Contorno, para todos os lados ou apenas um.
• Efeitos: Opacidade, Sombra e sua cor, Desfoque, Brilho, Contraste, Saturação, Matiz e um Filtrar (escala de cinza, sépia, inversão).
• Transições: Propriedade, Duração, Tempo e Atraso, para que mudanças como efeitos ao passar o mouse tenham uma animação suave.
• Cursor: o formato do ponteiro sobre o elemento.
• Avançado: outras classes de estilo do elemento. Digite uma classe e pressione Enter para adicioná-la, ou remova uma da lista.

Aba Propriedades

A aba Propriedades contém o conteúdo e as configurações do elemento. Todo elemento tem Geral e Acessibilidade, seguidos de seções para seu tipo.

• Geral: a tag do Elemento (por exemplo, trocar um h2 por um h3), ID, Dica e Atributos de dados. Clique em Adicionar atributo para adicionar um.
• Acessibilidade: Rótulo, Descrito por, Função, Índice de tabulação e Visibilidade para leitores de tela.

As seções para elementos específicos incluem:

Seção	O que você pode definir
Texto	O próprio texto, além de fonte, tamanho, peso, alinhamento, altura da linha, espaçamento entre letras e cor. Melhorar com IA reescreve o texto para você.
Botão	Rótulo, Tipo (Botão, Enviar, Redefinir), Desativado, Nome, Valor
Link	URL, Abrir em (Mesma aba, Nova aba), Relação, Baixar
Imagem	Origem, Texto alternativo (deixe vazio para uma imagem decorativa), Carregando
Campo de entrada	Tipo, Nome, Texto de exemplo, Valor, limites como Mín, Máx, Comprimento máximo e Padrão, além de Obrigatório, Desativado, Somente leitura
SVG	Ícone, Largura, Altura, Preenchimento, Traço, Espessura do traço

Áreas de texto, seletores, formulários, listas, tabelas, vídeos, áudio e imagens de fundo também têm suas próprias seções, assim como as incorporações de YouTube, Vimeo, Google Maps, Calendly, Typeform, Stripe e PayPal.

Texto que vem do código

Alguns textos de uma página não são digitados diretamente nela. Eles vêm de uma lista, de uma prop ou de um arquivo de dados, como o título de um cartão em uma sequência de cartões. A seção Texto informa quando isso acontece:

• Este texto vem de dados ou de uma prop. Ao salvar, ele é atualizado na origem. Digite normalmente. Apenas o valor desse item muda, no local onde ele está definido.
• Compartilhado por todos os itens desta lista. O texto entre {chaves} é código. Uma alteração aqui muda todos os itens. Deixe as partes entre chaves como estão.
• Definido por código, seguido do código. O texto é gerado pelo código, então o campo é somente leitura. Peça à IA para alterá-lo.
• Contém elementos aninhados. Selecione-os para editar separadamente. Clique no elemento interno na área de edição para editar seu texto.

Copiar e colar estilos

Copie o estilo de um elemento e aplique-o a outro:

1. Selecione o elemento desejado e pressione ⌘⌥C / Ctrl+Alt+C.
2. Selecione o elemento que deseja alterar e pressione ⌘⌥V / Ctrl+Alt+V.

Copiar estilo e Colar estilo também estão no menu do botão direito.

Enquanto a IA trabalha

O painel mostra A IA está editando e desativa os controles enquanto a IA altera seu site. Os controles são liberados assim que a IA termina.