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 contact form module 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.
This slide-in will scroll with the content of your page. I also created a mobile version for this slide-in so it will look also good on mobile. You can customize this slide-in with the Divi builder.
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
Go to Divi > Theme Builder > 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
Go to Divi > Theme Options > Integration
Add the following jQuery code in the “Add code to the < head > of your blog” field:
<script>
// Slide-in
jQuery(document).ready(function(){
jQuery(".slide_in_label").click(function(){
jQuery(".slide_in_container").toggleClass("show_form");
});
});
jQuery(document).ready(function(){
jQuery(".close_form_icon").click(function(){
jQuery(".slide_in_container").removeClass("show_form");
});
});
jQuery(document).ready(function(){
jQuery(".slide_in_mobile_label").click(function(){
jQuery(".slide_in_mobile").toggleClass("show_form");
});
});
jQuery(document).ready(function(){
jQuery(".close_form_icon_mobile").click(function(){
jQuery(".slide_in_mobile").removeClass("show_form");
});
});
</script>Step 4: Add the CSS code
Go to Divi > Theme Options > General and scroll down to the CSS field and add the following CSS.
/* ##### SLIDE-IN DESKTOP ##### */
.slide_in_container {
position:fixed;
top: 25%;
right:0px;
z-index:9999999;
transform: translateX(100%);
transition: 0.5s ease-out;
}
.show_form {
transform: translateX(0px);
}
.slide_in_label {
transform: translate(-100%, -100%) rotate(-90deg);
transform-origin: right bottom 0px;
position: absolute !important;
top: 0px;
}
.slide_in_label:hover {
cursor: pointer;
}
.custom_contact_form p input, .custom_contact_form p textarea {
padding: 15px 10px 10px 10px !important;
}
.fa-times-circle {
font-size: 22px;
cursor: pointer;
color: #000 !important;
}
/* ##### SLIDE-IN MOBILE ##### */
@media (max-width: 980px) {
.slide_in_mobile {
position:fixed;
bottom: 0 !important;
right:0px !important;
left:0px !important;
z-index:99999999;
transform: translateY(100%);
transition: 0.5s ease-out;
}
.slide_in_mobile_label {
transform: translate(0%, -100%) rotate(0deg);
transform-origin: center bottom 0px;
position: absolute !important;
top: 0px;
width: 100%;
text-align: center;
justify-content: center;
padding: 1.3rem 1rem 1rem 1em;
margin: 0px;
display: flex;
}
.show_form {
transform: translateY(0px);
}
.slide_in_mobile_label :hover {
cursor: pointer;
}
.cross_icon .fa-times-circle {
float: right !important;
margin-right: 35px !important;
}}
@media (max-height: 560px) {
.slide_in_mobile {
display: none;
}}
.et-tb .slide_in_container,
.et-tb .slide_in_mobile {
display: none;
}Step 5 Customize the slide-in
To customize the slide-in go to Divi > Theme Builder > Global Footer
Switch to wireframe mode.
I have created 2 slide-ins. One for desktop and one for tablet and mobile.
And that is it!
Let me know in the comments if you have any question.
Hello
Thanks for the work.
Let me know it doesn’t work
The form appears at the bottom of the page as another section.
It is not on the side with the slide …
Thank you for your help
Freddy
Hi Freddy,
Did you followed all the steps? If you did, try the following:
Clear browser cache and other caches (plugins, etc)
Hello
I followed step by step
The section is displayed at the bottom of the page, it may not be on the side and the slide function does not work.
It’s like the jquery code doesn’t work
After analysis, it is the css which does not apply
I found the solution !!!
your code is bad at the start
It’s /* ##### SLIDE-IN DESKTOP ##### */
and note * ##### SLIDE-IN DESKTOP ##### */
Thanks for the heads up.
I didn’t copy/paste all correctly.
I have fixed it as well in the tutorial.
Great
Step 2 “Then go to “Your Saved Layouts” and choose Slide-in with label” is confusing. It replaces the footer with the label form?
Hi Mario,
You need to uncheck ” Replace existing content” (see the image at step 2). Otherwise it will overwrite you footer. The slide-in will be positioned through CSS.
I’m using the grow extended theme. What I did:
1. Add Library on Global Footer, From You Saved Layouts choose Slide-in label. (Replace existing content is not visible)
2. Edit global footer
3. Like step 2 with the steps 1,2,3 (Replace existing content is checked)
4. Save it
The sidebar form is now shown, but the original footer is gone.
This is kind of working. I’m finding that after I paste the CSS into the site, it breaks the Divi Theme Builder. It opens the footer builder, but just see a white screen. If I delete the CSS, then it works normally again.
Any thoughts on how to resolve this?
Also, the mobile version is not sticky. It appears at the bottom if scroll down though.
You need to switch to wireframe in order to see the slide-in modules. See step 5.
On mobile the slide-in label is at the bottom that is indeed how I designed it.
….update. White screen unless I delete the slide-in code from CSS still an issue.
I HAD the slide-in working on mobile sliding in from the right side, similar to desktop. But after adding a child theme and styling the ‘back-to-top’ button, now the slide-in on mobile is not appearing.
I made a small tweak in the CSS. Try to copy/paste the CSS again.
Thanks for the reply Mark. I modified it so much for my application, and want to try to avoid starting over. Would you be able to tell me what you changed?
Hey i can’t find the json file for the slide in. I think you have deleted it. please provide it, so that i can use it.
Hi Mohit,
Thanks for the heads up.
You should be able to download it now again.