Editor Wix: adicionar backgrounds de cor e gradiente aos elementos
5 min de leitura
Crie backgrounds chamativos e bonitos para seus elementos com cores sólidas, gradientes ou malhas gradientes.
Neste artigo, saiba mais sobre:
Importante:
No momento, os gradientes só estão disponíveis para serem adicionados como background aos seguintes elementos:
- Faixas e colunas
- Slideshows
- Repetidores
- Menus mobile
- Janelas
Adicionar uma cor sólida ao background
Aplique uma única cor ao seu background. Escolha entre as cores do tema do seu site, suas cores salvas ou adicione uma nova.
Para alterar a cor do background:
- Clique no elemento relevante no Editor.
- Clique em Alterar background.
- Clique em Cor.
- Clique no ícone Cor na parte superior do seletor de cores e selecione uma das seguintes opções:
- Cores do tema: são as cores usadas no tema do seu site que podem ser aplicadas automaticamente a elementos do site. Selecione uma cor em Cores do tema para aplicá-la ao background. Você também pode editar as cores do tema clicando em Editar no canto superior direito do painel. Saiba mais
- Minhas cores: são as cores que você adicionou e salvou anteriormente no seu site. Clique em uma cor em Minhas cores para aplicá-la ao background.
- Escolher uma nova cor: clique em Adicionar para selecionar uma nova cor. A nova cor fica disponível em Minhas cores para ser aplicada aos elementos do seu site.
Adicionar um gradiente ao background
Gradientes são uma maneira divertida e interessante de personalizar seus elementos e seu site. Escolha um efeito e ajuste as cores e a opacidade para chamar a atenção de seus visitantes. Existem 3 tipos de gradientes de background:
- Linear: as cores no gradiente estão em extremos opostos e se fundem ao longo de uma linha invisível.
- Radial: as cores se envolvem e se fundem ao longo de um raio.
- Cônico: as cores no gradiente têm uma transição girada em torno do ponto central.
Para adicionar e personalizar um gradiente:
- Clique no elemento relevante no Editor.
- Clique em Alterar background.
- Clique em Cor.
- Clique no ícone Gradiente na parte superior do seletor de cores.
- Clique no menu dropdown e selecione o tipo de gradiente que você deseja aplicar.
- Personalize seu gradiente usando as opções:
- Linear:
- Ângulo: escolha o ângulo do gradiente.
- Posições e distância da cor: altere a ordem das cores, ou aproxime ou afaste-as.
- Ajustar cores e opacidade: altere a cor e aumente ou diminua a opacidade.
- Adicionar uma nova cor: clique em qualquer lugar da barra que ainda não contenha um ponto de cor para adicionar e ajustar uma nova cor.
- Radial:
- Ponto central: defina o ponto central do gradiente.
- Posições e distância da cor: altere a ordem das cores, ou aproxime ou afaste-as.
- Ajustar cores e opacidade: altere a cor e aumente ou diminua a opacidade.
- Adicionar uma nova cor: clique em qualquer lugar da barra que ainda não contenha um ponto de cor para adicionar e ajustar uma nova cor.
- Cônico:
- Posição e rotação: clique e arraste o círculo interno do ponto central para alterar sua posição no background e clique e arraste o círculo externo para alterar a rotação da transição de cores.
- Posições e distância da cor: altere a ordem das cores, ou aproxime ou afaste-as.
- Ajustar cores e opacidade: altere a cor e aumente ou diminua a opacidade.
- Adicionar uma nova cor: clique em qualquer lugar da barra que ainda não contenha um ponto de cor para adicionar e ajustar uma nova cor.
- Linear:
Quer salvar seu gradiente?
Basta clicar em Adicionar na parte inferior do painel para salvar o gradiente e usá-lo em outras partes do seu site.
Adicionar uma malha gradiente ao seu background
Crie um background exclusivo para seus elementos usando malhas gradientes. Nesses gradientes, há pontos ao longo do gradiente com cores diferentes, que você pode mesclar como quiser.
Existem predefinições disponíveis para cada tipo de gradiente na parte inferior do painel. Esses gradientes são feitos usando as cores do seu site e podem ser personalizados como você desejar.
Para adicionar e editar uma malha gradiente:
- Clique no elemento relevante no Editor.
- Clique em Alterar background.
- Clique em Cor.
- Clique no ícone Malha gradiente na parte superior do seletor de cores.
- Personalize seu gradiente usando as opções:
- Posição: altere a posição de cada cor no gradiente.
- Ajustar cores e opacidade: altere a cor e use o slider para aumentar ou diminuir a opacidade.
- Tamanho: defina o tamanho das cores no gradiente.
- Desfocado: defina o quanto cada cor se espalha pelo gradiente.
- Background do gradiente: selecione uma cor para exibir atrás do gradiente.
- Adicionar uma nova cor: clique em qualquer lugar na visualização que ainda não contém um ponto de cor para adicionar e ajustar uma nova cor. Dica: você pode adicionar quantas cores quiser, portanto não há limite para o quanto você pode personalizar o gradiente.
Quer salvar sua malha gradiente?
Basta clicar em Adicionar na parte inferior do painel para salvar o gradiente e usá-lo em outras partes do seu site. Você pode aplicar e adicionar novos gradientes em Minhas malhas gradientes no painel.
Aplicar gradientes a backgrounds de vídeo ou imagem
Se você tiver um background de imagem ou vídeo em seu elemento, você também pode adicionar um efeito de gradiente atrás dele.
Basta selecionar um vídeo ou imagem como background e ajustar a opacidade do gradiente.
Para aplicar gradientes a um background de mídia:
- Clique no elemento relevante no Editor.
- Clique em Alterar background.
- Clique em Configurações.
- Clique na caixa de cores ao lado de Cor atrás do vídeo/imagem.
- Crie e adicione um gradiente.
- Clique no X na parte superior do seletor de cores/gradiente para fechá-lo.
- Arraste o slider em Opacidade da imagem/Opacidade do vídeo para deixar a visibilidade do gradiente do background como preferir.
Esse artigo foi útil?
|