How To Create a Slide-In With Divi

by | May 1, 2020 | Divi tutorials | 16 comments

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.

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:

Step 4: Add the CSS code

Go to Divi > Theme Options > General and scroll down to the CSS field and add the following CSS.

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.

16 Comments

  1. Freddy

    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

    Reply
    • Mark

      Hi Freddy,

      Did you followed all the steps? If you did, try the following:

      Clear browser cache and other caches (plugins, etc)

      Reply
      • Freddy

        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

        Reply
      • Freddy

        After analysis, it is the css which does not apply

        Reply
      • Freddy

        I found the solution !!!

        your code is bad at the start

        It’s /* ##### SLIDE-IN DESKTOP ##### */
        and note * ##### SLIDE-IN DESKTOP ##### */

        Reply
      • Mark

        Thanks for the heads up.

        I didn’t copy/paste all correctly.

        I have fixed it as well in the tutorial.

        Reply
        • Freddy

          Great

  2. Mario

    Step 2 “Then go to “Your Saved Layouts” and choose Slide-in with label” is confusing. It replaces the footer with the label form?

    Reply
    • Mark

      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.

      Reply
      • Mario

        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.

        Reply
  3. Sean Craig

    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?

    Reply
    • Sean Craig

      Also, the mobile version is not sticky. It appears at the bottom if scroll down though.

      Reply
    • Mark

      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.

      Reply
  4. Sean Craig

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

    Reply
    • Mark

      I made a small tweak in the CSS. Try to copy/paste the CSS again.

      Reply
      • Sean Craig

        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?

        Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

2 Shares
Share
Tweet
Pin2
Buffer