How are you animating the home page in the demo? I understand you are using Revolution Slider with the large image, but what about the remaining content? They look like they are widgets, how are they animated in lazy load?
A tutorial on how you set up the home page would be nice.
PS: This is a very different theme for you, and I LOVE the features and the look of it, but lots more direction is needed. At the very least if you are using external plugins for certain features/functionality a simple hint about what it is and where it’s used would be a big help. Thanks for your continued support.
Please use the plugin in wordpress which names are mentioned below:
bbPress, Breadcrumb NavXT, Contact Form 7, Font Awesome Shortcodes, Jetpack by WordPress.com, Remove Widget Titles, Revolution Slider, UpdraftPlus – Backup/Restore, Widget CSS Classes, Widget Importer & Exporter, WooCommerce, WordPress Importer, WP Google Maps.
We have to use banner-wide-widget for slider image in home page as well as google map in contact us page. After the slider image we have to use call-to-action- widget.
Then we have use Top1 to Top4 widget etc.
Please follow this link styledthemes.com/lavish-pro-setup
Doing some research it seems that the jetpack might be adding that feature. It’s referred to as infinite scroll and it seems that there is a tutorial for this online. I’m going to research it some more and post a link if it’s the right tool for the job. The page builder plugin doesn’t seem to allow for lazy load features using CSS. I tried their support and there is no reference to it.
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.