{"id":17237,"date":"2020-05-01T20:01:48","date_gmt":"2020-05-01T18:01:48","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=17237"},"modified":"2025-04-24T06:39:59","modified_gmt":"2025-04-24T04:39:59","slug":"how-to-create-a-slide-in-with-divi","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/how-to-create-a-slide-in-with-divi\/","title":{"rendered":"How To Create a Slide-In With Divi"},"content":{"rendered":"\n

Today we are going to build a slide-in with a label for your Divi website<\/a>. Slide-ins are a great way to grab the attention of your visitors.<\/p>\n\n\n\n

The slide-in will stay in a fixed position when you scroll down. I will be placing a contact form module<\/a> in this slide-in, but you can place any Divi module in here.<\/p>\n\n\n\n

Here you can see a demo of the slide-in that we are going to create.<\/p>\n\n\n

\n\nView Demo<\/a>\n\n<\/div>\n\n\n
<\/div>\n\n\n\n

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<\/a>.<\/p>\n\n\n\n

Step 1: Download and import the slide-in layout<\/h2>\n\n\n\n

Download the slide-in layout JSON file\u00a0here<\/a>.<\/p>\n\n\n\n

Unpack the download folder.<\/p>\n\n\n\n

Go to Divi > Divi Library<\/strong>. Click on the import\/export options.<\/p>\n\n\n\n

Click on Import and upload Slide-in with label layout.json<\/strong>.<\/p>\n\n\n\n

Don\u2019t forget to publish\/update your section.<\/p>\n\n\n\n

Step 2: Add the slide-in to the global footer<\/h2>\n\n\n\n

Go to Divi > Theme Builder > Global Footer<\/p>\n\n\n\n

If you do not have used the global footer before click on \u201cAdd From Library\u201d Otherwise click on the edit symbol to open the global footer.<\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

Then go to \u201cYour Saved Layouts\u201d and choose Slide-in with label.<\/p>\n\n\n\n

Important: Uncheck Replace existing content<\/strong><\/p>\n\n\n\n

\"Choose<\/figure>\n\n\n\n

Step 3: Add the jQuery code<\/h2>\n\n\n\n

Go to Divi > Theme Options > Integration<\/p>\n\n\n\n

Add the following jQuery code in the \u201cAdd code to the < head > of your blog\u201d field:<\/p>\n\n\n\n

<script>\n\t\n\/\/ Slide-in\n\njQuery(document).ready(function(){\n    jQuery(\".slide_in_label\").click(function(){\n        jQuery(\".slide_in_container\").toggleClass(\"show_form\");\n    });\n});\n\t\njQuery(document).ready(function(){\n    jQuery(\".close_form_icon\").click(function(){\n        jQuery(\".slide_in_container\").removeClass(\"show_form\");\n    });\n});\n\t\njQuery(document).ready(function(){\n    jQuery(\".slide_in_mobile_label\").click(function(){\n        jQuery(\".slide_in_mobile\").toggleClass(\"show_form\");\n    });\n});\n\t\njQuery(document).ready(function(){\n    jQuery(\".close_form_icon_mobile\").click(function(){\n        jQuery(\".slide_in_mobile\").removeClass(\"show_form\");\n    });\n});\n\t\n<\/script><\/code><\/pre>\n\n\n\n
Step 4: Add the CSS code<\/h2>\n\n\n\n
Go to Divi > Theme Options > General and scroll down to the CSS field and add the following CSS.<\/p>\n\n\n\n
\/* ##### SLIDE-IN DESKTOP ##### *\/\n\n.slide_in_container {\n\tposition:fixed;\n\ttop: 25%;\n\tright:0px;\n\tz-index:9999999;\n\ttransform: translateX(100%);\n    transition: 0.5s ease-out;\n}\n\n.show_form {\n\ttransform: translateX(0px);\n}\n\n\n.slide_in_label {\n    transform: translate(-100%, -100%) rotate(-90deg);\n    transform-origin: right bottom 0px;\t\n    position: absolute !important;\n    top: 0px;\n \n}\n\n.slide_in_label:hover {\n\tcursor: pointer;\n}\n\n.custom_contact_form p input, .custom_contact_form p textarea {\n    padding: 15px 10px 10px 10px !important;\n}\n\n.fa-times-circle {\n\tfont-size: 22px;\n\tcursor: pointer;\n\tcolor: #000 !important;\n}\n\n\/* ##### SLIDE-IN MOBILE ##### *\/\n\n@media (max-width: 980px) {\n.slide_in_mobile {\n\tposition:fixed;\n\tbottom: 0 !important;\n\tright:0px !important;\n\tleft:0px !important;\n\tz-index:99999999;\n\ttransform: translateY(100%);\n\ttransition: 0.5s ease-out;\n}\n\n.slide_in_mobile_label  {\n\ttransform: translate(0%, -100%) rotate(0deg);\n    transform-origin: center bottom 0px;\n    position: absolute !important;\n    top: 0px;\n    width: 100%;\n    text-align: center;\n    justify-content: center;\n    padding: 1.3rem 1rem 1rem 1em;\n    margin: 0px;\n    display: flex;\n}\n\n.show_form {\ntransform: translateY(0px);\n}\n\n.slide_in_mobile_label :hover {\n\tcursor: pointer;\n}\t\n\n.cross_icon .fa-times-circle {\t\n\tfloat: right !important;\n    margin-right: 35px !important;\t\n}}\n\n@media (max-height: 560px) {\n.slide_in_mobile {\n\tdisplay: none;\t\n}}\n\n.et-tb .slide_in_container,\n.et-tb .slide_in_mobile {\n\tdisplay: none;\n}<\/code><\/pre>\n\n\n\n
Step 5 Customize the slide-in<\/h2>\n\n\n\n
To customize the slide-in go to Divi > Theme Builder > Global Footer<\/p>\n\n\n\n
Switch to wireframe mode.<\/p>\n\n\n\n
I have created 2 slide-ins. One for desktop and one for tablet and mobile.<\/p>\n\n\n\n
\"Slide-in<\/figure>\n\n\n\n
And that is it!<\/p>\n\n\n\n
Let me know in the comments if you have any question.<\/p>\n\n\n\n
You Might Also Like\u2026<\/h3>\n\n\n\n