Reply To: Home Page lazy load

Home Forums WordPress Themes – Premium Lavish Pro Home Page lazy load Reply To: Home Page lazy load

#16596
Brian
Member

The video link is helpful, but incomplete for this application. It shows that the animate.css does work to add animation to the page elements. However, the video shows it using HTML code, not with the Site Origin Page Builder.

So I messaged with support again and this time was given the solution. The animate.css stylesheet is included with the Lavish Pro template (and maybe the others too). So there is no need to manually download or install it. You just need to go to your page element using Page Builder. In the Attributes section under Widget Styles you need to add code in the Widget Class box. Here is how to do it:

If you want to fade in an element such as text, or an image, you just need to add the following: “wow animate fadeInDown”. That will cause the element to fade in when the end user reaches it scrolling through the page. The “wow” was explained to me as a rule that is required to activate the CSS command. The “animate” is required to begin animation, and the “fadeInDown” is the type of animation that will take place. There is a list of commands using this link here: https://github.com/daneden/animate.css

If you scroll down the page you will see a longer list of different animations. Just make sure to couple them with “wow animate (your selected animation)” and you should be fine. It’s very easy once you know the correct code.