Hey guys, it's the WPress Doctor here. Welcome
to part three of 'All Divi Modules' video series. In this video, I'm going to take you by the
hand and I am going to show you a lot of fun modules of Divi. I'm going to teach you how
you can change them, how you can optimize them, and also, I'm going to show you some CSS snippets
that I use for my clients on their websites. For example: "How can we create this funny Persons
Module?" "How we can change the percentage sign of the Number Counter Modules?" And also
"How to stop the sliding animation in the Post Slider?" and I'm going to show you a bunch more.
So let's get started and have some fun.
Alright, so the next module we're going
to create is the 'Persons Module'. Because we have had all these modules in the past.
So let's go with the Persons Module. The Persons Module is a very nice module, if you want to
create for example, like this, 'Your specialists'. We are on a website who sells cars, you can
actually drive like the WPress Doctor. And I mean, it looks like this, it is amazing. All right, so
let's create our specialists. The first thing you notice when you add this module is you get a image
and the name, position and your content. So let's fill that out really fast right now, so we have
something to work with. "Total car freak" he is the owner of the company. Really? A google
plus profile URL? That is just really old. Alright so we have the first Car Freak and
you can ofcourse add some content about it. "I really like cars from when I was a little boy
and I just played with my sisters Barbie camper, I totally took it apart and build it out to a
Hummer." Alright, so let's give this guy an image. So let's use this guy as our Total Car Freak.
Alright, let's style this image a bit. First, we're going to 'Design', we go to 'Image'. So
let's make all these corners rounded because I don't like the style of this. So let's add 50% and
BAM, that's awesome. Alright if you want a border, you can just add a little border. I like this.
Let's make it... well what's the color of this website? I think it is a bit red, yeah the dark
red. That looks great. Let's change this to dark red. Let's make it a little bit less
intense. And of course, you can add a shadow if you want to do that to the entire box.
That looks really great. Let's go to the text. The text shadow... I wouldn't add a text shadow
but I do like to align my text in the center because I'm talking about people right now. So
that looks a little bit better. Let's make the title text a little bit bigger. Let's give
it a awesome font like Motserrat or Poppins. I really should make a video about most use
fonts online, because that would be interesting. Total Car Freak. That's great.
Alright I... the owner, well, it's a little bit small so let's make it a
little bit bigger. And let's make it like that. Nah I did like the color. Oh yeah the icons you
can change on the top and you can also make them the style of your website. So I would suppose, let
make it a little bit dark red right there. This is a great color, let use this also for the border.
Let's go to 'Image' than you go to 'border' and just change the color. All right, this is
great. So now we have a person's module which is very easy, very simple. What are more things
you can do with this one. You can of course add a shadow to the entire box. You can do that, but if
you do that, you need to add some little spacing. So we go to 'Spacing', we go to 'Padding',
and we're gonna add a little bit more padding. Especially to the left and right as you can see,
this looks way better than we had before. So using this you can actually create a really awesome
little card, as we talked about car specialist this really looks nice. So we're gonna.. this is
awesome. Now, another thing I would suppose to do, we could add a background. Now, I don't advice
to do this, but let's add a little bit of gradient. Let's go with the dark red as we
just have used, and let's go with white also. Now the thing we can do now is really great.
We can change the gradient. And we can make it a hard line with the starting positions, as
you can see like that now is a very hard line. And as you now can change this all
the way you would like to do. But just keep in mind you still must be able
to read the text right there. So, I think we should make this a little bit more or less
intense, and then we get a really, really nice. A really nice effect, right there, so I like that.
Alright, so let's change this to another one. And we're going to change it to another one. And
then we have a beautiful specialist team waiting for you to buy your next beautiful car. Those
are really beautiful cars aren't they? Alright, so. So what can you do more with these persons
modules. Well it's very nice if you add a little bit of hover animation. So we go to 'Design',
we go to 'Transform', and we go to transform translate and we press this hover button. And now
when you hover your mouse over the module, it will really pop out like this. Alright. You press
Save Changes. And now when you save this page. And we exit this visual builder. What will
happen right now is: when you go to this area, when you hover your mouse over it, it will just
pop out. So, that's really awesome. So this is the basic module. Now, let's create something really
awesome with some custom CSS. So when you move your mouse over it, the images will... well just
take a look at what will happen. I'm going to give you a CSS snippet which is really nice and you
can actually change it, the style you want to do. So let's go to the settings of this page right
there you go to 'Advanced' you go to 'Custom CSS', and you paste here the CSS snippet that I have
put into the description of this video. So you can just download it and use it the way you want.
Now, let's see what happens when I add this. Press save and then you go to your module, you go
to 'Advanced', you go to 'CSS ID & Classes' and we add this class, right there. Now what you can see
is when you now hover your mouse over your module. That's aaaamaaaaazing! That's so cool. So now
you can just really customize your module and these effects. So for example if you go
to your custom CSS again of this page, you will see that I have added some really
cool stuff right there. So when you look at this snippet, you can now change for example
the scale of the transformation of the image. If you put it to 1.3 its going to get really big if
you put it back to 1.1, then that's really cool, the way it is. And if you scroll even further down
you can change here the background of the social link so now it is red. As you can see when I
move it, you can see it changing right there. So let's change it to a light one and when
you hit it is going to be yellow. Well, you can just change that, in your - here is the
yellow code - so you can just change it in the CSS snippet. But this is really cool. So
let me show you how it looks right now, when we go to this section of our specialist,
and we hover our mouse over our team. Well, this looks great. So now you have an idea about the
person module. Let's go to the next module.
Alright so the next module we're going to talk
about, is the 'Number Counter'. And this module is actually pretty basic, a number with a counter
on it. It's pretty simple. But with this number counter we can create some pretty cool stuff.
Let me show you how to do it. Let me add here a title, so your title will be "Websites build".
And I don't want this percent sign but we can turn it on later on because I will show you
how to change the percent sign to dollar sign or anything else. Alright. If you want to
make this module to link out to anything else you can do it right here. Background, of course
we can change it will be changing this later on. Right, just go to 'Design' and we
go to your text. Let's. Oh, hold on. "Websites build" you can't see
it anywhere so where is it? Well, just press the brush icon right there, or you
go to 'Design' and you go to 'Title text', and here we can change this to white and there
it is. To make it more consistent with the rest of the website we go to this brush icon and
we press this color I've created. I use this color more in this entire website on
this page. So, this one looks better. Okay, so I have built 821 websites, and you
can of course add shadows to it but basically this is all there is about this module. Because
it's very, very simple and straight to the point. The funny thing is now when you load the page you
will see that - let's save it first- you will see a beautiful counter module inside your page
so it's pretty useful and it's pretty funny. Let's see how it looks on the
front end. Exit the visual builder, and we scroll down, and here we go. It's pretty
neat right? Now, I'm going to show you another few things we can do with this module, for example,
right now I want to clone this one. I drag it over here, and we're going to change this one
to "Dollars earned", and let's make this 5.268. Alright, we go to elements and we are going to add
this percent sign. Now, we got to do some pretty nice trick. We are going to 'Advanced' we go to
'Custom CSS', and we go to the 'Percent' sign. So we're going to change this one
and I'm going to make this like with, dollars earned 5847 right then you go to
'Advanced' we go to 'CSS ID & Classes' and we're going to add the class of: "dollar". So
you go down here you go to your 'Page options', and you go to 'Advanded' -> 'Custom CSS', and
you add this snippet you can find inside of the description of this video. And as you can see
right now what happens it immediately changes to a Dollar sign. Isn't it awesome? Now if we
save this one. Now, we exit visual builder. And now if we go to our section you
will see that the dollars are adding up. Isn't that awesome? So you can of course change
this to everything you like so: "earn a passive stream of income like this" and you get the idea.
And of course you can change anything with this with this dollar sign. For example if you want
to have another sign right there let's make it, for example, euros. Then we need to change the
CSS class to euro. We save this one, we go back to the CSS of this page. 'Options' -> 'Advanced'
-> 'Custom CSS', and we gonna copy this one, create another one. We're gonna, oops, we're gonna
call it "euro". And then we gotta make the sign, for example a Euro sign. It's unbelievable! But
it works. So you can do this with everything you want with all combinations and keywords and
things on your on your keyboard... its amazing, but you can also -let me try it- Haha, this is
awesome. So you can also change and add some crazy icons. So I really don't know why do you
want to have it but you can. It's just to show you that you can add anything inside of there. You can
also add the Elegant Themes icons, but you have to change a little bit more, but just be creative.
Alright, so we're gonna add right now let's add, let's change this back to euros. I'm going to
show you right now how you can add a beautiful background around and make it round. So you go
to 'Background', let's make it white for example. No let's make it this color and we're going
to change the title back to white. Alright, now we're going to create a circle of this
background. How are you going to do that? Well I'm going to show you. So you just go to
'Design' you go to 'Border' and here you can add this 50%. And let's see what happens. It
doesn't look very neat because it is a bit too small. So, what are we going to do about
that? We go to 'Design' we go to 'Sizing', we go to 'Height'. And we're going to change
this a little bit to make it -for example 100px. Well that's really not the way we should
do it. 200 pixels, maybe four. Whoa. All right 300 pixels, this looks
awesome because now it is a beautiful circle. However, it's a little
bit too big, it is huge. We're going to 'Spacing' and we're going to add 'Padding'
right there. As you can see, here we go! So now you can have a border around it, a
circle around it. If you want to create it, now you know how you can do it very easily
if you also want to have a border. Sure, why not, let's make a white border around
it. And now this looks pretty funny. So, there's not much more to say about the number
counter module so let's go to the next one.
So the next module we're NOT going to talk
about is the 'Portfolio'. Why aren you NOG going to talk about it? Well I'm going to
show you why. If you go to 'Insert module', and we scroll down and we just had about
the 'Person', we go to 'Portfolio' but as you can see the portfolio is actually
quite the same as the 'Filterable portfolio' which we already discussed in another
video. So, the link is up there. So, if you want to watch how are we going to style
this one just watch that because it's exactly the same, but there are no tabs above it. So,
have fun, and we're going to the next module.
The next module, we're going to create is the
'Post Navigation'. Well as you drop down here we're going to add a new module there. And
it's called the 'Post Navigation'. The 'Post Navigation' is a module which you can customize
your next and previous links to another pages. They're highly customizable, so that's pretty
awesome. So I've created a page. This is a page, not a post and what you can do right there is the
previous link and the next link you can see the contact is one, and the audit- to website audits,
is another one. "The previous link" and "The next link" as you can see down there is going
to change to previous link and the next link. And we're going to style it in bit
just hold on, we got to make it a button. So with the categories option you can actually
make this next and previous link go to some page, or some posts in the same category. If you're
using a post then it's most likely that it is created inside a category. If you have a
page for example, or another kind of page, you can just add here a custom taxonomy name, which
will be connected with each other. So if you have multiple pages you give them the same name right
here like 'jewelry'. And if I go to another page and also give it the same custom taxonomy name,
it will appear right there in our module. So, it is pretty useful. I'm gonna turn it off right
now or else you won't see anything. So let's go to 'Navigation'. You can only show the next link or
previous link. Whatever you want, you can change of course the backgrounds of the entire link so
let's make them... what's the style of this page? Well let's make them a bit goldish/yellowish.
That is not goldish. This is better. Alright, of course we have to change the padding
if you're going to do this so we go to 'Design' we go to 'Spacing' we're gonna add a little
bit of padding right there. Here you go. Well those are huge. So let's make it 5.
Of course we're gonna add a border into this button so it really looks like a
button right now. As you can see this is hideous, but you get the idea what's possible. We
only need to change the, the text of this button right there. So we are going to 'Link text'. We're
going to change the font to something nicer let's make it Poppins. And if you make it black, then
this is better- way better. So now you can just change anything you want for the text, and let's
make the font weight a little more semi bold. And you can also add shadows to your
text I will not recommend right there. You can also add shadows to the entire button.
Those look kind of nice. Yes, kinda nice. Of course, let's use the transform options so when
you're hovering over your button, it will actually behave like a button. So what happens when you
hover over a button, it becomes a little bit bigger. All right. So the only problem I have
with this transform option is: when I change it - look at them, they're both going to change.
And that is something you don't want because when you hover over one button you don't want to make
them both change. So we're going to not going to use the transform options. So the only thing I
would like to see is when I hover my mouse over this one, only that one changes its background
color. Because now when I go to the background. I'm going to change this into hover mode, and
then I'm going to change it to dark. Well, as you can see, they both will change into this dark. I
don't want it. I just want only one to change, and that's going to be way awesomer. We are just going
to add some custom CSS so we're going to this page we go to 'Advanced' we go to 'Custom CSS' and we
just paste in this little Custom CSS snippet which you can find in the description of this video.
Now, when you hover your mouse over this button, you can see only one of them is changing color.
If you want to change the color to something else, just click here on your background and change
it to anything you want and that just changes the background color of your buttons. Isn't it
awesome? All right, so now you know how you can use this module. Mainly you will probably
use it inside of your Divi Theme builder and place it into your blog posts. So, it will be
automatically added to every page. Just remember, if you're using it in other pages then just one,
you have to add this CSS snippet -not only to this page, but to all your pages in the Divi Theme
Options. Alright? Let's go to the next module.
So we going to stay on this page a bit longer
because the next module has everything to do with posts. It's gonna be the 'Post Slider'. so
let's add the Post Slider in right there. As you can see the post slider is just exactly what it
says it does, it shows your posts and puts it in a slider. So, I have created all my videos that
we have created so as you can see the categories. Let's just start with the beginning with this
module, what can you do with this thing? Well, of course you can make it full width. So if you
want to create this entire module full width - you just go to the 'Row settings', you go to 'Design'
we go to 'Sizing', and we're going to make this 100%, and also this one 100%, and here you go.
Now you have a full width slider. However, the first thing you will notice is that the featured
image is not the same size as it should be. So, let's not do this right now, I'm going to show you
later on how we can make that more beautiful. Just go the options of the Post Slider. Here you can
choose your post count. So this is actually the number of how many posts that you want to have in
slider because if you have 1000 posts already on your website, it's going to be a great big mess.
As you can see here in the lower side corner you can see all these little dots here. Those are all
the posts being loaded inside of this slider. I have some old thumbnails right there but it's no
problem. So, if you have 100 posts, then it will show them all down there. You don't want that.
So let's make this post count for example only 5 posts in this slider. As you can see, now
we have only five. You can of course change the category so let's go with Divi. Now we have
five posts in the Divi category. Okay. So, all Divi modules allright... -you really should check
this out because this one is cool. All right, so the included categories let's go with Divi. Here
you can choose your order by well this is very easy straightforward: New to old, old to new,
title a-z or random. This is very interesting. If you have a lot of visitors coming back to
your website, you should change it to random. Alright, so the button you can change, the text
of your button. So, I'm going to change it to "Learn more". The content display - you
can change it to show the entire content. I would really not recommend it because I have
a lot of content on the post, and I think you also have this. Always use 'Show excerpt'. And you
can turn it on or off, whatever you want. Right, I would suggest you turn this on. Now the post
experts can be found -of course- in your blog post when you creating it on the right side. So
here you can define the length of your excerpt, and the offset number. This is the offset number.
It has nothing to do with your excerpt, just if I change this to one, it will skip the first post
in the line, and it will go to the second one. From New to old. Because that's what we use for
ordering. So if you change this for example to 4 than it will skip 4 posts, and we only have one
of them as you can see. All right, just change it to one. Alright, let's go to the elements.
Do you want to show your arrows? Yes or no. Do you want to have the controls? Those are the
ones below. Do you want the Read More button, and do you want to have the post meta. These are just
all things that you have to change. I let them go and put them all in yes so we can change them and
you can see what happens. The featured image is of course the image you have chosen for your posts.
You can turn this on, as you can see it is pretty nice. But you could also turn this off and use
for example a background or a color or something. You can change it all right there. Let's turn
this on and let's do it on the left side. This is pretty nice. Because now your dimensions
of your image are not blown up if you go full width. So let's use this one and go to the
settings of the row, go to 'Design' -> 'Sizing' and let's change this one to 100% ans also this
one to 100%. Now we have a full widh slider that is just working with the background color.
So you could also use a gradient to make things really cool. As you know exactly how it works,
you can just change this one. Alright so this is pretty cool. Now we have the same style as
the images used. So, that is okay. So now you know how it works. I don't think is really
beautiful but we'll just go with this one. But you can actually use a
background image also to make it really awesome. If you use a background image, I
would really suggest to use something like this. So, that - yeah, this is pretty cool. So
what happens now when you just scroll down to the next one, your background stays intact and
just the new posts will appear. This is doable. So we are going with this one. Let's go
back to settings, and we have changed the background of the module to a gradient and a
background image combination. And let's go to 'Design'. In the 'Design overlay' you can use the
background overlay. As you can see there is one active right now if I press no it turns a little
bit lighter. And you can use also a text overlay, which is really awesome if you have a really
bright background or a image or something like that. And if you want to use the text overlay
you can just style it right here. As you can see you can make it more darker. Less darker,
more transparent, you can do anything with these texts. Hopefully it's really awesome you have
a lot of options and things to choose from. Alright the navigation here you can change the
color of the arrows, it's pretty straightforward. And the dot navigation arrows, of course -
change the color right there below. Let's make them more the style of this module, but now
you could actually use them. So I would suggest, if you don't like this and you noticing it when
your changing the design and you're changing these arrows to some color that you can't really
see: just remove them, because nobody will ever notice them. All right let's go to the image, you
can make the corners of the featured image round. That's possible but now you have a problem
because now you have to also change this colors, and you have to make this one also rounded corners, because it just doesn't look very
nice. Let's delete it. You can of course add a border color to the image. These images are
not very suitable for it so let's leave that. So shadows very nice with this layout so let's
make this one. Allright so let's change the text. This is very straightforward, just change your
text, the way you would do it with hovering your mouse over it, press this brush icon and you will
go to straight to here. You can just change the text size I think it's really big so let's make
it a bit smaller. As you can see, its going to render the entire animation again so you have
to be a little bit patient when changing this. I think this is great. All right, let's change
the meta. So exactly the same with the titles, you can change the meta, the way you
want it let's give it another color. I will definitely give it a little
bit of more coloring because.... I will make it gray so there is a little bit more,
a difference between the title the meta and the description. All right, this is this one, and the
sizing, you can change of course the body sizing. So, what is it that I don't like about this is,
I think it is all to cropped. It is too small. The meta is too close to the text right there.
So, what are we going to do about that? So we go to 'Advanced' we go to 'Custom CSS' we're
going to the 'Slide meta', and we're going to add something like this: margin-bottom: 25px; Here
you go, well it's a bit too much. Let's go with 15. It's way better. So now you can see
you have more spacing. And it just feels relaxed here I think this is way better. So you
can change anything with custom CSS, like this you can also create your slide description.
Make it lower just copy this one right there. You can also use it for your title just paste it
in right there and you see instantly spacing is changed right there. Let's go further we have
design we have the meta text, let's go to the button. Button - you know how to change a button
so I'm really not going to change all of this and show you exactly how you should do it, because
you already know that. We're just going to make it a little bit bigger. So people would really
click on it because it's really big now. And if you really want to click on it you have to make
it some other color, then your original website design. So that it really pops in your face. This
would be questionable if you want to use this one, but just try something out and if it fits
then just keep it. You know how it works, so if you want to know more about the button
module just go on into my first video about the Divi modules and we are talking about this
button. Of course we have to sizing the spacing, the box shadows. If you want to change this shadow
it's going to give a shadow to the entire module. So, don't use it right there. Transform
it: also, this is just going to transform your entiiiiiiire module. So this is
something I don't want to use in my module. So last thing I want to show you is just to add a
animation. If you press this automatic animation, and you're just gonna add like 4000 ms,
then this thing will move automaticly. When your website is loaded. And we exit
the visual builder and we are going to see this module. As you can see now the module
will move after four seconds the thing will automatically move. However, when it moves,
you can see all the animations, some people really don't like those animations, how can we fix
that? Well, it is pretty easy. You just go.... we have to add some CSS code to stop this animation.
Pretty easy, you just go to the 'Settings' of your module, you go to 'Advanced', we go to 'Custom
CSS' go to the 'Slide description' and we're going to add this animation: none!important;
and opacity: 1!important as well. Also add it to the title. And of course we are going to add
it to the slide image. And now as you can see, it will no longer move so excessively, it
will just have a small animation on the change of the post, so it is quite nicer. Let's
see how it works. Yeah, this is way better so you don't see any moving things, it just fades away.
This is awesome, so if you want that snippet just go into the description of this video, it is right
there. Alright, let's go to the next module.
For the next module we're gonna change gears,
we go into the Divi theme builder. If you're not using the theme builder, please go watch my
video about "22 things you're doing WRONG with Divi" because this is something, it will really
boost up your productivity and it gives you amazing flexibility with your pages, posts and
your website. So let's go to the Theme Builder let's go to the Custom Body for all posts. So
this body is being loaded into our posts. As you can see I only have added...right there... I only
added three things to see at my custom post. You can see the post title which we're going to talk
about right now, the post content and the blog. The post content you will only see this module
in the Divi Theme builder. And I already added so now it gone from my list. So the post content is
actually the content of your posts and the title is of course what we're going to talk about
right now. It is the title of your blog post. So this is basically - it is very straightforward
but you can use it this way is very logical because the content will not create your title.
So when you go to the post title settings you can change, of course, what will be shown. The
title, yes. The meta, yes. The author, no, because I am only one author so let's remove
that one. The date format, or you can add the Dutch dateformat. It's the day, month, year.
You can change anything you want to categories, yes, no. The comments, yes no, and your
featured image which is very useful if you use big beautiful featured images. Alright, so where
would you place your full featured image? Well, it is also nice to use it as a background.
Now you can see it but the background image and the Title/Meta could be used above your
image. If you're going to do this you need a background because most of the time, you
can't read your title and meta anymore, because you have probably the most beautiful
pictures as your featured images. So you want to add a background image for example white,
and you're going to make it a bit transparent like this. You really have to check on the front
end how it looks on your website. Okay, so you can just save it or you can make it a little bit
darker and just make it a little bit transparent, right there. So if you want to make your dynamic
post title full width with the image behind it, you just go to your row settings go to 'Design',
you go to 'Sizing', you place this one on 100%, and this also 100%. And now you will see that
this is almost 100%. Well it has to do with the thing -the way this is built up so you can change
also this one. Go to 'Sizing' and go with 100%, go with 100%. And now, this module is also 100%.
I don't know if you want it because it has to look cool. It has to look great on your website,
but this is the way how you can actually do this. Now what you can do with your titles, this
is just a way of Divi to change all your titles and meta descriptions for example. You can
change the color you can change the size. Basically it's that easy and simple the way
you do it. So when you save this one and you go to one of your blog posts, you will see
how it looks is pretty awesome and this is actually the only way how I use the Post Title
Module. Alright, let's go to the next module.
So for the next module we're going to build the
'Tea for two' -because WPress doctor recommends drinking tea and not coffee to get you hydrated.
Alright what we need on this page is of course a pricing table. So let's go to the prices of
the subscriptions tea. And let's go into the pricing tables. The pricing table is a very nice
module of Divi, which I use a lot of times because it really works great, and you have a lot of
options. So let's go through them right there. The first thing you will notice is that its really
boring -it is grey. As you can see the style of this page is a little bit more greenish with
black, and but especially greenish because it it's organic tea. Alright so you start off
with just two columns. They call it a table title. So if you want to make three of them. That's all
possible. If you want to make four, I would not recommend it. Why, because in the psychology and
marketing three choices are best if you go to two, you don't want to have two. You don't want to
have four, you want to have three choices. Just google it, it has been researched, many many
many times. So we just go with three columns. Alright, so the first one. It's the subscription.
Let's fill this out really fast. So the first one is "Tea for one", and it's enough tea for your
entire weeek. And we're gonna price it at $150. Let's add a few features. Now the beautiful thing
about these features, is if you add a plus it will be this black color -which we can change of
course- and if you add a minus then it will turn a little bit grey.So you can actually compare
the prices and compare the features of this table, so that's very useful. So we're going to style
this a little bit. Let's create a little bit more content on this one. "25 backs of
tea" " custom cup". You also receive a custom plate. And well that's about
it, and what is not included. Well, of course, "Personal tea advice" and "personal
tea coaching". We're gonna add a little bit of capitals right there. Let's change it to
1x or else people don't know what you mean. Alright so this is great. We're gonna add this
one, and we're gonna save this and we're going to the next one. We're going to change the
title also "enough Tea for the entire week" and it's let's price it at $250, because it
has to be interesting. Let's change this one, and let's change this one to the Plus, you can
also get personal tea advice, really cool. Let's go to the last one and is of course going to cost
you $950, because this is "Tea for your street". "Enough tea to feed a elephant". And of course,
now you get also "Personal tea advice" but also "Personal tea coaching", because you have
to be coached how to drink your tea Mm hmm. All right, so that's pretty cool now we have the
prizes and the elements and contents so now we're going to style this one. You go to 'Elements',
and you can even turn off the bullets, whatever you like. I like the bullets, so I keep them in
there. Let's go to 'Design', we go to 'Layout', the background color of the featured item. That's
interesting, because I didn't explain you that. So let's make the "Tea for two" the featured one.
You go to your featured price you want to have featured -you go to 'Design' you go to 'Layout'
you go to 'Make this table featured'. What will this do? It will make it pop out a little bit
because it's going to be higher and the color is going to be different. So, I like that. So
we're going to do that because this way you can actually move your customers to have a preferred
option. You can also say something like "This one is most bought" or "Most people buy this
one". You can also help people a little bit. So, let's save this this one. You go to
'Design' and we go to 'Bullets' and here you can change the bullet colors. We're going
to change the bullet colors to the nice organic color of our entire page. Because it has to
be the same. I like to be consistent. Now, let's go to the text. Text alignment you can
center all of them. This gives you a real spacing feeling but I do like however.... I do like
this more because it's more readable. That's just personal preference. You can change it of
course. The header background color let's see what happens when I change this one. I like it, I
like it a lot. Featured title. This is, of course, this one, let's leave that white. Table header
background color as is from the other ones. And we're going to make it also greenish. And I
like this one, but let's make it a little more darker. So that's it. This looks awesome. Now
you know that this one is the preferred one. Alright let's scroll down to this Title Tekst
Color, the Title Heading Level the Title Fonts. You can change the fonts for the. Yeah,
Poppins of course let's make it bold. Yes, I like it. Let's make it center.
It's already centered so that's cool. We can use a shadow of course, oh that really
pops so let's make it with a color. The body font you can change of course the font of your...
you just gonna make this a little bit more consistent with the rest of your website!
And you can of course change it I don't have to explain you how to change all these things
because, you know. This is the Subtitle text, this is this one. All right. One thing I do
want to point out is the background color of the featured one you can change this and leave
the rest the same, so it's pretty useful. We're not going to do it right now, but you can
change it. The currency color, let's make it greenish. And let's make this also greenish.
Price Text Color -here you can change the color of your pricings. Let's make this one hideous
red, and let's make this one, organic green. As you can see right now, this is just a way how
you can change all these columns so it is pretty basic. Pretty straight forward. I really like all
these options within this module. So what I would suggest you do is -well you should really
do and know it yourself- but you can also change the borders of your module. So let's just
round off the borders on the top, this is really great IU'm really happy with this one you can
use also shadows. Oh no, this is a box shadow of the entire module! You don't want that, no you
don't. However, you can add shadows to different columns. You go to 'Content' and select the gear
icon of the one you want to change, and you go to 'Design' you go to 'Box shadow' and now.... its
beautiful! I want that shadow to be everywhere. All right, so we're just gonna add them manually
to all of them box shadows. Yes alright so this is pretty nice, pretty nice. So if you go
to 'Design' and we go to 'Exclude item text' - here you can change the excluded item
text color so you can change them. For example, to really ugly orange or to white or to black or
to a little bit shining through greenish style. So, here you can change the excluded item text.
It's awesome, and you know how it works. Now where are my buttons to buy his thing? That's
a very good question! Let's go to the one... here's the button! "Buy now" we add the button
"Buy now" but why doesn't it show right here? It's pretty easy: because you didn't add a
link! So you go to 'Link' and you add a button, which says /buy/ or whatever your URL is. If you
use WooCommerce, you can actually put in a product link, which will actually redirect you directly to
your cart. I'm going to talk about that one in my WooCommerce videos, so it's gonna be awesome. All
right, this button, really doesn't look so great. So we're going to 'Design' we go to 'Button'. And
we're going to change the entire button, just the way you know. I want it to be with with this
organic green, very nice. Of course, the white border button. You know you know how to style
buttons don't you? So I'm not going to show you all the way. It's just the way the button
works. If you want to have a button right there. Then you just go to the second
one, and you add a button "Buy for two". And of course don't forget to add
a link. /buy-for-two/ for example. And we press OK, and "Tea for your entire street"
we're gonna call this: "I like elephants". All right, we go to the link and here of course
/elephant-buy/. If you're still watching now, I think you really get the picture.
let's move on to the next module.
The next module will be a Search Module right
there. All right, so this is pretty awesome. So the search module is basically module that
would search your entire page, or you can just put in exceptions: no pages for example, no
posts, or only categories within your posts. So, this search module is pretty useful. So
let's create it real fast because it's really simple and straightforward.
The 'input placeholder' is of course the text you will see on your website on your
search module. For example "search" right there. And you can read it very good because it's
transparent, but if you don't like the button you can just use this one. Now is you're button gone
so this is really awesome. So we got to make it a little bit more better to see. So let's
make it a little bit more transparent. The field focus should be white so when you
click on it, it becomes entirely white not transparent anymore. And the 'Field focus text
color" should be black when you click on this, alright. The 'Field Fonts', change it to
Poppins. We're really gonna pop it out. And you can of course change your
position of the field text. However, I will keep it on the left side, and go make it a
little bit smaller. How you can make it smaller? Well, you go to 'Sizing' just make it the size you
want it to be. And then you can place it anywhere within your row. So we're going to keep it
on 50%. We're going to keep it on the right side. And of course, now you can also move it more
up so here you go. There is a better way to do this, because now it will just flip anywhere
when you resize this page it will just not behave the way you like. If you want to do this
just add a new row, and enter the two in here. Because now the search thing is just gone. Hold up, hold up. Bad boys bad boys... So now, when you go to your image, it
is more beautifuller. However I changed the the sizing, so I really need to change
it back. Go to 'Design' go to 'Spacing' and just change his back, alright this is way
better. And now I want to put it a little bit more down because it's smaller than the other
one so now I want to have more padding. No. Yes. Yes. That's better. That is pretty cool. Yeah,
so now it's almost the same size as this one, and it stays there while I change the size
of my browser window. All right, so now we go back to 'Sizing' we're gonna make it even more
bigger because now we have the beautiful module next to the button. Okay, so let's get back to the
fields. And, well, it's pretty basic, you can just change anything you like. Like the button text,
if you have a button you could change it right there. And, well, thats basically it because it is
a really straightforward module, and you can place it anywhere you want on your website. So without
further ado, let's just go to be next module.
So the next module we are NOT going to talk about
is the 'Shop Module'. Let me show you what happens right now when I add a 'Shop Module'. It just
says "No results found" and why is that? Because this is not a WooCommerce website. I will be
talking about this module, in my videos about how to create a webshop. So, sorry guys
but we're going to the next module.
So the next module, we're going to talk about
is... the next one in line and it is the 'Sidebar Module'. Now, this is a very useful module, as
you can see right now when I click it, what will be generated: it will actually generate a sidebar
from the widgets of your WordPress area. Now most of the times, I actually don't use any widgets
anymore because Divi has made so much modules, and they are working so great that I don't need any
sidebar area anymore to use the official WordPress widgets. We can now use the modules. However,
if you do like to use this one, I would suggest you use it the way it is intended as a sidebar.
So where are we going to add this little module, well you can of course add it in your pages,
but my suggestion would be that you add it into your Theme Builder! Alright, let's head
over to your Theme Builder right now. So here we are at the Theme Builder and let's see what
I would do with the sidebar. I have implemented it for some clients of mine. It is very useful
if you want to create some widgets on the right side of your posts. So, let's say, this is the
post content right there. This is the title, this is the content. We're going to add another
row, because we need a bigger row for this. We press 'Duplicate'. We're going to change this
one because you can duplicate the 'Post content', we're going to change it right there. I'm going
to delete this one, delete this. Now I have the title here, the post content right there and in
my blog slider, or no, it is called just a blog module right here. This is the way I have built
it right there so what we're going to do right now is... Oh wait, I'm going to duplicate this one,
and I'm going to remove it from there because I want the post content to be a different column
structure, a different row structure. So let me show you how that looks. We're going to the
columns structure we're going to create a sidebar so I'll need some spacing on the right side. Here
uou go. And we're going to add our sidebar, right there. Et voila, c'est très bien! Now you can
change all the things in your sidebar. However, your sidebar is only showing the widgets generated
in your WordPress area. So let me show you where that is. If you go to your WordPress
dashboard you go to 'Appearance', you go to 'Widgets'. Here you can find your sidebar.
Ah, here are the widgets shown into the page. As you can see we have a search bar
and we have recent posts and recents comments. Those are exactly the things you see right here,
the search, recent posts and recent comments. All right, so let's add another sidebar just to be
safe. You get a warning right there. Don't call it sidebar and anything else because it will conflict
with Divi. So we're gonna call it side-bar for our posts. There you go. Now you have to
refresh this page or else it won't show. Here we go. So we have now a widget area called side-bar
posts. And what do I want in there? Actually, I really don't want anything in there
but just to show you guys how it works. You just drag and drop it. About me,
let's add a gallery and some images. This is awesome. And we just gonna instert the
gallery and what are we going to say about me. This is such an old thing I really don't know what
I actually should do with it because I never use it this way because those witches are completely
not necessary. However, for some plugins, very old ones, you actually need a sidebar widget, because
they have no shortcodes they only have widgets. Then, this is a awesome thing you can even put
on your pages. Sometimes, really sometimes... I guess 1 out of 100, I actually use this for some
very outdated plugins who only have widgets and then don't use shortcodes. So, here you go. And
now when you go back to your 'Theme Builder', you can actually choose your sidebar widget
area. Well we have to reload it again of course. And when I reload it again and I go to my
custom body. And then I go back to my sidebar module. Now I can choose my widget
area side-bar posts. And here we go! Here are those sidebar widgets that we have just
entered. Now what can you do with this module? You can style something. So let's say I change the
titles to something else that is all possible, you can make it different size. Different fonts
so you can change anything the way you like it, but the problem is you will change everything
in your module. So not only one widget, no it is every widget. If you want to do only one widget,
you have to do it with custom CSS, it is possible, but it will take you a lot of time. What I also
love to do with this one if you're using it just go for a border to make it a sidebar. As you can
see it, let's make it a little bit more grayish, right this is great. And alright, let's make it a
bit bigger. Just go a little bit of more spacing. A little bit more padding on the left side like 25
pixels, that is great. And now you have a little bit more spacing and you really have a sidebar
because it is just with this thing. Also what I would suggest, if you're using a sidebar, you
go the 'Scroll Effects' and you press this one 'Stick your sidebar to top'. Why is this? Well
what happens if your scroll? It just sticks there on the top that is really amazing. And it
will stop right there, but I have to change it to stop it 'Bottom Sticky Limit' would be
another section, or in this case, another row. See that? So now it just scrolls with me and
it stops right there on another row. So this is pretty awesome if you want to use the sidebar.
Then you can definitely use this one to perform something really useful. Now the strange thing
is, and I don't know if it's just me or that.... I haven't encountered it in anything else -is
that when you use the sidebar module, you will fill it with widgets, out of nowhere, comes this
bar on the right side. I actually have no clue what it is doing there. I do know however that I
always remove it because I hate this little thing. How do we remove it? Well, you have to use some
CSS for that. So we're going to save this one. So you go to 'Custom CSS' and you paste
in this little snippet right there. And that will create this border right to
go to zero pixels. And what does this mean, it will just disappear. Just save it,
save it and we can see on the front end, that this border now is gone. As we reload the
page. Now your border is gone, it has been hidden with CSS. The sidebar module is only useful if
you using widgets that are really out of date, because you don't understand the full power
of Divi, or you just have an outdated plugin that uses a widget and you can only use the
widget, you can place the sidebar module, anywhere on your page, not only in the theme
builder, but also on your page to show just one module or one widget. Just don't forget to
remove the right border. All right, you can find a snippet on for the border in the description
of this video. Let's go on to the next module.
