Animations and Overlays
In this article, we show you, how to easily add simple animations and overlays to draw your visitor's attention.
Table of contents
Video: Animations in Sitejet
Animations in web design are a suitable way to get your visitor's attention or emphasize a certain part of your page. Sitejet offers a selection of useful animations that can be applied quickly in a couple of clicks and produce some amazing results.
In this video, we are going to show you all animations available at the moment and in what manner you can apply them. This ranges from subtle fade-ins and very useful accordion features to popups and overlays for immediately drawing all attention to a particular element.
If you need special animations or looking for support on how to add animations you found the code for on the internet, please get in touch with our Community.
This video was recorded in the old UI. We will update this video soon.
Setting up an overlay or pop-up
Sitejet offers a variety of useful animations that are easily available and pleasantly reliable. Among them, we have "Overlay", which you can find in every element's settings. There are also predefined overlays which 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 elements with predefined settings anywhere on your website. However, we recommend for a better overview to put them at the end of your page. Let's choose the sweet puppy overlay. Drag-and-drop that preset into your website and head right into the animations.
Here, you have different ways to animate this container. As we want to have this sweet puppy as an overlay opening, 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 want to keep the overlay, because you like the puppy when visiting the Website Builder but do not want to use it as an overlay now, just use the trigger "no automatic trigger" under Animation.
Under schedule, you are also able to set a certain time, when this overlay is shown on your website and when it disappears.
If you like, you can easily test the overlay in our "Preview Mode" under view. Or just press [CTRL + P]. If you are looking for special animations or the overlay, feel free to visit our Community to get some insight from our expert Sitejetters.
Become a part of our Community!
Exchange ideas with other web designers about current developments, tips, and tricks and show your favorite sites. Get advice and talk to us about possible features you would like to see on Sitejet. You can join the Sitejetters community here.