/ / How to create slide-in overlays in Divi without plugins
Divi Tips and Tricks

How to create slide-in overlays in Divi without plugins

create slide-in overlays in Divi

Hello Guys! I am back after a few weeks with a new tutorial. Today I am going to teach you how to add slide-in overlays in Divi without plugins. You can try this with different modules. In my tutorial, I’m doing it with a blurb as the main content and text module as the slide-in overlay.

Let’s start and see how to add slide in overlays in Divi.

Step One – How to add slide-in overlays in Divi

Let’s start by adding a section and a row with 3 columns. No need to add a class to the row itself but add classes to each column. Class:  ‘ds-slidein-wrapper’

How to create slide-in overlays in Divi without plugins
How to create slide-in overlays in Divi without plugins

Step Two: Add your base content

Let’s add a blurb module to one of the columns. Style it the way you want. But don’t forget to give it the class name ‘ds-slidein-base’ and give a fixed height of 250px. (This can adjust to match with your content.) This is the base content. We are adding some overlay content that appears when hovering over this base content.

How to create slide-in overlays in Divi without plugins
How to create slide-in overlays in Divi without plugins

Step Three: Add the overlay

Now, let’s add the slide-in overlay section. In my version, I am adding a text module above the blurb and giving it the class ‘ds-slidein-overlay‘ and set the height to 250px. (adjust this to match with your blurb height. But both should similar in height)

How to create slide-in overlays in Divi without plugins
How to create slide-in overlays in Divi without plugins

We have to do a few more settings here. Go to Advanced > Position and set the position to absolute and z-index to 1. This will put the overlay content above the base content when hovering.

Next, go to Advanced > Custom CSS > Main Element and hide the overlay section by adding display: none; there.

OK, now duplicate these two modules to the next two columns. Below is the wireframe view of what I did in my demo.

Step Four – Let’s do the jQuery magic 

To work the slide in animation we need to add a little bit of jQuery here. Add a Custom Code Module below the main section and paste the below code.

jQuery(function($){
    $(".ds-slidein-wrapper").hover(function(){
        $(".ds-slidein-overlay").slideToggle();
    });
});

Important: If you are adding this inside a Code module, paste inside <script></script> tags.

You can use any method here to add jQuery to your WordPress site. Instead of adding a code module, you can use a simple plugin called Simple Custom CSS and JS. Go to Plugins > Add New and then search for Simple Custom CSS and JS plugin.

simple custom css and js
simple custom css and js

That’s how to add slide in overlays in Divi, guys!! Comments below if you need any help.

Learn how to add slide in promo banners in Divi without plugins

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *