Editor do Wix Harmony: design de elementos
5 min
Neste artigo
- Selecionar cores
- Fazer o design de partes de elementos
- Glossário de design
Este artigo se refere ao novo Editor do Wix Harmony, lançado em janeiro de 2026. Se você não tem certeza se está usando o Editor do Wix Harmony ou o Editor Wix, veja mais informações aqui.
O painel Design permite que você dê vida à sua visão criativa, um detalhe de cada vez. Se você quer atualizar cores, personalizar partes de um elemento ou definir estilos exclusivos para diferentes estados, você tem a flexibilidade de moldar cada parte da aparência do seu site.
Como cada elemento tem suas próprias opções de estilo, você vê configurações diferentes dependendo do que edita.
Como faço para começar?
Clique em um elemento e, em seguida, clique no ícone Todas as opções de design
na barra de ação.
na barra de ação.Selecionar cores
Sempre que você clica em um círculo de cor para escolher uma cor, você acessa o seletor de cores. É aqui que você vê as cores da marca do seu site, além de qualquer cor personalizada que esteja usando. Existem 3 maneiras de escolher uma nova cor:
- Mova os pontos no esquema de cores para encontrar sua cor
- Insira o código da cor (por exemplo: #000000 para preto)
- Clique no ícone Conta-gotas
para escolher uma cor de um elemento na página

Fazer o design de partes de elementos
Alguns elementos no editor oferecem opções de design detalhadas, o que permite que você estilize partes individuais separadamente. Por exemplo, ao trabalhar com botões, você pode optar por personalizar o próprio botão, seu ícone ou o texto. Assim, você ajusta cada detalhe e faz com que ele se adapte ao seu estilo único. Use o dropdown para selecionar qual parte você quer personalizar.

Glossário de design
Confira a tabela abaixo para saber mais sobre cada configuração de design, o que ela significa e como ela melhora o seu design.
Configuração | O que é? |
|---|---|
Cores de background / preenchimento ![]() | Adicione uma cor de preenchimento para complementar o conteúdo do seu elemento. Clique no círculo em Cor para escolher uma das suas cores de marca ou personalizadas. Contêineres e seções: clique em Substituir background na barra de ação para alterar a cor do background. |
Borda ![]() | Defina as bordas do seu elemento para que ele se destaque. Você pode escolher a cor, a largura e o estilo de toda a borda ou clicar no ícone Editar bordas individuais para fazer o design de cada lado separadamente. |
Cantos ![]() | Deixe os cantos do seu elemento mais quadrados ou arredondados ao arrastar o slider em Raio. Clique no ícone Editar cantos individuais para fazer o design de cada canto separadamente. |
Sombra ![]() | Aplique uma sombra para dar ao elemento um efeito 3D interessante. Você pode adicionar sombra dentro do elemento (interna) e fazer o elemento projetar uma sombra também (projetada). Decida a posição, o desfoque, o tamanho, a cor e a opacidade da sombra. |
Espaçamento ![]() | Adicione um espaço ao seu conteúdo ao ajustar o preenchimento ao redor do elemento ou da sua área selecionada. Dependendo do que você está editando, você pode ver opções para ajustar lados individuais, adicionar espaçamento vertical e horizontal e muito mais. |
Layout ![]() | Organize o elemento do jeito que você quer ao ajustar as configurações de layout. Dependendo do que você edita, você pode ver opções para inverter, alinhar, definir a direção ou ajustar o tamanho e a posição. |
Controle a aparência de qualquer texto ao personalizar a fonte, o peso, o tamanho, a cor e a formatação. Dependendo do que você edita, você pode clicar em Mais opções de texto. Isso mostra configurações adicionais, como espaçamento entre linhas, letra maiúscula e muito mais. |
Criar com o Wix Harmony:
Conheça a nova geração de criação de sites com o Wix Harmony. Alterne livremente entre dar comandos ao seu agente de IA e usar o arrastar e soltar com precisão, para que criar seja tão natural quanto pensar.




para fazer o design de cada lado separadamente.




