In this article, we show you, how to easily add simple animations and overlays to draw your visitor's attention.
Table of contents
Animations in web design are a suitable way to get your visitor's attention or emphasize a certain part of your page. The Website Builder offers a selection of useful animations that can be applied quickly in a couple of clicks and produce some amazing results.
To add an animation to an element, double-click on it, select the Style tab and make sure you are in the Element settings. Scroll down to the Animation section.
Here you will find different Animation types:
- Don't animate
- Slide up/down
- Zoom in/out
- Slide left to right
- Slide right to left
- Slide top to bottom
- Slide bottom to top
- Open as overlay
Once you have selected an animation type, other settings will appear. If you for example select Slide left to right, you will see the settings:
- Initial: What should the initial state of the element be?
- Element hidden
- Element shown
- Duration: How long should the animation be?
- Delay: Should the animation start with a slight delay?
- Trigger: When should the animation be triggered?
- No automatic trigger: This option can be used if you want to e.g. open an overlay on a click
- On page load
- Element scrolled into view
When you have set up your animation, you can check how it looks when by clicking on the Preview option in the Animation section.
If you want to apply the same animation for multiple elements, you can simply click Copy, go to the animation section of another element, and Paste it there. This will apply the same animation settings from the first element to the second element without the need to set up everything manually again.
Elements with animations can be easily recognized by the star icon that you can see either when hovering over an element, in the Navigator panel, or in the Breadcrumb. With a click on the star icon, the settings panel with the animation will open directly.
Setting up an overlay or pop-up
The Website Builder offers a variety of useful animations that are easily available. Among them, we have Overlay, which you can find in every element's settings. There are also section templates that work perfectly as overlays and that you can use and customize to your needs. To find these, just click on Marketing in the left panel of the Website Builder.
You can add these section templates with predefined settings anywhere on your website. However, we recommend putting them at the end of your page for a better overview. Drag and drop a section template into your website and head right into the animations.
Here, you have different ways to animate this container. As we want to have to open as an overlay when a visitor visits the website, we choose Open as Overlay.
Now, you will get more settings to customize the container. If you like the overlay to open, when a visitor visits your website, please select Open on page load.
If you don't want to show the overlay directly on page load but when a user clicks on a button, follow these steps:
- For the overlay container, keep the Open as overlay setting and select the trigger No automatic trigger
- Then double-click on the button that should trigger the overlay
- In the left settings panel, select the Link tab
- There choose Element
- This will automatically activate the element picker that allows you to select an element on the website. In this case, select the overlay container.
If you like, you can easily test the overlay in preview mode by clicking on the eye icon in the top navigation or by pressing [CTRL] + [P].