Estilize, copie e redimensione elementos à mão
Defina cores, tamanho do texto, espaçamento, bordas, largura e sombra você mesmo, copie e mova elementos e arraste para ajustar o tamanho — na hora, sem IA e sem créditos.
Você vai precisar: Um site já gerado pelo AI Builder, aberto no editor no idioma principal.
Quando você sabe exatamente o que quer — este espaçamento, aquela cor, o mesmo cartão de novo — pode fazer você mesmo em vez de descrever para a IA. Tudo aqui é instantâneo, gratuito e pode ser desfeito.
Essas ferramentas ficam na linha no pé do painel que abre quando você clica em um elemento. Veja Edite seu site clicando nele para o resto desse painel.
#Mude a aparência no painel Estilo
- Clique no elemento na pré-visualização.
- Escolha 🎨 Estilo. O painel Estilo abre ao lado da página.
- Mude o que quiser. A pré-visualização se atualiza enquanto você mexe, mas nada é salvo ainda.
- Escolha Aplicar para manter as mudanças ou Desfazer para descartá-las.
12- Todas as telas ou Só neste dispositivo
- Cores
O painel é dividido em seções que você abre e fecha:
| Seção | O que você define |
|---|---|
| Cores | Cor do Texto, do Fundo e da Borda |
| Texto | Tamanho em pixels, Peso de Leve a Black e Alinhamento — Esquerda, Centro, Direita ou Justificado |
| Espaçamento | Preenchimento (dentro) e Margem (fora) em pixels, para cada lado |
| Borda | Espessura, Estilo (Sólida, Tracejada, Pontilhada ou Nenhuma) e Arredondamento |
| Tamanho e sombra | Largura, Largura máx. e Sombra de Pequena a Extra grande |
Um ✕ ao lado de um valor faz ele Voltar ao padrão.
#Cores
Cada cor oferece amostras da paleta do próprio site, além de Cor personalizada para qualquer outra.
#Espaçamento
O botão 🔗 mantém o Mesmo valor nos quatro lados. Desligue-o para definir Em cima, Direita, Embaixo e Esquerda separadamente.
#Largura
Largura e Largura máx. aceitam pixels (320), porcentagem (50%) ou
full / auto. Porcentagens encolhem com a tela; pixels não. Então use
porcentagem para tudo o que precisa caber em um celular.
#Todas as telas ou só esta
No topo do painel:
- Todas as telas — a mudança vale em computadores, tablets e celulares.
- Só neste dispositivo — a mudança vale só na largura de pré-visualização que você está usando, indicada ao lado do botão (por exemplo, Só neste dispositivo · celulares). Mude a pré-visualização para 📱 antes, para corrigir algo que só fica errado no celular. O layout de desktop continua como estava.
#Bom saber
- Um Aplicar é um passo em ↶ Desfazer, não importa quantos valores você mudou.
- Se você clicar em outro elemento com mudanças ainda não aplicadas, o Tayon pergunta se você quer Descartar essas mudanças.
- Se algum valor não puder ser usado, nada é aplicado: Um desses valores não pôde ser usado. Confira os campos e tente de novo.
- O painel Estilo só aparece no idioma principal do site. O design é o mesmo em todos os idiomas, então uma tradução não pode ter estilo próprio.
#Copiar, recortar e colar
Esses botões aparecem em inglês no editor, inclusive com a interface em português.
| Botão | O que faz |
|---|---|
| 📋 Copy (copiar) | Copia o elemento |
| ✂ Cut (recortar) | Pega o elemento para movê-lo |
| ⧉ Duplicate (duplicar) | Adiciona uma cópia idêntica logo depois dele |
| 📥 Colar | Aparece quando há algo copiado. Clique onde ele deve ir e cole |
| ✨ Match style (igualar estilo) | Dá ao elemento selecionado a formatação do elemento copiado, mantendo as palavras dele |
#Colar em outro lugar
- Selecione um elemento e escolha 📋 Copy ou ✂ Cut. Uma etiqueta no topo da linha de ferramentas mostra Copiado: ou Movendo: e o que ela guarda.
- Clique no elemento ao lado do qual, ou dentro do qual, você quer colar.
- Escolha 📥 Colar dentro ou 📥 Colar depois — o que fizer sentido para o que você clicou — ou abra ▾ para Colar dentro deste, Colar depois deste, Colar antes deste e Substituir este.
Para colocar algo no fim de uma seção, clique no fundo da seção e escolha 📥 no painel Edit section (editar seção). O × na etiqueta limpa a área de transferência.
Copiar e colar funcionam entre seções e páginas do mesmo site, mas não entre dois sites diferentes.
#Deixe um cartão igual aos outros
Quando a IA reescreve algo, ela vê só o elemento que você clicou, nunca os vizinhos. Por isso um cartão retrabalhado pela IA pode não ficar exatamente igual aos cartões ao lado. Para ter certeza:
- Precisa de mais um cartão? Selecione um que esteja certo, escolha ⧉ Duplicate e depois mude as palavras.
- Um cartão ficou diferente? Use 📋 Copy em um cartão que esteja certo, selecione o diferente e escolha ✨ Match style. As palavras dele ficam; a formatação passa a ser a do cartão copiado.
#Redimensionar arrastando
Selecione uma caixa ou uma imagem e aparecem alças nas bordas. Arraste uma.
- Itens em uma grade se encaixam nas colunas da grade — 2 de 3 colunas.
- Imagens e caixas avulsas se encaixam em medidas como um quarto, um terço, metade ou largura total.
- Um selo mostra o tamanho e em quais tamanhos de tela ele vale.
O encaixe é proposital: uma largura fixa em pixels que fica boa no seu monitor estoura no primeiro celular que abrir a página. O elemento continua selecionado quando você solta, então dá para arrastar de novo.
Texto simples não tem alças — para aumentar o texto, use Tamanho no painel Estilo.
#Se uma mudança não aparece
- O botão Estilo sumiu — você está editando uma tradução. Volte o menu de idioma da barra de ferramentas para o idioma principal.
- A mudança aparece no desktop mas não no celular (ou o contrário) — você aplicou com Só neste dispositivo. Aplique de novo com Todas as telas.
- O site no ar não mudou — aperte Republicar. As mudanças do editor só chegam às páginas publicadas quando você faz isso.
Atualizado: