- 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 Active
Time to take a closer look!
Slick What Now?
Check out some of the feature highlights:
Fully responsive. Scales with its container.
Separate settings per breakpoint.
Swipe enabled. Or disabled, if you prefer.
Fully accessible with arrow key navigation.
Autoplay, dots, arrows, callbacks, etc...
IMPORTANT NOTE: IF (and only IF) you are using BodyCommerce or Divi Machine we have great news, you can totally skip Steps 1 & 2 as we have already integrated Slick.js for you 😁
Step 1) Add the Slick.js files to your Child Theme
Head over to https://kenwheeler.github.io/slick/ and download the zip file and extract the files.
Using your favorite FTP client, upload the extracted Slick folder to your WordPress site in the Child Theme folder.
NOTE: This tutorial assumes that you know how to FTP into your WordPress install and upload files. If you are not sure how to do this, please check out this awesome 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, let’s integrate the Slide.js files into our Divi install.
Copy and Paste the following code into the <head> section:
NOTE: If you have any issues, make sure that the Slick folder is uploaded directly to the root of your Child Theme. If you don’t have a child theme be sure to check out this great tutorial on How to Create a Divi Child Theme with Dynamic CSS.
Step 3) Create your first Slick Slider in Divi
Add Single Column Row that will house all the Divi modules which we will slide using Slide.js
Add any number or variation of modules you want to slide, we will use a Divi Blurb module for this tutorial
Step 4) Add some jQuery magic
To start utilizing Slick.js on this Divi page, we need to add some jQuery to designate what type of slider we are building and what class will be used to assign our parent container for the Divi Modules that will make up our slides.
Add a New Section
Add a New Single Column Row
Add a Code Module then copy/paste the code below between opening and closing <script> tags:
NOTE: You can find a list of different examples of different settings and slider styles by following this link.
Step 5) Add the CSS class we designated to our Parent Container
Row Settings > Column Settings
CSS Class: slide-stuff
Great job, you nailed it!
NOTE: If you are having issues with getting the slider to work as shown here, it is very likely that you are using the wrong path to your child theme from Step 2. You can verify whether this is the issue by inspecting the page and seeing whether there is a 404 error regarding the slick.js files. Just make sure to replace [your child theme folder] with your Child Theme folder as it is on your web server.
That wasn’t so hard now was it? Sliding a variety of modules is a great way to make your Divi WordPress site shine and stand out from the rest. But the good news does not end there. If you are using either BodyCommerce or Divi Machine on your site you can skip step 1 and 2 because we already did the Slick.js integration for you. All you need to do is initialize Slick.js on the Divi pages where you want to use the plugin with the class name you need to assign to the parent of the elements you want to slide. Awesome stuff!
We hope that learning how to slide anything in Divi using Slick.js was a fun adventure for you and we can’t wait to see what you build with this new skill. Definitely drop a comment below with links to your awesome creations and any suggestions you might have for future tutorials.