How to slide anything in Divi using Slick.js slider

[Music] hey there guys hello and welcome to another divi tutorial brought to you by the team at divi engine my name is roby and today i'm going to be showing you how you can slide pretty much anything on your divi site by utilizing a lightweight javascript library called slick js 6js is awesome because it's fully responsive and has a ton of features to help you customize the appearance of your slider now there are different ways to achieve this there are various third-party plugins out there but this is a lightweight solution that requires very little code and keeps your website nice and speedy okay guys so one of the first things is that we do make a few assumptions here you should be comfortable utilizing an ftp client to ftp into your wordpress divi install and that you're able to upload additional files up into your child theme now if you're not using a child theme definitely check out the links below in the description of this video or in the blog post at divi engine.com for slash resources there you'll find a bunch of other tutorials that we've done in the past but also within this specific article you'll find the links that we're talking about here now without further ado let's get going and the first step here is to go to the slit js site and download the zip package so all you do once you're there is you go to get it now on the right hand side here and then you click on download now now once you have that download popping up make sure that you save this in a spot that's easy to find for the next step where we'll be uploading the files into your divi wordpress install okay now i've got my file downloaded here and the first thing i'm going to do is i'm going to extract the files you do that just by using your favorite zip client and unzip the files and then you get to go into that folder and the one we're interested in is this slick folder right here now using your favorite ftp client you're going to have to ftp into the file system of your divi wordpress install now i'm using a local server so i'm just going to be copying mine over like this and here's my wordpress root install and then once you're ftp into your site you just go to wp content you go to themes you go to your child theme and you just paste or upload the files into the root of your child theme okay so now that we've got the slic.js files uploaded into the root folder of our child theme it's time to integrate that into adobe site now to do that we have to go to divi theme options and then we'll head over to the integration tab now we have to add some code here to this head area of our blog so to get that code let's go back to the blog post where you'll find this video okay so here on the page on the divi engine site for this tutorial when you scroll down a bit you'll see you're in step two integrating slick js into your wordpress install we have to copy this code here and we'll do it so and just a quick explanation here we're just looking at the css for slick js itself then there's a default theme now you can go ahead and customize the theme to get different looks and colors and effects and all different fun stuff and then on the bottom is the actual javascript that makes this magic happen now you'll notice here that we've got your child theme folder now this is just going to be the folder where you uploaded the slick folder to and you need to replace my text here with everything with the brackets here with your folder so when i go back to the back end i'll show you how i do that okay back on the back end i'm going to go ahead and paste that code now i need to designate the correct folder and if you recall my theme name or my child theme was divi whoops the engine the dash child theme and i'll just go ahead and select that text so i don't have to do this three times i will just again select this paste it over there we go that looks good so i'll save that and that's it for the integration for now let's see if issues come up hopefully not fingers crossed now we're getting into the exciting stuff we have to build our first slider now you can build a slider right on a page that you've already created with other content on it but for this example and just to highlight the features and the things you can do i'm going to be creating a new page to show you how we do this so i'm going to go to pages add new and then i'll just give it a silly name like slide dot js example just to keep it simple but it doesn't really matter what you call it now we'll enable the divi boulder we'll say build from scratch now the first thing i'm going to do is add one column row and now this is where it gets interesting and let's go to the visual builder for this now we can add the various elements that we want to slide through so everything the ad here is something that's going to be slid through within that carousel slider so just for example's sake i'll be adding a blurb we don't really need to make any changes for right now but maybe just so that we can see what's happening i'll say your title goes here one i'll just be lazy and i'll just duplicate this blurb let's say two and we're gonna do this five times just to get some stuff in there that we can slide through and i'm just adding the numbers so that you know we can visually see that it oh wow it is actually working for man i would think this goes faster but it does not five there we go okay so now we've got these five elements in here and let's go ahead and publish this page okay cool now we've got that in there and time to actually add the initialization and create that class that we're going to be assigning to pull it all together and create the slider okay so to actually create the slider we do need to add some more code on the page and this is really the only code you'll be adding on page okay so now to start pulling things together we need to add a code module with a little bit of javascript code in there that's going to put it all together and create that slider for us so let's go ahead and add a section and it can just be a one column and add a code module now the code for this we can also find on the actual blog post so let's head over there really quick okay here we'll just scroll down a little bit more on the page and we'll select all the code in step four and when back on the actual page we will go ahead and paste that code between two script tags since we're using jquery and paste that code in now you'll see here that we created the class slide stuff and that's the one that we'll use to go look for those different modules that we want to be sliding through you'll see a bunch of comments in here and the first thing you'll note here is that we putting it on an infinite loop so that it keeps sliding even when it gets to the end and the number of slides will show is three and we'll scroll one slide each time the slide button is clicked so let's go ahead and just commit those changes i'm just going to enter here into the visual builder real quick and go ahead and save the page now i didn't need to go into the visual builder there i actually wanted to do the step i was going to do there in the next phase here so just let's take a look at what this looks like on the front end right now and then we'll make some quick small changes okay so you're on the front end you can see that you know you don't have a slider yet but we can see we're going through you know the one two three four and five blurbs that we added to the page now we need to do a couple small changes to quickly make this work so let's go back to the back end okay back on the back end the first thing i just want to do and this is where i'm going to enter the visual builder there are some controls on the slider so just for this example and without getting into you know a whole css lesson and styling different elements on the page i'm just going to put a blue background here just so that we can highlight the the controls of the actual slider now that you can change any color you don't have to change the color if you don't want to it just simplifies things a little and then just because i did that i'm quickly going to just make the text for the title white and i will extend those styles to all the blurbs in this section and you'll see the other ones change and then also what we want to do is we want to change the text to light so that it actually shows and again we're going to extend the styles to all the blurbs in this section extend and there you can see they changed okay so now the actual functional portion we need to do we created that selector that css class slide dash stuff we need to add this to the parent element for all these different blurbs that we have here now these could be blurbs images maps again whatever your heart desires can go in there but for this example we kept it simple so let's go into the row settings and then we don't want to actually target the row but we actually want to target the column within which all these elements live and we'll head to the advanced tab css id and classes and then we'll add this slide dash stuff class over there save save and then we'll save that and we will go and check out the front end okay now fingers crossed let's refresh this and here we go we see a slider and we're sliding through one two three four five and it looks great but there's a little bit of a spacing issue here so that is easily fixable if we go back to the back end really quick but as you can see we have our three slides and they slide one by one isn't that awesome and we did that with just a few lines of small code and there's a lot of different things and layouts that we can do but i'll take you over to the slik js site again in a second to default no sorry default to show you some of those examples okay okay so just to go ahead and create a little bit more spacing between these different slides just go and select the module you go into the design settings you go to spacing now you can add a little bit of left and right padding let's just do 25 pixels we'll link them up and then what we'll do is extend it again because we're being lazy right now but it's also a really cool feature of divi itself to save you time when you're building sites save that and then we'll go ahead once that's finished and inspect the front end again okay so let's refresh this and boom now you see some awesome spacing everything looks fantastic you're sliding actual blurbs now your imagination can start going crazy because you can build some really cool i don't know testimonials you can add different calls to action here you can do all types of interesting things and this is really just to serve as some brain food for you to get creative and build some awesome stuff now i mentioned some other different layouts that you can do with this plugin so or not plugin but the actual library so let's go back to the slik js site okay back on the sleek js site we can click on demos now here we've got demos and this one is kind of reminiscent of what we have and this is just a default setting with the default styles and it's sliding through single items on the page and it's got the nice dot layout on the bottom there this is one similar to what we had on the site which is three items at a time but it's also sliding through at a time responsive displays now if you switch to a responsive screen you can drag your finger over variable width you can do adaptive heights so items with different heights on them you can go through different data attribute settings really there's a lot of stuff center mode you know this is for you to go explore and check out and learn more about and figure out what works best for you and what you want to do on the site but this is supposed to just you know give you the idea give you the fuel and that's it really um now it's worth saying in conclusion here that you can also add layouts um so maybe you can build an entire row and let's go to the back end really quick and i'll illustrate that so now maybe what you'll do instead if you want to do a row we would assign that slide stuff class here to the section here and what we do is instead of having all these blurbs in one row we we would have a row for each layout that we want to slide through so we'd get rid of all these extra rows and maybe we'll add a button here um you know click me um and and different various stuff that you you know again your imagination is the only limitation here and then you'd go ahead and you create a row for each slide that you want to utilize and there's really nothing else you need to do that's how easy it is so and with that guys that's pretty much it definitely show off the designs and things you come up with in the comments in the bottom link to it on the actual blog page that i showed you guys earlier you'll see all the different links that we utilized and it has a text guide for this tutorial as well and we should probably also have all the links in the video description if you're coming if you find this tutorial through youtube so thank you so much for your time i hope this was helpful and definitely excited to see what you guys create that's it from me roby and the divi engine team i'll see you guys in the next tutorial

Channel: Divi Engine

Views: 1,444

Keywords: divi, wordpress, divi engine, tutorial, how-to, slick.js, slider, carousel

Id: WPmq9hBFOLo

Length: 15min 15sec (915 seconds)

Published: Mon May 24 2021