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.
