Obs.: embora os nossos guias mais acessados tenham sido traduzidos para o português, outros guias estão disponíveis apenas em inglês.

Animações e efeitos de imagem

Você pode adicionar animações a uma pequena área do seu site, como o fundo de uma seção ou um Bloco de Imagens; ou pode ativar uma animação geral que aparece enquanto os visitantes percorrem o site.

Este guia analisa como ativar diferentes efeitos de animação em diferentes áreas do seu site.

Dica: para adicionar efeitos de pairar ao seu site, como títulos de imagens e legendas, acesse Criar efeitos de pairar para suas imagens.

Antes de começar

  • As animações em Blocos de Imagem individuais, Blocos de Citação e outras áreas substituem animações em todo o site.
  • Algumas páginas de coleção, como Páginas do Blog e Páginas de Portfólio, sempre têm animações sutis quando a página é carregada, mesmo quando as animações em todo o site estão desativadas. 
  • Ao desativar as animações de bloco e página, essas áreas seguirão os estilos gerais do site.

Animações em todo o site

As animações em todo o site estão disponíveis somente na versão 7.1.

Animações em todo o site se aplicam à maioria das áreas do seu site, com efeitos mais visíveis em algumas áreas do que outras. Essas animações afetam principalmente a maneira como imagens, texto e outros blocos aparecem à medida que você percorre uma página. Algumas animações também aparecem quando um visitante passa o cursor do mouse sobre links e botões. 

Recomendamos ativar um estilo de animação e ver como ele fica em diferentes páginas do seu site. Experimente cada estilo até encontrar o que funciona melhor para o seu conteúdo.

Para animar o conteúdo do site:

  1. Ao editar uma página, abra Estilos do Site e clique em Animações.
  2. Clique em um estilo de animação.
  3. Escolha uma velocidade de animação Lenta, Média ou Rápida.
  4. Passe o cursor sobre Concluído e clique em Salvar.

Estilos de animação

Escolha entre estes estilos de animação:

  • Nenhum- Desativa animações em todo o site.
  • Fade - O conteúdo desaparece à medida que é exibido na página.
  • Escala- O conteúdo é animado de um tamanho menor até o tamanho final, criando um efeito de zoom.
  • Slide - O conteúdo desliza para cima no lugar, acentuando o efeito de rolar para baixo da página.
  • Clip - o conteúdo desliza linha por linha a partir da esquerda.
  • Flex - adiciona uma animação exclusiva a títulos, texto vinculado, botões e Páginas de Portfólio.

Remover animações em todo o site

Para desativar as animações em todo o site:

  1. Ao editar uma página, clique no ícone do pincel e depois em Animações.
  2. Escolha Nenhum.
  3. Passe o cursor sobre Concluído e clique em Salvar.

Assista a este vídeo

Efeitos de imagem de fundo

Os efeitos de imagem de segundo plano só estão disponíveis na versão 7.1.

Nas seções da página que usam imagem de fundo, você pode adicionar efeitos de imagem para dar ao fundo um visual mais estilizado. Alguns efeitos incluem uma animação para deixar a imagem sempre em movimento, enquanto outros aparecem apenas quando o visitante percorre essa seção do site.

Para adicionar um efeito de imagem:

  1. Depois de adicionar um plano de fundo de seção, no editor de seção, clique em Plano de fundo.
  2. Role para baixo até Efeito de imagem e escolha um efeito no menu suspenso. O efeito aparecerá na pré-visualização do seu site.
  3. Passe o cursor sobre Concluído e clique em Salvar.

Lembre-se:

  • Os efeitos da imagem só aparecem em navegadores e aparelhos compatíveis com WebGL, uma ferramenta que funciona com o processador gráfico do seu aparelho. Para ver se seu navegador é compatível, acesse get.webgl.org. Caso não seja, o fundo da seção permanecerá estático.
  • Os efeitos de imagem não aparecem em vídeos de segundo plano.

Vídeos de fundo

Dependendo da versão do site, você pode adicionar um vídeo ao plano de fundo de uma seção de página, banners e outras áreas.

Lembre-se:

Arte de fundo

A arte de fundo só está disponível na versão 7.1.

Você pode adicionar uma arte de fundo exclusiva às seções da página em vez de uma imagem ou vídeo. Escolha um padrão animado para um visual animado ou escolha um gradiente de cores mais sutil. Você pode usar um padrão predefinido ou personalizá-lo escolhendo formas, tamanhos e movimentos específicos. 

Para adicionar arte de fundo:

  1. No editor de seções, clique em Plano de fundo e, em seguida, clique em Arte.
  2. Clique em um bloco para visualizar a arte na seção. As cores são extraídas das opções Brilho em sua paleta de cores
  3. Para definir melhor o design, clique em um dos pequenos círculos que aparecem sobre o bloco.
  4. Para personalizá-lo ainda mais, clique no ícone de configurações para abrir o painel de detalhes. Veja as etapas abaixo para saber mais.
  5. Ao encontrar o design que de sua preferência, passe o cursor do mouse sobre Concluído no canto superior esquerdo do editor de páginas e clique em Salvar.

Personalize os detalhes do fundo

Você pode personalizar ainda mais sua arte de fundo no painel de detalhes. Para abrir os detalhes de um plano de fundo, clique em uma miniatura e, em seguida, clique no ícone de configurações

settings_icon.png

Explore as opções e configurações até achar um padrão que agrade. As categorias dependem do tipo de arte de fundo inicial. Clique em uma delas para expandir o menu suspenso e ver mais opções.

Por exemplo:

  • Na maioria dos painéis de detalhes do plano de fundo, você pode clicar em Inverter cores para alternar as cores atribuídas. 
  • No painel de detalhes de qualquer plano de fundo, você pode clicar em Randomizar para experimentar uma configuração aleatória.

Outras configurações são exclusivas para cada estilo de arte de fundo e incluem controles deslizantes e alternadores que alteram os principais componentes da arte. Recomendamos experimentar as diferentes opções em cada painel de detalhes até criar uma combinação que você goste.  

Lembre-se:

  • Se sua seção incluir texto ou outro conteúdo, verifique se ela ainda está visível e legível na frente da arte de fundo. Para alterar a cor do texto, use os ajustes de fonte no tema de cores dessa seção. 
  • A arte de fundo só aparece em navegadores e dispositivos compatíveis com WebGL, uma ferramenta que funciona com o processador gráfico do seu dispositivo. Para testar se seu navegador oferece suporte a isso, visite get.webgl.org. Se um navegador não suportar WebGL, o plano de fundo da seção permanecerá estático.
  • Se a arte da seção estiver animada, a seção incluirá um botão de pausa no canto inferior direito. Isso mantém seu site acessível aos visitantes que podem achar fundos móveis desorientadores. Não é possível desativar esse botão.

Assista a este vídeo

Animações de bloco

Você pode adicionar animações a Blocos de Imagem e Blocos de Cotação que os visitantes veem quando carregam ou atualizam a página.

Blocos de Imagem

Para animar um Bloco de Imagem:

  1. No editor Bloco de Imagens, clique em Designe, em seguida, clique em Animações.
  2. Selecione um efeito na lista para aplicar à imagem e a qualquer texto. Ao selecionar uma opção, você verá uma pré-visualização dela na página.
  3. Para animar a imagem e o texto separadamente, selecione Personalizadoe, em seguida, selecione as opções para Imageme Texto.

Escolha entre estas opções de animação para a imagem, o texto ou ambos:

  • Fade In - o bloco, a imagem ou texto aparece gradualmente
  • Deslizar para cima - o bloco, a imagem ou texto desliza para cima
  • Deslizar para baixo - a imagem ou texto desliza para baixo
  • Clipe horizontal - o bloco ou a imagem carrega em camadas horizontais
  • Clipe vertical - o bloco ou a imagem carrega em camadas verticais
  • Inclinar para cima - o bloco ou a imagem aumenta com inclinação para cima
  • Inclinar para baixo - o bloco ou a imagem aumenta com inclinação para baixo
  • Foco - o bloco aparece borrado e depois entra em foco
  • Colidir - imagem e texto deslizam de fora para dentro pelos lados
  • Revelar - imagem e texto deslizam do centro para fora
  • Deslizar da esquerda - a imagem ou texto aparece deslizando pela esquerda
  • Deslizar da direita - a imagem ou texto aparece deslizando pela direita

Blocos de Citações

Para animar um Bloco de Citações:

  1. Clique na guia Design no editor de blocos.
  2. Selecione um efeito no menu suspenso. À medida que explora as opções, você verá visualizações de como elas são carregadas.

Escolha entre:

  • Fade In - o texto aparece gradualmente
  • Deslizar para cima - o texto desliza de baixo para cima
  • Foco - o texto aparece borrado e, em seguida, entra em foco
  • Revelar - o texto desliza do centro para fora

Resolução de problemas

Se as animações não aparecerem no site, lembre-se:

  • Animações em todo o site e segundos planos de seção só estão disponíveis na versão 7.1.
  • Alguns conteúdos só suportam o estilo de animação em todo o site Fade. Se você escolher um estilo diferente, o conteúdo que não for compatível com ele desaparecerá.
  • Se nenhum dos seus conteúdos estiver animando, verifique se está usando um navegador compatível.
Este artigo foi útil?
Utilizadores que acharam útil: 68 de 119