Hostinger Criador de Sites: Como Adicionar Animações

Aprenda a adicionar animações ao seu site usando o Criador de Sites da Hostinger

Atualizado há 2 semanas

Nesse artigo, você irá aprender como:

Adicionar animações no Criador de Sites:

Você pode habilitar animações nativas de duas maneiras:

  • Adicionada ao site todo: uma única animação selecionada se aplica a todos os elementos em todo o site

  • Adicionada em indíviduos: aplique animações para cada um dos elementos do seu site individualmente; desta forma você pode definir diferentes tipos de animações para diferentes elementos

OBSERVAÇÃO: os elementos do código incorporado não suportam as animações nativas

Adicionar animações para o site como um todo

No criador de sites, expanda o painel de Estilos do site à esquerda. Abra a guia de Animações e selecione o estilo de animação preferido (fade, slide, scale):

Hostinger Criador de Sites: aba Animações em Estilo do site destacada no painel lateral

Dessa forma, a animação selecionada é aplicada a todos os elementos e seções do site. Você pode desativar a animação de um determinado elemento em suas configurações locais, por exemplo, é assim que você pode desativá-la para o elemento de texto:

Hostinger Criador de Sites: menu de animação aberto com opções como Esmaecer, Deslizar e Ampliar

Depois de habilitar ou desabilitar as animações, atualize seu site para que as alterações sejam refletidas online. Para verificar a aparência do site com animações, vá para o modo de visualização prévia ou abra o site ao vivo.
​

Adicionar animações para elementos em específico

No construtor de sites, clique no elemento em questão e selecione Editar ou Alterar para abrir suas configurações. Em seguida, encontre as configurações de Animações e habilite a preferida. Por exemplo, as configurações do elemento de texto:

Hostinger Criador de Sites: menu de animação aberto com opções como Esmaecer, Deslizar e Ampliar

Configurações do elemento de imagem:

Configurações de imagem com a aba Animação destacada

Configurações do elemento do botão:

Hostinger Criador de Sites com a aba “Animação” destacada nas configurações de botão

E assim por diante! Depois de habilitar as animações, atualize seu site para que as alterações sejam refletidas online. Para verificar a aparência do site com animações, vá para o modo de visualização prévio ou abra o site ao vivo.

Adicionar elementos de animação de terceiros

Você pode incorporar animações gratuitas no seu site usando ferramentas externas. Neste artigo, vamos mostrar como você pode usar as animações do Lordicon (ferramenta em inglês).

1. Faça login no Lordicon e clique na animação escolhida (se necessário, personalize a animação):

Lordicon: ícone Confetti selecionado com seta para abrir o editor completo

2. Clique em Download → HTML → Copy HTML code [Copiar código HTML]:

Botão “Copy HTML code” destacado na janela “Embed on WEB”

3. Depois, abra o Criador de Sites da Hostinger e adicione um elemento de Código embutido a qualquer lugar da página.

4. No campo Adicione seu código aqui, cole o código HTML que você copiou. Depois, clique em Embutir código:

Criador de Sites da Hostinger: janela de código embutido com botão Embutir código destacado

5. Por último, atualize seu site.

OBSERVAÇÕES: