Adicionar animações no Criador de Sites<\/a><\/b><\/p>\n<\/li>\n Adicionar animações de terceiros<\/a><\/b><\/p>\n<\/li>\n<\/ul> \n<\/p> Você pode habilitar animações nativas de duas maneiras:<\/p> Adicionada ao site todo<\/a><\/b>: uma única animação selecionada se aplica a todos os elementos em todo o site<\/p>\n<\/li>\n Adicionada em indíviduos<\/a><\/b>: 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<\/p>\n<\/li>\n<\/ul> OBSERVAÇÃO:<\/b> os elementos do código incorporado<\/a><\/b> não suportam as animações nativas<\/p> \n<\/p> \n<\/p> No criador de sites, expanda o painel de Estilos <\/b>do site à esquerda. Abra a guia de Animações <\/b>e selecione o estilo de animação preferido (fade, slide, scale):<\/p> \n<\/p> 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:<\/p> \n<\/p> Depois de habilitar ou desabilitar as animações, atualize seu site<\/a><\/b> 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<\/a><\/b> ou abra o site ao vivo. \n<\/p> No construtor de sites, clique no elemento em questão e selecione Editar <\/b>ou Alterar <\/b>para abrir suas configurações. Em seguida, encontre as configurações de Animações <\/b>e habilite a preferida. Por exemplo, as configurações do elemento de texto:<\/p> \n<\/p> Configurações do elemento de imagem:<\/p> \n<\/p> Configurações do elemento do botão:<\/p> \n<\/p> E assim por diante! Depois de habilitar as animações, atualize seu site<\/a><\/b> 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<\/a><\/b> ou abra o site ao vivo.<\/p> \n<\/p> \n<\/p> 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<\/a> <\/b>(ferramenta em inglês).<\/p> \n<\/p> 1. Faça login no Lordicon<\/a><\/b> e clique na animação escolhida (se necessário, personalize a animação):<\/p> \n<\/p> \n<\/p> 2. Clique em Download → HTML → Copy HTML code <\/b>[Copiar código HTML]:<\/p> \n<\/p> \n<\/p> 3. Depois, abra o Criador de Sites da Hostinger e adicione um elemento de Código embutido<\/a> a qualquer lugar da página.<\/p> \n<\/p> 4. No campo Adicione seu código aqui<\/b>, cole o código HTML que você copiou. Depois, clique em Embutir código:<\/b><\/p> \n<\/p> \n<\/p> 5. Por último, atualize seu site<\/a>.<\/p> \n<\/p> OBSERVAÇÕES:<\/b><\/p> Se quiser, você pode mudar o tamanho da animação<\/a><\/p>\n<\/li>\n Você não conseguirá ver as animações no editor de sites. Use o<\/a> modo de pré-visualização<\/a> para ver as animações na página<\/p>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":" Aprenda a adicionar anima\u00e7\u00f5es ao seu site usando o Criador de Sites da Hostinger<\/p>\n","protected":false},"author":581,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[261],"tags":[],"class_list":["post-1806","post","type-post","status-publish","format-standard","hentry","category-integracoes"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/6463358-hostinger-website-builder-how-to-add-animations\/","default":1},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/support\/6463358-hostinger-creador-de-sitios-web-como-anadir-animaciones\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/support\/6463358-hostinger-createur-de-site-web-comment-ajouter-des-animations\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/support\/6463358-hostinger-website-builder-cara-menambahkan-animasi\/","default":0},{"locale":"lt-LT","link":"https:\/\/www.hostinger.com\/lt\/support\/6463358-hostinger-svetainiu-kurimo-irankis-kaip-prideti-animaciju\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/br\/support\/6463358-hostinger-criador-de-sites-como-adicionar-animacoes\/","default":0},{"locale":"uk-UA","link":"https:\/\/www.hostinger.com\/ua\/support\/6463358-----\/","default":0}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/br\/support\/wp-json\/wp\/v2\/posts\/1806","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/br\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/br\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/support\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/support\/wp-json\/wp\/v2\/comments?post=1806"}],"version-history":[{"count":1,"href":"https:\/\/www.hostinger.com\/br\/support\/wp-json\/wp\/v2\/posts\/1806\/revisions"}],"predecessor-version":[{"id":3190,"href":"https:\/\/www.hostinger.com\/br\/support\/wp-json\/wp\/v2\/posts\/1806\/revisions\/3190"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/support\/wp-json\/wp\/v2\/media?parent=1806"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/support\/wp-json\/wp\/v2\/categories?post=1806"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/support\/wp-json\/wp\/v2\/tags?post=1806"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Adicionar animações no Criador de Sites:<\/h1>
\n
Adicionar animações para o site como um todo<\/h2>
![](\"\/br\/support\/wp-content\/uploads\/sites\/59\/2022\/12\/8e26fe53-ab0e-465b-bba9-794d5296a8ff.jpg\")
<\/div>![](\"\/br\/support\/wp-content\/uploads\/sites\/59\/2022\/12\/39275bc3-3a0e-4b37-a1f2-76562b17d1a2.jpg\")
<\/div>
<\/p>Adicionar animações para elementos em específico<\/h2>
<\/div>![](\"\/br\/support\/wp-content\/uploads\/sites\/59\/2022\/12\/2b158d6e-570a-4e48-b0ae-0ebf16ab2ad5.jpg\")
<\/div>![](\"\/br\/support\/wp-content\/uploads\/sites\/59\/2022\/12\/582878ea-24e5-47b5-b8ef-6115ef2eb873.jpg\")
<\/div>Adicionar elementos de animação de terceiros<\/h1>
![](\"\/br\/support\/wp-content\/uploads\/sites\/59\/2022\/12\/6adb5b7d-e0ae-4e3a-9cf1-46a9284b9b03.jpg\")
<\/div>![](\"\/br\/support\/wp-content\/uploads\/sites\/59\/2022\/12\/10fc6d16-5b72-4424-ab8c-4964b69e46ed.jpg\")
<\/div>![](\"\/br\/support\/wp-content\/uploads\/sites\/59\/2022\/12\/d6167b50-b73b-4165-8835-25c9f6c7b3b1.jpg\")
<\/div>\n