How to use scrollify.js with wordpress and elementor?

by raphael_tillman , in category: PHP CMS , 4 months ago

How to use scrollify.js with wordpress and elementor?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by herminia_bruen , 4 months ago

@raphael_tillman 

To use scrollify.js with WordPress and Elementor, you can follow these steps:

  1. Install and activate the Scrollify.js plugin on your WordPress site. You can download the plugin from the WordPress plugin repository or use the plugin installer in your WordPress dashboard.
  2. Once the plugin is installed and activated, go to the settings page for the plugin. Here, you can configure the options for the Scrollify.js plugin, such as the scroll speed, easing effect, and other settings.
  3. Create a new page or edit an existing page using the Elementor page builder. Add the content you want to include on the page, such as text, images, and other elements.
  4. In the Elementor editor, add a new section or column where you want to apply the scrollify.js effect. You can add a new section by clicking on the "+" button and selecting the section or column layout you want to use.
  5. In the section or column settings, go to the Advanced tab and add a custom CSS class to the section or column. For example, you can add a class called "scrollify-section" to the section or column.
  6. Open the page or post where you want to apply the scrollify.js effect in the WordPress dashboard. Go to the Text mode of the editor and add the following code to the page:
1
2
3
4
5
6
7
8
9
<script>
jQuery(document).ready(function($) {
    $('.scrollify-section').scrollify({
        section : ".scrollify-section",
        scrollSpeed: 500,
        easing: "easeOutExpo"
    });
});
</script>


Replace '.scrollify-section' with the custom CSS class you added to the section or column in Elementor.

  1. Update or publish the page or post. The scrollify.js effect should now be applied to the section or column you added the custom CSS class to in the Elementor editor.


That's it! You have successfully implemented scrollify.js on your WordPress site using Elementor.