[Limited Time Offer] Get 40% off MEMBERSHIP PLUS before it's gone! 👉Get This Deal
Mark Hendriksen Logo

How To Create a Slide-In With Divi

Mark Hendriksen | May 1, 2020 | 18 Comments
Disclosure Note: Sometimes, I include links in my articles that can earn me money. It won't cost you anything, but it helps me pay for coffee ☕ so I can make more helpful content.

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.

Add slide-in to the global footer

Then go to “Your Saved Layouts” and choose Slide-in with label.

Important: Uncheck Replace existing content

Choose and import the slide-in

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:

// Slide-in


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 {
	top: 25%;
	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 {
	bottom: 0 !important;
	right:0px !important;
	left:0px !important;
	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.

Slide-in wireframe view

And that is it!

Let me know in the comments if you have any question.

You Might Also Like…

Article by

Mark Hendriksen

I am the founder here at MarkHendriksen.com a blog website for Web design, WordPress, and Divi. Learn more about Mark

18 thoughts on “How To Create a Slide-In With Divi”

  1. 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


  2. 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.

  3. 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?

    • 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.

  4. ….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.


Leave a Comment