Do you want to support my channel? Leave a like or buy Divi / Elementor Pro with 10% discount via the link below. That will help me enormously to create these free videos for you and keep going!
⇒ Software that I recommend:
✅ Divi with 10% discount
✅ Elementor Pro
✅ SiteGround 70% discount
✅ WP Rocket 10% discount
I want you to succeed with your website, so lets get started.
📖Transscript📖
A few years ago clients would ask me one question that could really gave me some anxiety in building websites with Divi. And the question was: “can you create a smooth scrolling carousel on my website?” And I was always like, how can we accomplish something like that in a different way? Why? Because this feature, really lacks in Divi. Am I right? So I tried to code it in there manually, I followed some tutorials, but nothing really did the trick as well as a plugin I found a year ago, which would really help us out. We’re going to use this Divi plugin to create three awesome carousels. The first one we’re going to create is a sliding logo carousel, which really you can show off the brands you’re working with, or your portfolio, or anything else. Its really great. The second one is: we’re going to create a review carousel with people telling how awesome you are, or the service that you are giving to them. The third one is a carousel wich introduces the team members of your business. So, without further ado, let’s get started. Let’s have some fun.
So, if you want to support me then you can follow this affiliate link, which will help me out a little bit. Go to https://wpressdoctor.com/getcarousel/. And now we’ll be redirected to the plugin builder, which is Divi Gear. Alright, we go to ‘Products’ we go to ‘Divi Carousel Module 2.0’. And you can choose a license. You can use one site which is just $15, or you can just choose a unlimited sites with will give you the access to unlimited use of this plugin which is really amazing. Just pick the one that you want. I have the unlimited site for all my clients and it works awesome. It’s a lifetime license so that’s great. Press ‘Buy now’, and press ‘Proceed to check out’. Fill in all your details and of course you can pay with PayPal or with credit card whatever you want. And you press ‘Place order’. Once you’ve paid you can go to your dashboard, login to your user, then go to ‘Downloads’ and press the download button for the unlimited site or to single license whatever you have. And now the files being downloaded to your computer. You can press ‘orders’. Because now we need our license key so we press view. And on this site, it’s also on your email but here you can find your license key. You select the license key and press copy. And we’re going to need it to fill it in our WordPress website. So, next step is: let’s go login to your WordPress website.
Let’s install the plugin right now. You go to ‘Plugins’, you go to ‘Add New’. We go to ‘Upload Plugin’. And you select the plugin we just downloaded from Divi Gear. And you press ‘Install now’. Just a second. Oh, we press ‘Activate Plugin’. And now you see on the left side there is a DiviGear icon so let’s click on that one. We have to fill out our license key that we’ve just copied from the website. So just paste it in. Press ‘Save Changes’. And then you have to press activate. There it is, our license key has been activated. So now we can use the plugin. So head over to the place where you want to build your carousel slider.
Okay, so when you are on the page just go to place where you want to add your new carousel module. And we are going to place it right there. Alright let’s add a new row right here. Here we go and make it one. And now when you go look into your module sections you will see that you have a new module called the ‘Divi Carousel’. That one is pretty cool so let’s add it in. Okay, the first thing we’re going to do we’re going to create a little slider with different logos or brands that we are working with on our website. After that, I’m going to create some more reviews so you can see exactly how we’re going to do that. And after that one we’re going to build another one/ But first, the logos. All right, you’re gonna press ‘Add New Item’. And then we’re don’t going to fill out the title, the subtitle, and the content. No, we are just going to add a image. All right, so for your logos, you will need one thing which is very important. All your logos needs to be PNGs or has to be transparent and they have to be the same size. Because if we don’t use the same size things will get a bit messy. So let’s upload our files, we’re going to use for this website. I have them right here. Just a sec. I just dropped the files, and here we go. I selected all the logos of sport brands around the world, so we can really make a cool slider which shows which brands we use. Alright let’s start with Under Armour. So the first thing you want to do is you want to optimize your alt text also. Now, I’m not going to dive into that on this video, but if you want to know how to optimize your alt text for Google, just watch my video about “The timeless pillars of SEO”, because this will really help you out to get your website ranked in Google. All right, let’s just use Under Armour right now. Upload the image. And as you can see now we have just uploaded our image on this slider. Alright so here – don’t forget to enter your image alt text right there below the logo. I’m just going to use the logos name. Normally in the website I would never do this I will always combine it with something this website is trying to rank on. Alright so, do you want to open a lightbox No, I don’t want to open it in a lightbox. Alright, don’t forget to add the admin label with the logos name. Why? Well let me show you. If I save this one, you will see right here now it’s called Under Armour. If I create a new one, and add a new image. Like The North Face, and I’m gonna place it in the alt text again, and the admin label is The North Face, I will get The North Face right there. Right, I’m just gonna fill this out really quick. I’m going to add a lot of logos, right there so we have something to work with. So when you’ve uploaded, all your files to the module now we can start changing stuff. This is pretty awesome. Let’s go to the next setting is ‘Slider settings’ right there. With the ‘Item width control’ you can actually control the width of all the individual logos. This can be very useful we’re not going to use it right now but you can use it whenever you see fit. This is how many items you want to show on your desktop and how many items you want to show on your tablet let’s make it three, that’s alright. And how many items you want to see on mobile so let’s change that to two. And here is the transition duration. So let’s make the transition duration 4000ms. We’re gonna make it a loop. We’re not gonna center a slide, and we’re gonna put it on AutoPlay. Do we want to make it pause on hover? Well, you can but no not this specific slider. And I want the scroller effect so that means, it just goes really smooth by. I want that. We are going to make that nine seconds. Its the arrow navigation if you want it. I don’t want it right now. I also don’t want to a dot navigation, but it can be useful in the next carousels we’re going to create. So lazy loading, you can put this on if speed is important for you right now, we’re going to leave it off for testing purposes. When it’s all finished we can turn it on. Alright let’s go to the ‘Advanced slider settings’ right there. The slider effect going to be the default, that’s this one, or we can make a Cover Flow. I’m going to show you later on something with the Cover Flow is really amazing. We don’t need a background for this one, and the admin label is called Divi carousel and that’s okay. All right, so those are the basic settings now let’s save this page. If we load the page on the front end, this is what you will see right there. Let’s go to our place where you see all the logos. It’s a long page right? Alright, here we go. Here they are. So now we can see all the logos smoothly scrolling on the page. But there’s one problem I have with it. It is not full width so we’re going to change this to full width. How do we do this? Enable the visual builder, and we’re going to make this row right here full width. So go to the settings of your row. Go to ‘Design’, you go to ‘Sizing’. We then change the width to 100%. Whoops. And we’re also going to change the max width to 100%. Now this looks way better right? I found the logos awesome but I think they’re really big and we need some spacing between the reviews, of course, we’ve got to change those reviews to make them exactly the same. So, this looks pretty cool. Now I’m going to show you a couple more things we can do with this carousel. So let’s go back. If you go to ‘Design’ -so you can do a image overlay so if you want to link them out to for example your portfolio, you can use the overlay which is very useful. So you can click on it and you – then you go to a portfolio page or anything then this is very nice. This is what happens when you enable the overlay. So if you make it like black then it’s gonna be full black. But let’s make it a bit transparent. And then you can also just add a different icon later on, to change this one. Alright, this looks great. Let’s use a custom icon, and if you press this icon for example, now you know that when you hover over it there is more to this story. People can click on it and go to your portfolio page, we’re not going to use it right now but it’s a really awesome option. Alright if you go to ‘Image’ now you can align the images, or we’re only using images and no text so this really doesn’t make any sense. You can make it full width one doesn’t make any sense right now also. So let’s go to the image borders. If you want to have image borders, you can add them right here. We’re not going to do it right now but we are going to do it in the next one. So there’s only one thing I want to show you in this specific carousel. If you go to ‘Slider Settings’ and now you can control the width we’ve got to make them a little bit smaller. Also if you want more spacing between all those logos, you go to ‘Design’ you go to ‘Custom Spacing’ and you go to ‘Content’. Here you can add some padding to the images so let’s say I want 50 pixels right and left. As you can see there is more spacing right now between the logos, and that is a little bit more smoother. Now we can also make them a little bit bigger again so we go to ‘Slider Settings’ the item width: let’s change it to 175 pixels. This is pretty nice. Let’s make it 200 pixels to see how that looks. I think this is really awesome. All right, let’s save this. So this is pretty awesome. Just imagine your website with your logos or your clients beneath on every page using the ‘Theme Builder’ for example, it is all possible with this awesome carousel. Alright, now we’re going to create another carousel with reviews.
So we’re going to remove this module and we’re also going to remove this module, and we are also going to place the reviews in a carousel, it would be awesome. So just add the Divi carousel right there. We’re gonna add new items. So you can add actually a title a subtitle and content so let me show you how it looks So the title of this review is Mr. Arnold Schwarzenegger and the subtitle is “I love it. This program really changed my life from a skinny person to a fulltime bodybuilder, this is awesome.” We’re gonna add of course a image. So we’re going to use for Mr Arnold Schwarzenegger, yeah. You look awesome man. All right, gonna use this image right there. Don’t forget to fill out the Alt text of this image. And we’re not going to use social media but we are going to use a rating. Because we got to give it five stars because this guy was really happy. Just let me fill this out real quick with some other people and then I will style this entire thing, so be patient a little bit. So as you can see I now have added some content to the reviews now we’re going to style it. So you go to your ‘Slider Settings’. And we don’t want to use the ‘Item width control’, and I do want however four items on desktop. I think the basic settings are really good right now for these reviews. We don’t want a multi slide and Transition Duration: let’s make this two seconds. I’m going to show you how it looks. We do want Loop. And we do want AutoPlay. And we do want to Pause on hover. And I don’t want the scroller effect this time, because we have seen this scroller effect in action. You can add it of course if you like it, let’s not use it this time. We’re not going to use it. Our Lady, lady. And I want to have the arrow navigation so people can actually move through the reviews. Alright. Item spacing it’s very useful. We’re gonna make it a little bit more spacing right there. This looks awesome. All right, let’s change it to 70px. This is great. Equal Height Item, we don’t need it right now. Vertical align: this is actually where you want to align the images if the images have different sizes, then you can do alignment. Let’s just put it on the top all of them. Let’s go to your font slider settings with the slider effect. Let’s use a cover flow. This is how a Cover Flow looks. And if you now go to center slide. This combination is pretty awesome. So, let me show you how this looks on the front end. So this is how it looks right now on the front end. Well, this looks pretty nice isn’t it. This is a very nice carousel but we can change it even more because I actually – the Cover Flow, I don’t like it very much, but you can still add it of course. But we’re going to remove it, we’re going to style it a little bit more. Because I want for example: round images. So we’re going back to the settings of this module. First we’re going to shut down the content, and we’re going to turn off the cover flow, and let’s keep it on the default mode. All right, let’s go to the design we’re going to style this thing so it’s going to be fun. Let’s go to the image border. First of all we got to make it round because I really like rounded images for the reviews. Just enter 50%, and see what happens. All right, now this is cool. This looks way better. Let’s make it a nice border. Let me see what is the color of this website. It really doesn’t matter what color we pick because we have all colors in this website. So we’re going to make this three pixels. Let’s make it a little bit smoother. I think two pixels is great. All right, let’s use this one. The image border Styles, do you want to have it Grooved, Ridged, Dotted or you can do it right there. Let’s keep it with solid. Image box shadow. This is some pretty nice effect. It looks kinda of, and I’m going to show you why that is because images doesn’t have enough space around them. We’re going to fix that in just a second. The title text let’s change the title text, of course you can change the color you can change the font. And let’s align them all in the center because that is, I think that is way better. I’ve found the images to be a little bit too big. So we’re going to change the size of the images. We go to sizing. And then we go to. If I change this one the entire module will be sizes so this is not the right way. So I can’t seem to find the normal way how to size the images but of course we can always do it with custom CSS. Now, if you do know the way how to style the normal fashion, just put them in the comments, because I am always trying to learn more. So let’s go to the image section and just type in width: 175px; This is better! I like it, this is great. So we’re going to use this width for the images, this looks awesome. Right, let’s go back to design. We go to the subtitle text, let’s add in the center. This is great. It really looks great. Let’s get another font, let’s use Montserrat. And we’re going to make the titles a little bit bigger so we’re going to title text text size. Yeah, this is, this looks really great. All right. Let’s go back to the body text. We’re also going to center this one out. I like it to be centered. And of course you can change the font and anything, but you know how to do it. Alright so let’s go to the next and previous button. Those are these on the left and rightnside. I want the middle and outside the container. However, this is going to be a problem because I made the row full size 100% so we have to make them smaller in, because now they just fall off your screen. So I want them to be up in the top. In the bottom? Let’s move them in the middle and inside the container. Right. I only want to show them on hover. This is really nice. And I want it to be justified. Of course, and you can even make custom icons for the previous and the next one. So if I want to have this little crazy button. I’m really impressed by the work they put into this module I really like it, because you can style it like unendlessly, its really awesome you can change the font size. We can also change the color of these little icons in the next setting Color Settings. The arrow color let’s make them pink also. Here you go, it’s great man. Arrow background color, I would say you make it transparent so that it shines through because now you can see better da dots are those little things down there I didn’t activate them but you can change them right there. So desert index, you can just leave it the same because I don’t have anything behind it or in front of face so that’s cool. Got some spacing. We don’t need this, this time. Item borders with this border, you can create a border around the entire item. So this can be pretty useful if you’re going to add a shadow to it. For example, this would be pretty nice sizing spacing, of course. So now it looks like this and it’s pretty awesome if you can even drag your mouse around it. Or you can just love the things by itself. Also on mobile and tablet is exactly the way it use your mouse if you can actually put your finger on it and scroll it, he will see the next one so this is pretty cool. I really liked his module. However, to start, I wanted to align the stars in center and make them a little bit bigger let’s see how we can do that when you want to change these stars, and you want to change even more about them you can actually go into one of the reviews and press the gear icon right there. And now you have even more options to change inside of your module, you go to design, you go for example to image styles you can choose the position of your image you want in the bottom. Do you want it on the right. Do you want it on the left, do you want it inside of your content, or you can change to this place of your image right there. You can also use a filter. This is very useful if you want all black and white images through your entire reviews to make them all the same look and feel. This is very useful. We’re not going to use it right now. So again you can change the title the subtitle and the gander but now you can change them per refueled is really great. You can even add a button we didn’t really, we didn’t do it right now. But as you can see if you go to content. You go to button settings and you’re going to add a button. Then you can actually add a button below all your reviews. Now, I don’t want buttons in my reviews, which you can do that. If you have all kind of call to actions down there. It’s really amazing. So just social media style we’ll be talking about that in a bit. In a new design just hold on reading style, you can choose where you like to align the icons, I want to align them in the middle, and I want them to be a little bit bigger. I like it this size so let’s keep it this way you can change the color of it. You can make it blue you can make it pink, but let’s keep it the girls, I like that. And of course you can add a buck shadow to them. Now, this would be pretty cool. If you add a box color you would need some spacing, right there. So we’ve got to add additional spacing. A little bit of padding up the bottom, and the margins left and right and left and right. So this looks pretty cool. However, you can see the shadows anymore Why right so you also have to add a little bit of margin to them on the right and left side, to really show depth, the shadow of this review. So now we have a little bit of margin a little bit of bedding, and I really happy, how is this going to look. So we added the buck shadow which is really awesome, and you can of course use your filter for the entire module, I wouldn’t do that but you can of course because it’s standard Divi. The only thing now we have to do is we have to copy this style to all the other one. Well, it’s pretty easy, you just press the right button on your mouse, and you just press extend items styles, we’re going to extend them to only this row, and we’re going to press extends. And here we are. Now we have all the styles added to all of them, just in one, Mr Smith doesn’t have the rating and Mr SpongeBob also so we go to make them we’re going to use the rating, we’re going to add five stars. Yes, Mr SpongeBob also doesn’t have a rating. I think I forgot it. So, yes. All right. So, let’s see how it looks now on the front end of our website. So here we are at our awesome reviews, and I think this really looks awesome. Oh, I forgot to put the button away from Arnold Schwarzenegger but a dis refueled thing is really awesome as you can see now we have their little carousel that is moving, and also the buttons of course work that being buttons you can also drag it around your screen. So I really love as much so they really put a lot of work in it, it was worth every dollar I put into it. I really like it. All right, I’m going to show you one more thing, how to create a team section with the same module. Let’s go. So what I want to create this website is also a piece of, of how we can introduce ourselves to the clients, and how we can show off our team. So let’s create that right now. What I want is I want to have it right here I’m going to add a new section, we’re gonna just add a regular section that we’re gonna have, we’re gonna need two rows of this. The first row is just a piece of text. You meet the team. Right now, the background of this column I want to change it. And I want to make it black. Let’s create some spacing. Are we going to add our Divi module right there are Devi garrison. Mr tough. He’s actually a real tough guy. All right, so I’ve added a couple of the team members, and now I’m going to style it to make it show only one person at a time and it’s going to scroll instantly all away, automatically so it’s going to be pretty awesome and when you click on it you can actually go to the team members so that would be awesome. So I want one idol to be shown on the desktop. And I want it to be to loop and to our play. And I want to have the scroller effects, and let’s make it seven seconds so that is go slowly right we want to error navigation, yes and no. Let’s see if this one as you can see right now it is just really big. And I want it to be this way right let’s save let’s see what it does any front end. All right, so this is how it looks now on the front end, I think this is really funny. Except that, I should make the gutter wide to zero because now it stops right there and I wanted to stop at the Blackboard. So just quick fix. Row settings, we go to design we go to sizing, and we go to use custom gutter white, and we’re gonna we’re gonna make it. One. Save Changes. Save Changes. So this is the final result, I have to agree it’s a little bit fast, but as you can see is really funny you can create the most awesome things with this module, and if you have questions about this module just leave them in the comments. If you liked this video, give it a thumbs up so I know I was on the right track. Alright, keep it up and have a awesome day and I’ll see you in the next video.
