Compatibility:

WebSite X5 Evo and Pro

Sometimes adding a little of "magic" onto your website is really simple. Something you can easily achieve is adding for instance a reveal effect onto an image, a button or any other page element. 


That's what you need to do:

  • Open the page you want to work on and, on the page layout, select the Object corresponding to the content you want to apply the effect for.
  • Click on the   button on the toolbar.
  • In the window that appears, stay in the Appearance section, click on Enable Effect, and use the menu to choose whether to start the effect when the object appears or to link its activation to page scrolling. In the first case, the effect begins as soon as the object is displayed; in the second case, it starts when the object becomes visible during scrolling and ends when the object reaches the middle of the window.
  • Now, scroll through the list of effects and, using the preview, select the one you prefer.
  • Set how long the effect should last and if it should be repeated.
  • Finally, if you are working on particular objects (such as an image), you can activate the Enable Lazy Loading option. With the Lazy Loading, images will be loaded only when they will be actually displayed on the page. By activating this option, the images are displayed progressively with a nice fade effect.


#tip - Lazy Loading. By using the Enable Lazy Loading option, the images added on a page won't be loaded right away but only gradually as they are displayed on the page: in this way, the page will open faster, improving the navigation experience.


  • To further customize the object's behavior, open the Position section and enable the Set object as sticky option: this way, once the object becomes visible on the page, it will remain fixed in place until the tallest object in the same row starts to disappear.
  • In this case, define the position where the object should remain fixed by setting a pixel value for the Distance from top option.


#tip – In the layout grid, objects with an associated effect are easy to recognize thanks to the  icon overlaid on the cell they occupy.


#tip – Accessibility. Modern operating systems include an accessibility setting to reduce or disable visual effects, such as animations and transitions. If this option is enabled, any effects applied to objects will not be played.