Pular para o conteúdo principal
PT Deutsch Español Français Italiano

Planos de fundo do elemento

Personalize o plano de fundo dos elementos para combinar com o tema da sua empresa com designs atraentes e criativos. Escolha entre imagens de fundo personalizadas na galeria de fotos, faça upload de suas próprias imagens, use planos de fundo de vídeo ou aplique cores e gradientes para dar um toque exclusivo ao seu site

Nota

Para planos de fundo de página, consulte Plano de fundo do tema.

Qualquer arquivo (texto, imagem, vídeo ou áudio) carregado no sistema está disponível publicamente. Nenhuma informação pessoal e/ou confidencial deve ser enviada. Para remover o arquivo completamente, exclua-o do Media Manager.

.

Dica

Todos os vídeos em segundo plano do YouTube exibem o título e o carregador do vídeo antes que o vídeo comece a ser carregado. Não há como remover esses itens sem alterar manualmente o CSS. Devido a essa alteração, os vídeos do YouTube não são recomendados para vídeos em segundo plano.

Para editar o plano de fundo dos elementos:

  1. Para acessar o editor de design, clique com o botão direito do mouse no elemento e clique emEditar design. Ou se você estiver no modo flexível ou no Editor 2.0, selecione Editar design no menu flutuante para abrir o painel de design. Clique no elemento para abrir o menu flutuante e, em seguida, clique na opção para editar o design.

  2. Navegue até o Plano de fundo seção.

  3. Dependendo do elemento, selecione Cor, Imagem, ou Vídeo e selecione o plano de fundo desejado.

    • Alguns elementos também têm a opção de controles deslizantes de imagem. Para criar um controle deslizante de imagem, selecione várias imagens e clique em Feito. Para obter informações detalhadas sobre os controles deslizantes de fundo, Sliders de imagem de fundo.

    • Para obter detalhes sobre as opções de cores, consulte Seletor de cores

  4. (Opcional)Ao selecionar uma imagem como plano de fundo, clique noNão otimize esta imagemative para evitar a otimização se uma única imagem for usada (essa configuração aparecerá após a seleção de uma imagem).

Sliders de imagem de fundo

Alguns contêineres oferecem a opção de adicionar um controle deslizante de imagem de fundo.

Para criar um controle deslizante de fundo:

  1. Para acessar o editor de design, clique com o botão direito do mouse no elemento e clique emEditar design. Ou se você estiver no modo flexível ou no Editor 2.0, selecione Editar design no menu flutuante para abrir o painel de design. Clique no elemento para abrir o menu flutuante e, em seguida, clique na opção para editar o design.

  2. Navegue até o Plano de fundo seção.

  3. Clique Imagem.

  4. Clique no sinal + e selecione várias imagens em vez de uma única imagem no seletor de imagens.

  5. Clique Feito.

  6. (Opcional) Depois que o controle deslizante for criado, você poderá definir as configurações do slide, como estilo de transição do slide e velocidade do slide, no menu de design da linha.

  7. (Opcional) Qualquer outra opção de imagem de fundo, como sobreposição de fundo, posicionamento e estilo de exibição, pode ser aplicada ao controle deslizante.

Configuração da imagem de fundo

Depois que uma imagem ou um controle deslizante de imagem for configurado, opções adicionais de configuração estarão disponíveis.

Embora as opções possam variar, as duas mais comuns são:

  • Estilos de exibição de imagem: essas são as várias maneiras pelas quais você pode controlar como a imagem ou as imagens são exibidas dentro do contêiner. Essas opções permitem ajustar a forma como uma imagem se ajusta, se repete ou se estende para cobrir a área. Há quatro opções:

    • Capa: estica a imagem para cobrir toda a área sem perder sua proporção (como está cobrindo a área do contêiner, partes da imagem podem ser cortadas).

    • Imagem completa: Exibe a imagem completa. Embora a imagem não seja cortada, pode haver barras que apareçam em ambos os lados ou acima e abaixo da imagem, dependendo do tamanho do contêiner

    • Azulejo: repete a imagem inteira em seu tamanho original em um padrão de ladrilho para preencher a área. Se a imagem for maior que o contêiner, ela não se repetirá.

    • Sem repetição: exibe a imagem inteira em seu tamanho original sem repeti-la. Se a imagem for maior que o contêiner, ela será cortada. Se for menor que o contêiner, haverá espaço ao redor da imagem.

  • Tipo de posição da imagem (Somente no Editor 2.0 e no modo flexível): Selecione entre Padrão, Estático ou Paralaxe. Observe que a posição estática não funcionará em dispositivos iOS.

  • Posição: essa configuração determina onde a imagem é colocada, como no centro, na parte superior, inferior, esquerda ou direita do contêiner. A configuração da posição funciona em conjunto com as opções de exibição da imagem para controlar como a imagem é exibida A posição da imagem de fundo é definida por tamanho de tela no Editor 2.0 e no modo flex.

image-display-configuration.png

Planos de fundo de vídeo

Use fundos de vídeo para adicionar rapidamente um vídeo do YouTube, Vimeo ou Dailymotion. Os planos de fundo de vídeo podem chamar a atenção do visitante com conteúdo em movimento e adicionar uma aparência moderna e elegante a qualquer site

Dica

Todos os vídeos em segundo plano do YouTube exibem o título e o carregador do vídeo antes que o vídeo comece a ser carregado. Não há como remover esses itens sem alterar manualmente o CSS. Devido a essa alteração, os vídeos do YouTube não são recomendados para vídeos em segundo plano.

Para adicionar um plano de fundo de vídeo a um contêiner:

  1. Tenha um vídeo pronto para ser carregado ou o URL compartilhável de um vídeo que seja carregado no YouTube, Vimeo ou Dailymotion.

  2. Clique com o botão direito do mouse no elemento ao qual você gostaria de adicionar esse plano de fundo e clique em Editar design.

  3. Navegue até o Plano de fundo seção.

  4. Clique noVídeoaba. Você tem as seguintes opções:

    • Clique Carregar vídeo e selecione o vídeo que você deseja enviar. Você pode carregar até 200 MB em todos os formatos. Você pode enviar vídeos do seu dispositivo, Facebook, Instagram, Dropbox, Google Drive ou gravar um vídeo usando sua webcam

    • Cole o URL do vídeo que você gostaria de usar na caixa de texto URL do YouTube, Vimeo ou Dailymotion.

      Nota

      Os vídeos do YouTube não são compatíveis com dispositivos móveis, pois não são reproduzidos automaticamente em dispositivos iOS.

Considerações

  • Os vídeos do YouTube não são compatíveis com dispositivos móveis, pois não são reproduzidos automaticamente em dispositivos iOS.

  • Os iPhones com bateria no modo de baixa energia não reproduzirão vídeos automaticamente em um site e, em vez disso, mostrarão um botão de reprodução.

  • Vídeos em segundo plano não reproduzirão som.

  • Os vídeos podem levar tempo e largura de banda para serem carregados e podem distrair os usuários de links ou textos importantes em sua página, então use vídeos com moderação.

  • Considere adicionar uma sobreposição com maior opacidade do fundo do vídeo para tornar o efeito mais sutil.

  • Ao adicionar um vídeo do Dailymotion que faz parte de uma playlist, certifique-se de adicionar apenas o link direto ao vídeo (e omitir o parâmetro playlist, que se parece com isso:? lista de reprodução = x1x2f3). Se o URL do seu vídeo tiver esse parâmetro, basta removê-lo. Por exemplo: https://www.dailymotion.com/video/x60ktex?playlist=x5x6f2 seria https://www.dailymotion.com/video/x60ktex

Alterar a cor de fundo da seção na rolagem

Defina uma cor de fundo que transite suavemente à medida que os usuários percorrem a seção, criando uma sugestão visual dinâmica que aprimora o engajamento e destaca as alterações no conteúdo.

Para alterar a cor de fundo de uma seção na rolagem:

  1. Clique na seção desejada para abrir o menu flutuante e clique em Design.

  2. Expanda o Estilo seção do painel de design.

  3. Selecione um Cor do plano de fundo. Essa será a primeira cor que os usuários verão ao rolarem para baixo até a seção.

  4. Habilite o Mudar a cor na rolagem alternar.

  5. Selecione um Cor de fundo na rolagem. Essa é a cor para a qual sua seção muda conforme o usuário rola

    image__41_.png

Solução de problemas e perguntas frequentes

O vídeo não é reproduzido automaticamente no celular

Se você estiver usando um iPhone, o problema pode ser causado pelo modo de baixo consumo de energia. Desativar o modo de baixo consumo de energia pode resolver o problema.

Outra possibilidade são as configurações do navegador.

O vídeo não tem som

Os vídeos em segundo plano, por padrão, não têm som. Se seu vídeo precisar de som, considere usar o widget de vídeo em vez disso

Parte do meu vídeo ou imagem foi cortada

Isso ocorre porque a proporção da imagem ou do vídeo é diferente da do contêiner.

Dependendo do seu objetivo, isso pode ser difícil de resolver. Se a imagem ou o vídeo precisar caber em um contêiner que muda com base no tamanho da tela, não há uma solução perfeita para evitar que ele seja cortado. A parte visível da imagem ou do vídeo variará dependendo do tamanho da tela.

Se a imagem não precisar cobrir toda a área, o Imagem completa opção nas opções de exibição de imagem pode ser usada (consulte a seção neste artigo, Configuração da imagem de fundo).

Atualmente, os planos de fundo de vídeo não têm uma opção de vídeo completo. Ajustar a proporção do vídeo original pode corrigi-lo.

Para obter mais informações sobre a proporção, consulte Diretrizes e especificações de mídia.

O vídeo não está aparecendo

Se o vídeo for adicionado por meio de um link, o problema pode estar relacionado às configurações de privacidade do vídeo. Para verificar isso, tente usar um link de vídeo diferente. Se o novo vídeo funcionar, isso sugere que as configurações de privacidade do vídeo original estão impedindo que ele seja exibido no site.

A solução dependerá da plataforma que hospeda o vídeo, e sua equipe de suporte poderá ajudar.

Was this article helpful?

Voltar ao topo