How To Add A Widge To Slide In Menu Divi

ASSUMPTIONS

Basic knowledge on Divi.
Divi is already installed and configured
Comfortable with FTP-ing into your site and uploading files
A Child Theme is Installed and Agile

In this tutorial, we will have a look at how we can make some awesome sliders with the power to slide anything in Divi using Slick.js, a lightweight javascript library with a ton of cool features. We have all been in that position where our Divi lives would just be a little fleck easier if I could have a slider with a bunch of Divi Blurb Modules, maybe a row, or even a combination of these Divi elements. Don't worry, your Divi Engine fam is here to evidence you how without the need for yet another plugin, instead we will simply employ a few lines of code, and this crawly library.

Time to take a closer look!

Preview:

Slide anything in Divi with Slick.js slider

Slick What Now?

Great question! Slick Slider is a gratis JavaScript library with a ton of useful features that makes sliding anything on your website an absolute breeze. Our favorite part? We can easily integrate it to whatever Divi WordPress site to give you lot the ability to slide various elements with very little code.

Check out some of the characteristic highlights:

So now that we know why Slick Slider will make our Divi site look awesome, let'south take a look at how we integrate it into our site.

Video Tutorial

Text Instructions

If you prefer to quickly copy and paste the text and settings for this tutorial, please scroll downwards and you lot will run into everything as it relates to the steps found in the video tutorial.

IMPORTANT NOTE: IF (and simply IF) you are using BodyCommerce or Divi Auto we accept peachy news, you can totally skip Steps 1 & 2 equally we have already integrated Slick.js for you lot 😁

Step i) Add the Slick.js files to your Child Theme

Download Slick.js

Caput over to https://kenwheeler.github.io/slick/ and download the zip file and extract the files.

Upload Slick.js

Using your favorite FTP client, upload the extracted Slick binder to your WordPress site in the Child Theme folder.

Note: This tutorial assumes that y'all know how to FTP into your WordPress install and upload files. If you are not sure how to exercise this, delight check out this crawly tutorial by the team at Elegant Themes that will help you out.

Step 2) Integrating Slick.js into your Divi WordPress install

With our files uploaded, allow's integrate the Slide.js files into our Divi install.

Head over to Divi > Theme Options > Integration Tab

Copy and Paste the following lawmaking into the <caput> section:

NOTE: If you take any problems, make sure that the Slick folder is uploaded directly to the root of your Child Theme. If you don't have a child theme exist sure to check out this nifty tutorial on How to Create a Divi Child Theme with Dynamic CSS.

Step 3) Create your get-go Slick Slider in Divi

Create a New Page > Build From Scratch > Outset Building

Add together Single Cavalcade Row that will business firm all the Divi modules which we will slide using Slide.js

Add whatever number or variation of modules you lot want to slide, nosotros will apply a Divi Blurb module for this tutorial

Step 4) Add together some jQuery magic

To start utilizing Slick.js on this Divi page, we need to add some jQuery to designate what blazon of slider we are building and what class will exist used to assign our parent container for the Divi Modules that volition make upwardly our slides.

Add together a New Section

Add a New Unmarried Column Row

Add a Code Module then copy/paste the lawmaking below between opening and endmost <script> tags:

NOTE: Yous can find a list of dissimilar examples of different settings and slider styles by following this link.

Step 5) Add the CSS grade we designated to our Parent Container

Open the Column Settings for the row containing all the modules we will exist sliding.

Row Settings > Column Settings

Cavalcade Settings

Avant-garde Tab

CSS Grade: slide-stuff

Dandy task, yous nailed information technology!

Add Slick.js Slider to Divi Site - Nailed It!

Annotation: If you are having issues with getting the slider to piece of work as shown here, information technology is very likely that yous are using the incorrect path to your child theme from Step ii. You can verify whether this is the issue past inspecting the folio and seeing whether there is a 404 error regarding the slick.js files. Merely brand sure to supercede [your child theme folder] with your Child Theme folder as it is on your spider web server.

Conclusion

That wasn't so hard now was it? Sliding a multifariousness of modules is a peachy way to make your Divi WordPress site shine and stand out from the rest. But the expert news does not stop there. If you are using either BodyCommerce or Divi Machine on your site yous can skip step one and 2 because we already did the Slick.js integration for yous. All you need to practice is initialize Slick.js on the Divi pages where yous want to apply the plugin with the class name you need to assign to the parent of the elements you want to slide. Awesome stuff!

We promise that learning how to slide anything in Divi using Slick.js was a fun chance for you and we tin can't await to see what yous build with this new skill. Definitely drop a comment below with links to your awesome creations and whatsoever suggestions you might have for future tutorials.

Stay in the know with our latest tutorials, snippets, and valuable articles past signing upwards for our newsletter!