Site avançado: Personalizando os fundos dos elementos

Personalize o plano de fundo dos elementos do site para combinar com o tema da sua empresa com designs criativos. Escolha imagens de fundo da galeria de fotos, carregue suas próprias imagens, use vídeos como plano de fundo ou aplique cores e gradientes para adicionar um toque único ao seu site.

Editar o fundo de um elemento

Siga os passos abaixo para acessar o editor de design e alterar o fundo de um elemento.

Passo a passo:

1. Clique com o botão direito do mouse no elemento e clique em Editar design.

   Se você estiver no modo flexível ou no Editor 2.0, selecione Editar Design no menu flutuante para abrir o painel de design.

2. Acesse a seção Antecedentes.
3. Dependendo do elemento, selecione Cor, Imagem ou Vídeo.
4. Selecione o plano de fundo desejado.
5. Para criar um carrossel de imagens, selecione várias imagens e clique em Concluído.
   • Após a criação do controle deslizante, você pode definir as configurações do slide, como estilo de transição e velocidade de deslizamento, no menu de design da linha.
   • Qualquer uma das outras opções de imagem de fundo, como Sobreposição de Fundo, Posicionamento e Estilo de Exibição, pode ser aplicada ao controle deslizante.
6. Opcional: Se você selecionar uma única imagem como plano de fundo, ative a opção "Não otimizar esta imagem" para impedir a otimização.

Configurando imagens de fundo

Após configurar uma imagem ou um carrossel de slides, opções de configuração adicionais são exibidas. Essas configurações variam, mas as mais comuns incluem:

Estilos de exibição de imagens

Essas opções controlam como uma imagem se ajusta, se repete ou se estica dentro de um contêiner:

• Cobertura: Estica a imagem para cobrir toda a área. A proporção é mantida, mas partes da imagem podem ser cortadas.
• Imagem completa: Exibe a imagem completa sem cortes. Isso pode resultar no aparecimento de barras ao redor da imagem, dependendo do tamanho do contêiner.
• Mosaico: Repete a imagem em seu tamanho original em um padrão para preencher a área.
• Sem repetição: Exibe a imagem completa uma única vez em seu tamanho original.

Posicionamento e efeitos

• Tipo de posição da imagem: Disponível no Editor 2.0 e no modo flexível. Selecione Padrão, Estático ou Paralaxe.
• Posição: Determina onde a imagem será posicionada, como no Centro, Acima ou Abaixo. No Editor 2.0 e no modo flexível, você deve definir a posição para cada tamanho de tela.

Utilizando planos de fundo em vídeo

Utilize vídeos de fundo para adicionar movimento, provenientes do YouTube, Vimeo ou Dailymotion.

Limitações

• Vídeos de fundo do YouTube: Os vídeos do YouTube exibem o título e o nome de quem os publicou antes do início. Como esses elementos não podem ser removidos sem alterações manuais no CSS, recomendamos o uso de outras fontes de vídeo para planos de fundo.
• Compatibilidade com dispositivos móveis: vídeos do YouTube não são reproduzidos automaticamente em dispositivos iOS. iPhones em modo de economia de energia exibirão um botão de reprodução em vez de reproduzir automaticamente qualquer vídeo.
• Áudio: Os vídeos de fundo não reproduzem som. Use o widget de vídeo se precisar de áudio.
• Desempenho: Os vídeos consomem mais largura de banda e podem distrair os usuários. Use-os com moderação e considere reduzir a opacidade do vídeo para um efeito mais sutil.
• Listas de reprodução do Dailymotion: Remova os parâmetros da lista de reprodução do URL. Use apenas o link direto do vídeo. Por exemplo, use https://www.dailymotion.com/video/x60ktex em vez de um link contendo ?playlist=.

Passo a passo: