Editor do Wix Studio: alterar o background de uma seção
10 min de leitura
Faça o design de cada seção de acordo com as necessidades do seu cliente. Você pode escolher uma cor, gradiente, imagem ou vídeo para o background da sua seção. Adicione uma sobreposição padrão interessante e ajuste a opacidade para que o background não tire a atenção do conteúdo.
Trabalhando com breakpoints:
Você pode definir o background da seção por breakpoint, para que ela fique ideal em todos os dispositivos.
Neste artigo, saiba mais sobre como:
Dica:
Para acelerar o processo de design, criamos várias seções prontas e totalmente responsivas em Seções no painel Elementos.
Adicionar uma cor ao background da seção
Escolha qualquer cor para o background da sua seção, seja uma das suas cores do tema ou uma cor personalizada. Você pode então definir a opacidade se preferir um background mais suave.
Para alterar a cor do background de uma seção:
- Selecione a seção relevante.
- Clique no ícone Abrir inspetor
no canto superior direito do editor. - Clique na caixa de cores em Design.
- Dependendo da sua preferência, selecione uma cor:
- Cores do tema: escolha uma das suas cores do site.
- Minhas cores: escolha uma cor personalizada existente.
- Uma nova cor: clique em Adicionar para adicionar uma nova cor ao seletor de cores.
- (Opcional) Use o slider para aumentar ou diminuir a opacidade da cor.
Adicionar um gradiente ao background da seção
O Editor do Wix Studio oferece diferentes tipos de gradientes para o background da sua seção:
- Gradiente radial, linear ou cônico
: escolha até 8 cores e controle a opacidade de cada cor individual nesses gradientes. Você também pode ajustar o ângulo (Linear), o ponto focal (Radial) ou ambos (Cônico) para obter a aparência desejada. - Gradiente responsivo
: esse gradiente permite que você crie um efeito semelhante a uma malha, misturando quantas cores forem necessárias. Você pode controlar a opacidade, o tamanho e a propagação de cada cor individual nesse gradiente.
Para adicionar um background de gradiente a uma seção:
- Selecione a seção relevante.
- Clique no ícone Abrir inspetor no canto superior direito do editor.
- Clique na caixa de cores em Design.
- Dependendo da sua preferência, clique abaixo para saber como criar cada tipo de gradiente:
Adicionar um gradiente Linear, Radial ou Cônico
.
.
. 
Adicionar um gradiente responsivo
.
Adicionar uma imagem ao background da seção
Adicione uma imagem ao background da sua seção e ajuste o ponto focal para que a parte relevante seja sempre exibida. Você pode usar suas próprias imagens carregadas, escolher uma imagem gratuita do Wix/Unsplash ou adquirir uma imagem da Shutterstock.
Dica:
Você pode adicionar uma sobreposição de cor ou gradiente sobre sua imagem. Clique na caixa de cores para selecionar uma cor ou gradiente e, em seguida, arraste o slider para ajustar a opacidade dessa camada.
Para adicionar um background de imagem a uma seção de página:
- Selecione a seção relevante.
- Clique no ícone Abrir inspetor no canto superior direito do editor.
- Clique em + Adicionar imagem ou vídeo em Mídia.
- (No Gerenciador de Mídia) Escolha o que fazer a seguir:
- Selecione ou faça upload da sua própria imagem.
- Clicar na aba Mídia do Wix/Unsplash para usar uma de nossas imagens gratuitas.
- Clique na aba da Shutterstock para comprar uma imagem da Shutterstock.
- Clique em Alterar background.
- (Opcional) Personalize o background da imagem no painel Inspetor:
- Ponto focal: clique no ícone Ponto focal
para selecionar a parte da imagem que deve estar sempre visível, mesmo quando a tela é redimensionada. - Opacidade: arraste o slider para alterar a visibilidade da imagem.
- Opções de encaixe: clique no menu dropdown para escolher como essa imagem deve se ajustar à seção.
- Ponto focal: clique no ícone Ponto focal
Adicionar um vídeo ao background da seção
Adicione um background de vídeo para dar uma sensação de movimento à sua seção. Você pode escolher o ponto focal do vídeo, alterar a velocidade de reprodução e decidir se ele é reproduzido continuamente ou não.
Temos toda uma biblioteca de vídeos gratuitos que você pode usar como background, mas você também pode usar seus próprios arquivos ou adquirir um vídeo da Shutterstock.
Dica:
Você pode adicionar uma sobreposição de cor ou gradiente sobre o background do vídeo. Clique na caixa de cores para selecionar uma cor ou gradiente e, em seguida, arraste o slider para ajustar a opacidade dessa camada.
Para adicionar um background de vídeo a uma seção de página:
- Selecione a seção relevante.
- Clique no ícone Abrir inspetor no canto superior direito do editor.
- Clique em + Adicionar imagem ou vídeo em Mídia.
- (No Gerenciador de Mídia) Escolha o que fazer a seguir:
- Selecione ou faça upload do seu próprio vídeo.
- Clicar na aba Mídia do Wix/Unsplash para usar um de nossos vídeos gratuitos.
- Clicar na aba da Shutterstock para comprar um vídeo da Shutterstock.
- Clique em Alterar background.
- (Opcional) Personalize o background do seu vídeo no painel Inspetor:
- Ponto focal: clique no ícone Ponto focal para selecionar a área no vídeo que deve estar sempre visível, mesmo quando a tela é redimensionada.
- Opacidade: arraste o slider para alterar a visibilidade do vídeo.
- Velocidade da reprodução: clique no dropdown para selecionar a velocidade (por exemplo: Normal, 0,25x, 1,25x).
- Tocar continuamente: clique na alavanca para alterar a forma como o vídeo é reproduzido:
- Ativada: o vídeo é reproduzido em um loop infinito em segundo plano.
- Desativada: o vídeo é reproduzido apenas uma vez para os visitantes e depois para.
- Ponto focal: clique no ícone Ponto focal
Quer ver como funciona em tempo real?
Clique no botão Reproduzir no seu vídeo para ver como ele fica diretamente na tela.
Adicionar uma sobreposição padrão ao background da seção
Aplique um padrão interessante sobre o background da sua seção. Temos uma variedade de padrões para você escolher, em diferentes cores e tamanhos. Navegue pela lista e clique nos padrões que você gosta para ver como eles se misturam com o background.
Para adicionar uma sobreposição padrão ao background da seção:
- Selecione a seção relevante.
- Clique no ícone Abrir inspetor no canto superior direito do editor.
- Ative a alavanca Aplicar sobreposição padrão abaixo de Sobreposição.
- Explore os padrões disponíveis. Clique em um padrão para adicioná-lo como uma sobreposição e veja como ele se encaixa no seu background.
Esse artigo foi útil?
|