In Hostinger Website Builder, there are several ways to use animations:
Enabling Native Animations
You can enable native animations in two ways:
Globally (site-wide): a single selected animation applies to all elements throughout the whole website
Locally (per element): apply animations for each of your website elements individually; this way, you can set different types of animations for different elements
Embed code elements don't support native animations 💡
Enabling Site-Wide Animations
Within the website builder, expand the Website styles panel on the left. Open the Animations tab and select from the preferred animation style (fade, slide, scale):
This way, the selected animation is applied to all elements and sections throughout your website. You can disable the animation for a particular element in its local settings. For instance, that's how you can turn it off for the text element:
After enabling or disabling animations, update your website for the changes to reflect online. To check how the website looks with animations, go to the preview mode or open the live website.
Enabling Animations for Particular Elements
Within the website builder, click on the element in question and select Edit or Change to open its settings. Then, find the Animations settings and enable the preferred one. For example, the text element settings:
Image element settings:
Button element settings:
And so on! After enabling animations, update your website for the changes to reflect online. To check how the website looks with animations, go to the preview mode or open the live website.
Embedding Third-Party Animated Elements
You can embed free animations into your website using third-party tools. In this example, Lordicon animations are used.
1. Log into Lordicon and click on any animation you like; customize it if necessary:
2. Click on HTML and copy the code:
3. Now, open the website builder and add an embed code element to the preferred place on your webpage.
4. Paste the animation code to the embed element, and the animation will be displayed on your page:
Feel free to resize the code element if necessary.
5. Finally, update your website for the changes to reflect online.
To check how the website looks with animations, go to the preview mode or open the live website.