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.VIEW DEMOThis 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.