{"id":885,"date":"2022-08-11T12:29:20","date_gmt":"2022-08-11T12:29:20","guid":{"rendered":"https:\/\/blog.hostinger.io\/support\/2022\/08\/11\/6463358-hostinger-website-builder-how-to-add-animations\/"},"modified":"2026-08-27T07:48:57","modified_gmt":"2026-08-27T07:48:57","slug":"6463358-hostinger-ai-builder-manual-mode-how-to-add-animations","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/6463358-hostinger-ai-builder-manual-mode-how-to-add-animations\/","title":{"rendered":"Hostinger AI Builder: How to add animations in manual mode"},"content":{"rendered":"<p class=\"no-margin\">Add animations to your Hostinger AI Builder manual mode website using native animation settings or third-party animated elements.<\/p><h2 id=\"h_f3b0c06ca6\">Enabling native animations<\/h2><p class=\"no-margin\">You can enable native animations in two ways:<\/p><ul>\n<li>\n<p class=\"no-margin\"><b><a class=\"intercom-content-link\" href=\"#h_d4686449f2\" target=\"_blank\" rel=\"noopener\">Globally (site-wide)<\/a><\/b>: a single selected animation applies to all elements throughout the whole website<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a class=\"intercom-content-link\" href=\"#h_a9375d0327\" target=\"_blank\" rel=\"noopener\">Locally (per element)<\/a><\/b>: apply animations for each of your website elements individually; this way, you can set different types of animations for different elements<\/p>\n<\/li>\n<\/ul><div class=\"intercom-interblocks-callout\" style=\"background-color: #e3e7fa80;border-color: #334bfa33\">\n<p class=\"no-margin\"><b><a class=\"intercom-content-link\" href=\"\/support\/6463152-website-builder-how-to-embed-a-custom-code\/\" target=\"_blank\" rel=\"noopener\">Embed code elements<\/a><\/b> don&rsquo;t support native animations &#128161;<\/p>\n<\/div><h3 id=\"h_d4686449f2\">Enabling site-wide animations<\/h3><ol>\n<li class=\"no-margin\">Within the AI builder, expand the <b>Website styles<\/b> panel on the left.<\/li>\n<li class=\"no-margin\">Open the <strong>Animations<\/strong> tab and select from the preferred animation style: fade, slide, scale, slide left, slide right, blur in, or rise.<br>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-17183\" src=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-27_14-46.png\" alt=\"\" width=\"453\" height=\"870\" srcset=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-27_14-46.png 453w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-27_14-46-156x300.png 156w\" sizes=\"(max-width: 453px) 100vw, 453px\" \/><\/li>\n<\/ol><p class=\"no-margin\">This way, the selected animation is <b>applied to all elements and sections<\/b> throughout your website. You can <b>disable<\/b> the animation for a particular element<b> in its <a class=\"intercom-content-link\" href=\"#h_a9375d0327\" target=\"_blank\" rel=\"noopener\">local settings <\/a><\/b>by choosing<b> No animation<\/b>. For instance, that&rsquo;s how you can turn it off<b> <\/b>for the text element:<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" class=\"alignnone size-full wp-image-17184\" src=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-27_14-47.png\" alt=\"\" width=\"1194\" height=\"478\" srcset=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-27_14-47.png 1194w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-27_14-47-300x120.png 300w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-27_14-47-1024x410.png 1024w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-27_14-47-768x307.png 768w\" sizes=\"(max-width: 1194px) 100vw, 1194px\" \/><\/div><p class=\"no-margin\">After enabling or disabling animations, <b><a class=\"intercom-content-link\" href=\"\/support\/6435697-website-builder-how-to-update-a-website\/\" target=\"_blank\" rel=\"noopener\">update your website<\/a><\/b> for the changes to reflect online. To check how the website looks with animations, go to the <b><a class=\"intercom-content-link\" href=\"\/support\/6475345-website-builder-how-to-preview-a-website\/\" target=\"_blank\" rel=\"noopener\">preview mode<\/a> <\/b>or open the live website.<\/p><h3 id=\"h_a9375d0327\">Enabling animations for particular elements<\/h3><p class=\"no-margin\">Within the AI builder, click on the element in question and select <b>Edit <\/b>or <b>Change <\/b>to open its settings. Then, find the <b>Animations<\/b> settings and enable the preferred one. For image and card elements, you can also set a hover effect and a loop effect. For example, the text element settings:<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" class=\"alignnone size-full wp-image-17184\" src=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-27_14-47.png\" alt=\"\" width=\"1194\" height=\"478\" srcset=\"https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-27_14-47.png 1194w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-27_14-47-300x120.png 300w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-27_14-47-1024x410.png 1024w, https:\/\/www.hostinger.com\/support\/wp-content\/uploads\/sites\/55\/2026\/08\/2026-08-27_14-47-768x307.png 768w\" sizes=\"(max-width: 1194px) 100vw, 1194px\" \/><\/div><p class=\"no-margin\">Image element settings:<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/068647ba-5f30-4d80-af6e-3be5d6ded62a.jpg\" alt=\"Hostinger Website Builder image settings with the Animation tab selected and Fade highlighted\" data-media-id=\"3604\"><\/div><p class=\"no-margin\">Button element settings:<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/e28db0eb-6a36-4602-8a0f-b40cb8ecefd5.jpg\" alt=\"Hostinger Website Builder button settings with the Animation tab selected and Slide animation highlighted\" data-media-id=\"3605\"><\/div><p class=\"no-margin\">And so on! After enabling animations, <b><a class=\"intercom-content-link\" href=\"\/support\/6435697-website-builder-how-to-update-a-website\/\" target=\"_blank\" rel=\"noopener\">update your website<\/a><\/b> for the changes to reflect online. To check how the website looks with animations, go to the <b><a class=\"intercom-content-link\" href=\"\/support\/6475345-website-builder-how-to-preview-a-website\/\" target=\"_blank\" rel=\"noopener\">preview mode<\/a> <\/b>or open the live website.<\/p><h2 id=\"h_9f219a050b\">Embedding third-party animated elements<\/h2><p class=\"no-margin\">You can embed free animations into your website using third-party tools. In this example, <b><a class=\"intercom-content-link\" href=\"https:\/\/lordicon.com\/icons\" target=\"_blank\" rel=\"noopener\">Lordicon<\/a><\/b> animations are used.<\/p><ol>\n<li class=\"no-margin\">Log into Lordicon and click on any animation you like; customize it if necessary:<br>\n<img decoding=\"async\" src=\"https:\/\/blog.hostinger.io\/pt\/support\/wp-content\/uploads\/sites\/59\/2022\/12\/6adb5b7d-e0ae-4e3a-9cf1-46a9284b9b03.jpg\" alt=\"The library of animations at Lordicon\"><\/li>\n<li class=\"no-margin\">Click on<b> HTML <\/b>and copy the code:<br>\n<img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/a32f72c2-9d7e-4cd8-a7a7-012497931d0a.jpg\" alt=\"Embed on Web dialog with Copy HTML code button highlighted for an animation trigger setup\" data-media-id=\"3606\"><\/li>\n<li class=\"no-margin\">Now, open the AI builder and add an <b><a class=\"intercom-content-link\" href=\"\/support\/6463152-website-builder-embed-code\/\" target=\"_blank\" rel=\"noopener\">embed code element<\/a><\/b> to the preferred place on your webpage.<\/li>\n<li class=\"no-margin\">Paste the animation code to the embed element, and the animation will be displayed on your page:<br>\n<img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2022\/08\/79aae8e2-3de0-4ed7-b11c-b282c66f5019.jpg\" alt=\"Hostinger Website Builder embed code dialog with the Embed code button highlighted\" data-media-id=\"3607\"><br>\nFeel free to <b><a class=\"intercom-content-link\" href=\"\/support\/6491230-website-builder-how-to-resize-elements-and-sections\/#h_04ed0931b9\" target=\"_blank\" rel=\"noopener\">resize the code element<\/a> <\/b>if necessary.<\/li>\n<li class=\"no-margin\">Finally,<b> <a class=\"intercom-content-link\" href=\"\/support\/6435697-website-builder-updating-a-website\/\" target=\"_blank\" rel=\"noopener\">update your website<\/a><\/b> for the changes to reflect online.<\/li>\n<\/ol><p class=\"no-margin\">To check how the website looks with animations, go to the <b><a class=\"intercom-content-link\" href=\"\/support\/6475345-website-builder-how-to-preview-a-website\/\" target=\"_blank\" rel=\"noopener\">preview mode<\/a> <\/b>or open the live website.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Add native or third-party animations to your Hostinger AI Builder manual mode website.<\/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":[293],"tags":[],"class_list":["post-885","post","type-post","status-publish","format-standard","hentry","category-ai-builder"],"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-BR","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\/support\/wp-json\/wp\/v2\/posts\/885","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/comments?post=885"}],"version-history":[{"count":4,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/885\/revisions"}],"predecessor-version":[{"id":17185,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/885\/revisions\/17185"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/media?parent=885"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/categories?post=885"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/tags?post=885"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}