Hello Guys! I am back after 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 find out, 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 a class to each column. Class:  ‘ds-slidein-wrapper

Step Two 

Let’s add a blurb module to one of the columns. Style it the way you want. But don’t forgot to give it the class name ‘ds-slidein-base’ and give a fixed height of 250px. (This can adjust to match with your content.)

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

Step Three – How to add slide in overlays 

Add below CSS snippet to make the text module set above the blurb module. It will overlap the text module on the blurb.

.ds-slidein-overlay {
  position: absolute;
  z-index: 1;
  padding: 40px;
  display: none;
}

To work the slide in animation we need to add a little bit of jQuery here. Add a Custom Code Module somewhere else in the page and paste the below code. You can use any method here to add jQuery to your WordPress site. Instead of adding a code module you can paste in Divi > Theme Options > Integration > Add code to the < body> Section. Same for the CSS. You can paste those on Divi Theme Options too.

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

Also, don’t forget to read our blog to find more exciting things.

Leave a Reply

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

Pin It on Pinterest

Share This