How To Create a Slide-In With Divi
Today we are going to build a slide-in with a label for your Divi website. Slide-ins are a great way to grab the attention of your visitors.
The slide-in will stay in a fixed position when you scroll down. I will be placing a contactform in this slide-in, but you can place any Divi module in here.
Here you can see a demo of the slide-in that we are going to create.
Step 1: Download and import the slide-in layout
Download the slide-in layout json file here.
Unpack the download folder.
Go to Divi > Divi Library. Click on the import/export options.
Click on Import and upload Slide-in with label layout.json.
Don’t’ forget to publish/update your section.
Step 2: Add the slide-in to the global footer
If you do not have used the global footer before click on “Add From Library” otherwise click on the edit symbol to open the global footer.
Then go to “Your Saved Layouts” and choose Slide-in with label.
Important: Uncheck Replace existing content
Step 3: Add the jQuery code
Add the following jQuery code in the “Add code to the < head > of your blog” field:
Step 4: Add the CSS code
Step 5 Customize the slide-in
Switch to wireframe mode.
I have created 2 slide-ins. One for desktop and one for tablet and mobile.
Let me know in the comments if you have any question.