Editor do Wix Harmony: trabalhar com gradientes

Neste artigo

Sobre os diferentes tipos de gradiente
Configurar um gradiente Linear, Radial ou Cônico
Configurar um gradiente responsivo
Perguntas frequentes

Os gradientes mesclam 2 ou mais cores e permitem que elas passem de uma para a outra, dando mais movimento ao seu background do que uma cor sólida.

Escolha entre os gradientes Linear, Radial, Cônico e Responsivo para criar visuais diferentes para o seu site. Você pode adicionar outras cores, alterar a opacidade de cada cor e salvar gradientes na sua marca para que sejam fáceis de usar do novo posteriormente.

Uma célula em uma seção com um background gradiente no Wix Harmony, ao lado do painel de background onde você ajusta o gradiente

É importante saber:

No momento, os backgrounds com gradiente estão disponíveis para seções, células dentro de seções, cabeçalhos, rodapés, botões e caixas.

Sobre os diferentes tipos de gradiente

Ao configurar seu gradiente, existem 4 tipos diferentes de gradiente para escolher. Cada gradiente cria um efeito visual único, então a melhor escolha depende do visual que você deseja para o seu background.

Linear: as cores se misturam em linha reta de um lado para o outro (você escolhe o ângulo). Essa é uma boa escolha para backgrounds simples e com uma direção clara.
Radial: as cores se espalham para fora a partir de um ponto central. Isso cria um visual mais suave que chama a atenção para o meio ou para uma área específica.
Cônico: as cores giram ao redor de um ponto central em um movimento circular (você escolhe o ângulo). Isso pode criar um efeito mais dinâmico no estilo de refletor.
Responsivo: as cores se misturam mais livremente no background, criando uma aparência sutil e com bordas menos definidas.

GIF da seção de gradiente do painel de background no Wix Harmony, clicando nos diferentes tipos de gradientes

Configurar um gradiente Linear, Radial ou Cônico

Os gradientes Linear, Radial e Cônico criam transições de cores mais definidas. Adicione outras cores ao gradiente, altere as cores existentes e ajuste a opacidade para criar exatamente o visual que você deseja.

Para configurar um gradiente Linear, Radial ou Cônico:

Vá para o seu editor.
Clique no elemento relevante.
Clique em Substituir background na barra de ação.
Clique no ícone Gradiente .
Escolha um tipo de gradiente na parte superior: Linear , Radial , ou Cônico .
Configure o gradiente usando as opções:
- Adicionar outras cores: passe o mouse sobre a barra de cores onde você deseja adicionar a nova cor. Quando seu cursor muda para esse ícone , clique e selecione uma cor.
- Alterar uma cor: clique no ponto de cor relevante na barra de cores e selecione uma cor diferente.
- Alterar a opacidade de uma cor: clique no ponto de cor relevante na barra de cores e arraste o slider de opacidade ou insira uma porcentagem exata (por exemplo: 100% significa opacidade total).
- Excluir uma cor: clique no ícone Remover cor .
  Observação: os gradientes precisam de pelo menos 2 cores. Se o seu gradiente tiver apenas 2 cores, esse ícone será desativado.
Ajuste o gradiente com base no tipo que você escolheu:
- Linear: arraste o círculo na visualização do gradiente para alterar o ângulo do fluxo de cor.
- Radial: arraste o círculo no centro da visualização para mover o ponto focal.
- Cônico: ajuste o ângulo e arraste o ponto focal na visualização para alterar como as cores mudam.

Dicas:

Clique no ícone Salvar na marca para salvar o gradiente que você criou para uso posterior.
Clique no ícone Inverter ordem para reverter rapidamente a ordem das cores.

GIF de uma célula com background gradiente no Wix Harmony, ajustando o gradiente cônico no painel de background

Configurar um gradiente responsivo

Os gradientes responsivos criam uma mescla mais sutil. Esse estilo funciona bem quando você quer que as cores sejam mais orgânicas e fluidas.

Para configurar um gradiente responsivo:

Vá para o seu editor.
Clique no elemento relevante.
Clique em Substituir background na barra de ação.
Clique no ícone Gradiente e, em seguida, clique no ícone Responsivo .
Configure o gradiente usando as opções:
- Adicionar outras cores: passe o mouse sobre o lugar na visualização onde você deseja adicionar outra cor. Quando seu cursor muda para esse ícone , clique e selecione uma cor.
- Mover uma cor: clique e arraste um ponto de cor para movê-lo pela visualização.
- Alterar uma cor: clique no ponto de cor relevante e selecione uma cor diferente.
- Alterar a opacidade de uma cor: clique no ponto de cor relevante e arraste o slider de opacidade.
- Abrir mais configurações: clique no ícone Mais configurações para ajustar o tamanho, o contraste e a cor por trás do gradiente.
- Excluir uma cor: clique no ponto de cor relevante e, em seguida, clique no ícone Remover cor .
  Observação: os gradientes precisam de pelo menos 2 cores. Se o seu gradiente tiver apenas 2 cores, esse ícone será desativado.