Hello Divi lovers. Lets add a slide-in section with a email opt-in or any other content to create a lead magnet on your website. Without using any third party plugins.  As you already know slide-in forms play a main role in lead generation.

Demo

Step One

First thing first. Design you landing page or the lead generation page. Also you can use this method on any website, any page on your website without any problem.

Step Two

Lets design our slide-in section.

Add a New Section with a one column row. (You can design this the way you want. I am telling you the way I did 🙂 ). Set a background color you wish. then go to the Advanced setting and give a section IDlead-form‘ (without # sign).  Scroll down a bit and expand the Custom CSS section and put the below code inside the Main Element.

* I set display to none once all the design completed. You can do the same way if you like.

Then I added a blurb module at the top. No content added but the icon.

I selected the icon which is looks like a close button.  Icon color – Black, Icon Placement – Left, Use Icon Font Size – Yes, Icons Font Size – 29px.

Again, go the the Blurb Module setting > Advanced Setting.  Add the below CSS to the Main Element in Custom CSS.

Now go ahead and add whatever you want. I have added some text and a button. You can have a Email Optin or a contact form here too.

Finally, this is what I did.

Step Three

Lets make the magic happened, I used some jQuery here. Divi already have jQuery pre installed so you have nothing to do here but add the code. You can paste the code at Divi > Theme Option > Integration and on the ‘head‘ section.

But if you are going to use the Slide-in Section only on one specific page, I think the best way is to use a Code Module. Thats what I did in my demo setup.

Get a new Code module and paste the below code and save.

Thats it! Now you can add your own creativity to it and do a better thing.