Elements - Animations and Overlays
Animations in Sitejet
Animations in webdesign 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 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.
Topics covered in the video:
- Fade in/out Animation (0:07)
- Slide Up/Down Animation and working with Accordions (2:35)
- Zoom In/Out Animation and Copy & Paste Animation settings (5:26)
- Slide Left to Right / Right to Left Animations and editing multiple elements (6:19)
- Pulse Animation (8:23)
- Blink Animation (9:50)
- Overlays and popups (10:32)
Setting up a popup that cleans itself up
Sitejet offers a variety of useful animations that are easily available and pleasantly reliable. Among them we have "Open as overlay", which you can find in every element's settings, You can access those by double-clicking the element or pressing [ENTER] after selecting it. The settings appear on the left side of the window.
To make things easier we already have a preset built that provides you with an already animated container and some essential contents, like headline and text. Those can be altered, deleted or added to, whatever you desire.
You can find this preset (or any other) by clicking " + Add content" (or [CTRL + ENTER] ) on your top-left toolbar. Choose the Presets on the left and reveal the contents of Features. Alternatively there is a Search Bar right beneath the tabs. After finding it you can double-click the Overlay-Preset to paste it after any selected element in the main editor (if none is selected it is pasted to the very bottom) or simply Drag & Drop it into the main area, whereever you like.
The preset will be outlined in a distinctive color and be labeled "Overlay". Don't worry, this outline and label will only be visible in the editor, not on the actual page itself. Now you can alter the contents of the overlay as you desire.
Once again you can double-click or press [ENTER] on the Overlay-Preset to open its settings. It is also indicated with a puzzle icon in the breadcrumbs at the bottom. Towards the bottom of our settings window we have two important tabs, one being Animation and the other being Settings.
- Animation lets you change the animation and its requirement to be triggered, as well as the Width of the popup. In our Overlay-Preset our custom CSS takes care of the latter. You can choose between several triggers: No automatic trigger, On page load or Element scrolled into view. We keep 'on page load' for now to make it pop up right at the start.
- Settings gives us the option to set an expiry date to this element. Let's ignore Minimum and Maximum count for now. You can choose between Without and Fix. No expiry means, the popup will stay as long as you do not disable the animation or delete the element. A fixed expiry date will enable you to choose a date on which the Overlay shall be removed. This will delete the element automaticaly at the specified time.
Tipp: you do not have to delete the element for it to be disabled. In case you need popups regulary and do not want to have to create it each time anew, simply put the Animation Trigger to "No automatic trigger". The element will stay visible in editor mode and does not appear anywhere on the live website.
Don't forget to easily test the popup in our Preview Mode under View or by pressing [CTRL + P].