Slick Slider Demo :: CF Pro Tools :: ClickFunnels Add-Ons

Foreign. What's up everybody? Matt here with CF Pro tool support. And in this video I'm going to show you guys how to use the Slick Slider add on which allows you to kind of create a sliding like sliding testimonial, sliding images or sliding elements anywhere on your page and it's actually kind of cool. So real quick, here's how you would set this up inside of the app. So, so the first thing you're going to want to do if you're inside of your inside of CF Pro Tools is click Create New and type in Slick Slider. Alright. This actually replaces an old add on called Unslider which kind of uses a new script new script technology which we used to have one that was called Unslider and it didn't, it stopped working on mobile devices. So now we use a Slick Slider technology and that's pretty much it. So I'm just going to call this live test 2. There's no configuration to this, so just give it a name. You can use this on other pages and just the on page configuration is what would be different. So I'm going to click that red add on or Create add on button. It says that it was created successfully and I'm just going to come down here and copy that code by clicking the blue button and we're going to get out of here and go check out the the page. So let's go over to location test here, whatever it was. I was actually testing the location swap add on earlier and so I just added on to that. I was like well what if I wanted to make a page where there's some, some pictures or some testimonials or something sliding across. So here's what your on page configuration would look like. You would actually just literally stack the pictures and I'll show you this down here in a little bit. What if you just wanted to stack some pictures and or some testimonials and have them slide across. You just stack them up like this and then you go to the container where this is located and then you would actually give it a name. Like in this case it's a container is the row. So we're going to go to the row settings, click on that settings cog wheel, go down to the hashtag down here and we're going to call this CF Dash Slick Slider and we're going to hit the update again that CF Dash Slick Dash Slider. So what that's doing, the code is saying if you find any rows with this name, do this with the with the elements. Speaking of that, we're going to go into the settings here. We're going to go into tracking code, we're going to go to our footer code and what we're going to do. This is the old code here. So I'm just going to take that out. I just created that new code, we're going to pop that in and that's what it would look like. Okay, so I'm going to hit the X button, hit save and I'm going to show you what that would look like. And I'm going to show you one other thing. You can do this with a section as well. So if you have like a bunch of elements or a bunch of rows inside of a section, you can actually go to the settings at the row at the. You can go into the settings at the section level. Then name that CF Slick Slider as well. Alright, so let's go here real quick and see how this would look. And it would look like this. Say these are testimonials, they're just sliding across. It will look a little better if the pictures are all the same size. But if you know, do what you need to do, make it look the way that you want that to look. So I'm going to do one other thing here. I'm going to show you how this would work in like a two. Two rows or two sections. Like a, two. Like a double column row like this. What if you had a bunch of pictures testimonials and you wanted those to slide but it was in a like a row like this and you just wanted the left hand column to be the column where the pictures actually slid. We are going to do it like this. So the way that you find that row section, because it's not this row, you wouldn't want to go to this row setting. That's for the. The entire container. You would actually come up your rows up here and go to manage and you would go to the. Go to the correct one. I think that's not. You know what, I'm going to go to columns because there's two columns, not the row. So we come down here where it splits the columns and you can actually hover over one or the other and see which one highlights and go, okay, it's this one. So I'm going to click on that, I'm going to come down here to the hashtag and then I'm just going to rename this cf-cf-slick slider and I'm going to click update and then you can't see it here until you actually save the page and go and check it out on page. But that was the only thing that needed to change in this scenario. So all I did was stack the pictures that I wanted to show and then I gave that column its own CSS title of CF Slick Slider. Let's go to preview and see how this works. Alright, so this one still works, but if you come down here, you'll actually see the. See that other row that I've made as well. I might have put too much stuff in there because it's a little bit more than the picture. So I'm a little ocd. So I like to see everything, you know, being dressed right dress and have it look perfect. I'm like, oh, that's way too much. And I like to see my pictures generally the right size. So this is actually bothering me. But for the purpose of this example, just to make sure you guys understand how this works, this is how it works and hopefully you guys picked up on this. If you guys have any questions on how you can make yours work, please give me a shout. Let me know if I can assist you in support and I'll help you out as best as I can. Okay, take care and have a great day.