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):
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:
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:
Configurações do elemento de imagem:
Configurações do elemento do 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):
2. Clique em Download → HTML → Copy HTML code [Copiar código HTML]:
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:
5. Por último, atualize seu site.
OBSERVAÇÕES:
Se quiser, você pode mudar o tamanho da animação
Você não conseguirá ver as animações no editor de sites. Use o modo de pré-visualização para ver as animações na página