Melhore o conteúdo do seu site com os efeitos especiais de estilo.

Para adicionar efeitos visuais impressionantes ao conteúdo em todo o site, ative as animações em todo o site, que aparecem conforme os visitantes percorrem a página. Você também pode adicionar animações e outros efeitos de imagem a elementos específicos, como o fundo de uma seção ou um bloco de imagens.

Este guia aborda a criação de animações em todo o site e outras áreas nas quais você pode adicionar efeitos.

Animações em todo o site estão disponíveis na versão 7.1. Na versão 7.0, depende do seu template. Alguns modelos 7.0 têm opções de animação específicas, como páginas do blog da família de templates Bedford. Para encontrar o template do seu site, visite Qual é a versão e o template do meu site?.

Antes de começar

• As animações em um bloco de imagens, bloco de citação e outras áreas substituem as animações em todo o site. 
• Algumas páginas de coleção, como páginas do blog, da loja e do portfólio, sempre têm animações sutis quando a página é carregada, mesmo com as animações gerais do site desativadas.
• Antes de adicionar efeitos visuais ao site, confira nossos recursos de acessibilidade.

Assista a este vídeo

Ative as animações em todo o site

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

Recomendamos ativar um estilo de animação e testar em diferentes páginas do seu site. Teste cada estilo até achar o que funciona melhor no seu conteúdo.

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

1. Abra o painel "Animações". 
2. Clique em um estilo de animação.
3. Escolha a velocidade da animação: Lenta, Média ou Rápida.
4. Clique em Salvar para salvar as alterações e continuar editando ou clique em Sair e depois em Salvar para fechar o editor.

Estilos de animação em todo o site

Escolha um dos estilos de animação:

• Nenhum - desativa animações em todo o site
• Esmaecer - o conteúdo desaparece à medida que aparece na página
• Escala - o conteúdo animado aumenta até chegar ao tamanho final, criando um efeito de zoom
• Deslizamento - o conteúdo aparece deslizando de baixo, acentuando o efeito de rolar para baixo da página
• Clipe - o conteúdo desliza linha por linha a partir da esquerda
• Flex – adiciona animações exclusivas ao título, texto com link, botões e páginas de portfólio; e adiciona um sublinhado aos principais links de navegação ao passar se o cursor

Exclua as animações em todo o site

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

1. Abra o painel "Animações".
2. Escolha Nenhuma.
3. Clique em Salvar para salvar as alterações e continuar editando ou clique em Sair e depois em Salvar para fechar o editor.

Outras animações e efeitos de imagem e texto

Você pode ativar outros efeitos e animações em elementos específicos no site. Saiba mais sobre cada tipo nos guias abaixo:

• Arte de fundo da seção (somente versão 7.1)
• Imagens e efeitos do fundo da seção (somente versão 7.1)
• Vídeo de fundo
• Adição de efeitos e animação a um bloco de imagens
• Blocos de Citações
• Bloco de rolagem

Resolução de problemas

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

• Alguns conteúdos aceitam apenas o estilo de animação Esmaecer. Se você selecionar outro estilo, o conteúdo não aceito nele desaparecerá.
• Se nenhum conteúdo se mexer, veja se você está usando um browser que aceite animação.
• Animações em todo o site e fundo de seção só estão disponíveis na versão 7.1.
• No blog do Circle, você descobre como outros profissionais usam animações para aprimorar os sites dos clientes.