Chame a atenção dos visitantes adicionando efeitos visuais impressionantes aos blocos de imagem.

Você pode adicionar efeitos aos blocos de imagens em seu site para dar às suas imagens uma aparência mais estilizada. Alguns efeitos adicionam uma animação para que a imagem esteja sempre em movimento, enquanto outros só aparecem quando o visitante faz a rolagem naquela seção do seu site. A forma como você aplica esses efeitos depende se você adicionou a imagem na seção Editor Intuitivo ou Editor Clássico .

Antes de começar

• Os efeitos de imagem adicionam animações a imagens únicas. Se você estiver na versão 7.1, poderá aplicar animações a todo o site com animações em todo o site.
• As animações em blocos de imagens individuais substituem as animações em todo o site.
• A adição de efeitos à imagem .gif editada a converte em arquivo .jpg estático.
• Antes de adicionar efeitos visuais ao site, confira nossos recursos de acessibilidade. 

Aplique efeitos a um bloco de imagens no Editor Intuitivo

Depois de adicionar uma imagem a um bloco de imagens em uma seção do Editor Intuitivo, clique duas vezes na imagem para abrir o editor dela. Em seguida:

1. Clique em Designe em Efeito de imagem.
2. Escolha um efeito no menu. Qualquer alteração que você fizer no efeito aparecerá na pré-visualização do site.
3. 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 efeito de imagem

Você pode escolher um destes efeitos de imagem:

• Nenhum: sem efeito, com exceção da configuração de opacidade de sobreposição
• Líquido: dá à imagem um efeito de ondulação
• Granulação: adiciona uma sobreposição estática animada à imagem
• Paralaxe: a imagem se mexe à medida que o visitante rola a página
• Linhas refratadas: refrata a imagem através de um padrão de linhas retas
• Círculos refratados: refrata a imagem através de um padrão de círculos

Personalize seu efeito no painel de detalhes clicando em um efeito de imagem e, em seguida, clicando no ícone de configurações.

Clique em qualquer categoria no painel de detalhes para expandir o menu suspenso e revelar mais opções como:

• Personalizar o tamanho e a forma do efeito
• Editar a velocidade e a direção dos efeitos com movimento, como Líquido.

Dependendo do tipo de efeito de imagem, aparecem diferentes configurações que você pode usar para alterar os principais componentes do efeito. Para experimentar uma configuração aleatória de configurações, clique no ícone aleatório ao escolher um efeito ou clique em Randomizar quando estiver no painel de detalhes do efeito.

Recomendamos testar cada efeito para ter uma noção melhor da aparência e do funcionamento no seu site.

Aplicar efeitos a blocos de imagens no editor clássico

Depois de adicionar uma imagem a um bloco de imagens em uma seção do editor clássico, clique duas vezes na imagem para abrir o editor dela. Em seguida:

1. Clique em Design e em Animações.
2. Selecione um efeito na lista para aplicar à imagem e a qualquer texto. Ao selecionar uma opção, aparecerá a prévia dela na página.

Estilos do bloco de animação

Escolha uma das seguintes configurações para animar o bloco inteiro:

• Nenhuma - sem animação, mesmo que haja configurações de animação gerais do site
• Padrão do site - o bloco segue as configurações de animação gerais do site
• Esmaecer - o bloco aparece gradualmente
• Deslizar para cima - o bloco desliza para cima
• 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 aumenta com inclinação para cima
• Inclinar para baixo - o bloco aumenta com inclinação para baixo
• Foco - o bloco aparece borrado e, em seguida, entra em foco
• Colidir - imagem e texto deslizam de fora para dentro pelos lados
• Revelar - imagem e texto deslizam do centro para fora
• Personalizada - define de forma independente as animações da imagem e do texto

Clique em Personalizar para animar a imagem e o texto de forma independente e escolha uma das seguintes configurações:

• Nenhum
• Esmaecer
• Deslizar para cima
• Deslizar para baixo
• Deslizar da esquerda
• Deslizar da direita
• Focar

Veja o exemplo de um bloco de imagem colagem com estas configurações:

• Animação - personalizada
• Animação da imagem - deslizar da esquerda
• Animação do texto - deslizar da esquerda

Resolução de problemas

Se os efeitos de imagem não estiverem aparecendo em seu site, lembre-se:

• ​​Se nenhum conteúdo se mexer, veja se você está usando um browser que aceite animação.
• Os efeitos da imagem só aparecem em browsers e aparelhos que aceitam WebGL - uma ferramenta que funciona com o processador gráfico do seu aparelho. Para saber se o seu browser aceita, acesse get.webgl.org. Caso não aceite, o fundo da seção ficará estático.

Dica: nos sites da versão 7.1, os visitantes podem desativar alguns recursos animados nas configurações do aparelho deles. Isso deixa o seu site mais estático. Assim, ao se reduzir o movimento da tela em um Mac, por exemplo, as animações que você ativou no bloco de imagens ou nos efeitos de imagem do fundo ficarão paradas.

Outras animações e efeitos

Dependendo da versão do seu site e de onde está adicionando efeitos, você pode usar alternativas como imagens de banner, vídeos de plano de fundo ou imagens de plano de fundo da seção para aplicar efeitos e animações semelhantes às suas imagens.

Para saber mais sobre cada tipo, acesse os guias nos links.