Animations and Overlays

In this article, we show you, how to easily add simple animations and overlays to draw your visitor's attention.

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.

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.