Hey friends, its the WPress Doctor here. And in
this video, I'm going to take you by the hand. We are going to walk through all the Divi
modules. I know there are a lot of modules, but I'm going to show you how I use them, and
I'm going to answer the most asked questions about the modules. For example: "How can we get
this blog module to line out perfectly?" And also: "How do I add this toggle button back into
the accordion?" I'm gonna help you with that, its pretty easy. But because of Divi has
so much modules, I will be making a five part series of this video. So buckle up,
because part one is about to begin.
So the first module we're going to insert here
is the accordion. Let's press this button, and here you can see that the accordion just already
starts out. So what you will see is that you have two tabs right here, you can duplicate it to make
more of them. And if you press on this gear icon, you can change your title and your description.
So for example, let's ask this question: "what are your opening hours?" "We are open between 20:00
and 20:10 so you better be quick!". Don't forget, when you change the text press this 'Save Change'
button right there. There are a lot of things you can change in this module. As you can see, you
can change the borders, the titles, the text, the background, the icons, there's a lot we can
do. So let's change the background color of the close toggles, and we're gonna make it this. Now
we can't see our titles anymore. So we press on this brush, and we're gonna make it white.
And then the background of the open toggles, let's make it also a bit lighter. Alright. Now
we can't see this one, so we press on this brush, and we're going to make it with also. And
then I want this title, I want it to be Poppins, its very popular font. And
we're gonna make it a little bit bigger, but not that big. Alright so this
is very clean. This is a little bit small, 14. So let's make it 18. You can see now you
can change this all and you can of course change the icon. Change the icons used in the
toggle. Uou can also change the icon font size to make it bigger or smaller. But I think this is all
right. The most common question I get asked is: "Is it possible when people load the page that
this one is closed on default? And how do we do that?" Well, it's pretty easy. There is no
setting to do that. I think Divi will add it soon, but you just copy this one, just clone it. Go
to the settings, change the title to Placeholder -that's only for you, so you know that
there is nothing in there. You go to 'Advanced' -> 'Custom CSS', and then we go to
the main element and we type some CSS: display: none; And that's it! We press save this one. So
now we have a placeholder who actually is open. But because we hidden it using CSS that
works really awesome. Now another question I usually get is: "How do we get people to close
it again, because when you open it, you can't close it anymore as you can see. There is no way
to close this thing." Well, it's pretty easy if you know how, what you actually need for this
is a little bit of script. So we close this one and we're going to add another module, the code
module. And it's pretty useful to add some code. So in this example, we're adding some script.
You can find this script in the description of this video. Press 'Save Changes'. I also want
the the borders to go a little bit nicer, I would like to have a black border. Now this looks really
nice, let's make it three pixels. And also I want a little bit of shadow on the toggles and we
want to have them a little bit more darker and like this. Alright, so now when we add a
background to the section, it would look really great. If my style - my website is in this
style, the orange and the red. Well, of course you can style it yourself. And of course you can
add a background image and now you can see that these things are really nice. I think it's a
little bit too dark so you can make it a little bit less dark. But we're going to save this. And
now when you look at the front-end of this page, so upon loading, we see that it's closed
on default, and when we press the button, it opens. But as you can see, there is no closing
button. Well, there is, but it is not visible. So what we're gonna do, we're going to the
page settings, 'Advanced' 'Custom CSS', and we're going to add a little bit of CSS to show
the icon right there. Press the 'Save' button, press 'Save' again. And now, when we look
at the front end, and we refresh this page, you will see that the toggle button has
just appeared right there. So now you know how this accordion module works
and what you can do with it.
The next module we're gonna to talk about is
the audio. This is a pretty funny module as you can actually upload any audio file to
get listening by your visitors. So let's make it real quick. Title is "Singing
out loud". The artist is "The awesome WPress Doctor" The album is Divi 101. All
right, let's add some audio right here, we're going to upload it. So make sure you upload
a mp3 file. And then we press 'Upload an audio file'. Here we go. Let's customize it a bit more.
Let's add a image. Oh, this is a beautiful one. And let's add a background to our module. We'll
just choose a background that you find useful like this one. You can also add of course a
gradient and you can of course also use a image with the parallax effects - Pretty awesome if you
ask me. When you hover your mouse over the module, you can of course change the image, you can
change make it more round, for example. So you can really make a portrait if you have a
image with a background, but this is a PNG. But it also looks nice this way. You could
also add a image border to it. I would also add shadows. Well you can do it all. Oh, let's make
the font a little bit more cooler. Let's make it a big, a little bit bigger. And let's make it bold.
Now I'm pretty happy with it. You can also change the caption text. Make it also bold. No, let's
not make it bold. I think light was awesome. Alright, and we're gonna place it on center.
And we're gonna change the color of it. You can customize anything within this module. This is
pretty ugly. But hey, who cares. Of course you can add a border, it's the same with every module
inside of this. Let's make it a cool border, but not the standard one. But let's give it a border
on the top for example. And let's create a dashed border. Okay, so now this is really awesome.
No, of course not. But you get the idea what is also possible with this module. Let's save it and
let's see if the nice player works in real life. Yes, there it is. It is just works. Just
play to check if it works. <singing> I am the greatest WordPress doctor in the world.
You're listening to the awesome sound of the WordPress doctor singing out loud </singing>.
Okay, okay, pretty cool. next module.
So the next module we're going to add are the bar
counters. So the bar counters are just what it says it's a bar, with a counter inside of it. You
can make use of this when you are talking about your own goals or specialties, or your talents
or anything like that. That's add this one. We're going to add another module on top of it,
so it is clear for people what we are doing. We're going to add in "My learning curve".
And we're going to place that on top of here, let's make it a heading and you
can see it's beautiful right now. Let's change this one "My learning
curve" alright. WordPress general: Mwah, i'm at 40% right now. Divi modules. Well I'm just
starting. I'm only at 5%. And the designing websites. Nah, I think I'm
pretty doing well yes alright. So actually, you can do this with all kinds of things. And
the funny thing is you can just click on this and drop it anywhere. So then we have nice steep
curve. Maybe it is even better if we go from 5% 25% to 40%. Alright, you can even
close the percentage sign on this one, you can even turn it off. So that's very nice.
Now with every module, you can style anything. So with this button, you can style the font, let's
take another font, let's go with the Poppins font, make it a little bit bigger. And let's change
also, the color of the background clor. Well, it's not actually the background color, its the
color of this bar. So let's make it red again. And here you change the sizing. Now, this
is very useful, because most of the time, your module is just like the half of the row. So
you can change it right there. If you change it, don't forget to change it back on a phone because
or else it will not fit on your page. This totally doesn't fit at all, but it's just for the example.
So the most common question I get about this module is: "How can we make this thing bigger?"
Well, it's really easy: you go to 'design', and then you go to 'spacing' and we are just going
to give it a little bit of padding right there and there. So now you can change your padding up and
down so that you can change the width of these bars. So the bars are pretty cool. And
you can of course, change the background, so you can make it even more interesting. And
then, if you want to change the background of the bars that are not filled, you can actually go to
the background. And here you can change this one. So if you want to give another color, this
is the place to do that, I think is hideous, so we're just gonna reset it and make it a little
bit white. But you could also make it transparent, that is also very interesting. If you know
add -for example-, a border that would be really funny. And if you save this module and
you go look in the front end, you'll see that just refresh it, you'll see
that the bars are actually loading inside of your bars. So you get a really
nice small effect off your bars. Pretty cool.
So the next module is the Blog module. If you
press the blog module, then you immediately see that this is the fullwidth blog module, you
could change it, go to 'Design' -> 'Layout' and go to 'Grid'. Now you have a awesome grid.
So if you just want to style any elements of this blog module, just press the brush button and
just change it the way you want. There are a few things that are very important in this one.
One is content elements. And you can easily change the elements on this
module. So I would like to see a read more button. I don't like the style of
this button. So let's make it a little bit... another color, make it a bit bigger. And let's
get a little bit of Poppins right there. So it will really pop out into my face. Alright, I want
this one to be aligned in the middle. And I want this to be a different color from the rest. And
also I want to give it a little bit of alignment, alright now it's very clear what to do. So what I
also often do is just not give the image a border but to give the entire thing a little bit of a
bigger border and make it a little bit darker. And what I mostly like is a shadow on it. Now,
these are all easy things. And you can just do it right out of the box. The question I get most with
this module is: "Hey, WPress doctor, all these modules are not the same height. How does that
work?" If you go to the settings of your row, and you go to 'Design' and you go to 'Sizing' and you
say 'Equalize column heights', nothing happens! How is that even possible? Well, let me
give you an idea how to fix this. So to get all these modules lined out the same height,
we have to do something, press on the settings, go to 'advanced', go to 'CSS ID & Classes' and
enter the CSS class "et_blog_grid_equal_height" and save this module. So when you've added the
CSS class, now we need to add some coding right to this page. We're going to click over
here. We're gonna add the code module. We're gonna paste this code in right here. You
can find it in the description of the video. Press save, press save page, and when
I reload the page you can see that all columns are in equal height. This
is pretty cool. You can also make this into two columns and doing that is pretty easy.
Press the gear icon on the module, go to 'Design', go to 'Layout' and put it back on fullwidth.
Then we go to 'Advanced' -> 'Custom CSS', go to 'Main element' and paste this. Here you go,
now it is two columns. Now, this doesn't look very nice on the backend. But if you save this
page, and we go to the front end of the website, you will see that it looks really awesome.
Well, no, it doesn't look awesome, it's a mess. So what we need is a little bit of CSS to fix
all this. Go to the settings of your website. You go to your 'Theme Options', we're just going
to add a little bit of styling right there, we press 'Save changes', and then we reload the page.
And as you can see, something has happened well, it is not looking very pretty. So you could still
style it the way you would like to do it. If you want to make it four columns, just press this
button and go to the 'Advanced' -> ' Custom CSS' and make it four and press save. Now this looks
like a giant mess. So let's press save it. And let's see how it looks on the front end. And
as you can see, now we have four columns.
So the next module we're going to talk about is
the Blurb module. The blurb module is very nice and I use it a lot of times. I usually use it
this way. Let's add a title and a description. After you've added a title and a description,
you can add a image, for example this image, but I would prefer to use a icon. You can do it
with a image, but you could also choose a icon right there. So let's choose a awesome font, and
we're going to style this icon. Press on the brush icon, we're going to make a beautiful color. And
we're going to place the icon on the left side of the text. So now you have step one. Well, the cool
part about this one is you can also add a circle to it, which is pretty awesome. You can also only
add a border to it, which is also really great. And you can of course use a little shadow to
it. So you can style this icon really the way you want it. You can also make it a little bit
bigger, because I think its a little bit small. Let's make it like this. So let's make this a
four column width. And we're going to just copy this blurb, place it over here. And
we're gonna just change it to step two. And of course, you would need another icon
so we just select another, like this one. And you could just save it there. Now, it will be better if you have a background
right there. Let's use a image for that. And you can see that's it is way cooler if you
now change the blurb. So we're going to change the fonts, we're going to make them white,
so you could actually read them. So you would need to style them. And
I really don't like that white circle behind it. So let's just make it a little
bit lighter. Let's just create another module like this. Let's style it a bit more. Make the
font, let's go with Poppins I really like to pop. Alright now, if you want to use this style on the
other blurb, you just press this button, and you go 'Copy module styles', then you just press
this button and you do 'Paste module styles'. That is not useful if you're having a lot of
blurbs. So let me show you another way how to do that, you can just change this color right
there. Let's say I want it black. Just save it, press this button and say 'Extend
the styles', you want to extent it to this row, this section or this column. Let's do
this section, press 'Extend'. Now you can see that all the icons become black. It's a very nice way
to style all your blurbs throughout the page. What I really like to do with these blurbs is that they
pop when you hover over it. So you go to 'Design', you go to 'Transform', you see hover option, you
press hover, and you make them a just a little bit bigger like this, and you press save. If you save
this page, and I go to the front end of the page, you will see that when I hit my mouse over it,
something will happen. And that's pretty cool.
And the next module is the button. Well we all
know the easy button. It is just a button which says click here. Of course you can change here the
text of the button here, you can enter the link of your button -that is pretty useful- use the same
window if it's on the same website, use a new tab if you're referring to another website. If you
go to 'Design, you can align it within your row, that is pretty obvious, you can change the colors,
I would not use this one to change the colors, I would just go to 'Button' and use the custom
styles for your button. And here you can change anything you would like with your button. It is
very good common to save the button from the start when you have designed your button and you're
happy with it, go to 'Presets' and create a new preset from your current style or just add - edit
this preset style. And now if you want to change your button, then it will be changed throughout
the entire website, which is very useful. More on presets in another video I created: '22 Things
you're doing wrong with Divi'. Allright, you can give your buttons also a nice shadow, which is
cool. If you have a white border, then it's pretty cool to do that. What I like to do sometimes is
to create the button background. Go to hover, and I like to make it another color. So when
you hover on it, it just changes the color. And it's pretty cool. Let's just save it and
see how this button works on the front end. As you can see, it really pops out right there,
it is cool. So people definitely know what's going on. Now you can also change this icon,
just go to your button and go to your 'Show button icon'. I can even turn it off then
you see no icon at all. You can use a icon, any icon you'd like to do. Here you go, now it is
really 'like this video', it's real great button there. Another thing you can actually do with
this button is to go to 'Transform' and to make it really stand out on hover. It's really funny
to use these skew options, and just save it. Now when you see this page live, something really
happens with this. Now, I would suggest not to use these kind of animation if your target audience
is not expecting such a playful button. If you don't really like the alignment of your button,
you can change it but you also have a little bit- of course you can use the spacing just to
get it somewhere you would like to have it. But there is another way you can actually
move it you go to 'Transform' and you go to 'Transform translate'. And you can actually use
this to place the button anywhere on your screen, just remember on our devices is really
going to get crazy. So you have to really go to this section, and go to tablet and
phone to see how it goes there when you're using this transform Translate Option. Because this
CSS can really mess up your website's layout. Let's go to the next module because the
button module is really straightforward.
So the next module is one of my favorites, it
is the Call to action. With the call to action button you can really create something awesome.
Let's make our call to action right there. And let's add the content right also there. And
let's create a awesome button which is "Subscribe right here". Now you won't see the button unless
you enter a link. So the link is /subscribe/. And the target is a new tab because I will be
linking out to a new place. Now the subscribe link URL - this is only for the button. But
you could also use the entire module to make it a link. So now the entire module is a link and
we're going to do it in a new tab. Alright let's go to the background. And we're gonna make this
one a little bit of dark red. So it really pops up your screen where you have other things. And
when you hover over it, I want it to be actually greenish! So there is a really high contrast right
there. I like this one, I'm going to save it. I want this call to action the fullwidht
on my screen. So I go to the row settings, go to 'Design', go to 'Sizing' and I enter
my width to be 100%. Then I go to the max width and I also add 100% and here you go.
It's beautiful. I'm going to save this, save this page and let's see how it looks on the
front end. And when I hover my mouse over it, it just turns green. Now let's do another fun
thing with the call to action. So let's just add a premade layout from Divi itself. Let's use
this one, yes, it should not replace it, just place it underneath it. As you can see right now
we have a little bit of content of the template. So let's use this one and drag it all the way
down there. And now we're gonna add a cool effect, I want this section to really hit on the one below
it so I change these section and make the padding zero in the margin also. And I go to my row
and I'm also going to make the design, spacing, and the bottom is zero. And as you can see right
now, it just really nicely close to the other one. Now let's add a cool effect on this module,
just press the call to action settings. We go to 'Advanced' we go into 'Scroll effects' and we're
going to do a 'Horizontal motion'. Now this is pretty awesome! As you can see, when I scroll the
page, it really will pop into my screen. Alright. So what do I want to do, I want the ending offset
to be zero, that means it is in the center. And I want the starting offset to be -50. And as you can
see right now what happens, it will really flow into my screen from the left side. This is pretty
cool. Let's see how it works on the front end. This is a beautiful template from Divi. And when
you see -Whoa, here it comes. So this call to action is really in your face right there and with
everything. Now you can of course style the title, style the texts, style your button. But as you can
see, I really liked this kind of call to action because it is really straight to the point. Now
with this module, of course, you can change the background into an image or anything else. But
as a call to action, I would really like to keep it clean, and really make it pop out and stand out
between all the other content on your website.
So we're going to the next module. And the next
module is... a circle counter! So let's create a circle counter. And because we're talking about
organic materials with soap we're going to tell them how much organic materials are in there.
Well of course, we got a little Tree Bark, that is always 80% of soap -you didn't know
that, didn't you? And we're gonna save this one. And then I'm gonna make another one. And the soap
also contains 10% of octopus slime. And of course we have another. Yeah, the 5% is just
marketing terms nobody knows actually what's inside of them. And the last 5%
will be a unhealthy color additive. Okay. So we're going to change the numbers a bit: 25%
is this one, let's make this one 30 percent. And let's make this one 70%. Well of course, as
you can see, the numbers don't really add up. But that's okay. Now we're going to style all
these circles. Let's make first the circle a little bit more bluish because our style of
the website is also bluish. Let's make it, let's see, this one is cool. All right,
let's make the number a bit more black. So it pops out a little bit more. You might
have guessed it, we are going for Poppins. We got to make it a little bit bigger and not
too big of course, then we're going to save this one. I really liked this one. So we're
going to do, we're going to extend this style to the other ones in this section. Wait a minute,
let's do it this row to make it safer. Right now they're all the same. All right, so now we're
going to style this blue circle right there. Let's make it a bit more bluish from the other
call to action. Okay, and I want to extend this style. So we press this button and we press
'Extend circle counter styles' to the entire row. Extent! Now they are all the same, and it looks
pretty awesome. Of course you can also change the sizing of it, you can make them smaller, but if
you make them smaller, make sure you also make the number text a little bit smaller. You can also
make it more spacing, I don't really like that. So you can change all the title text and the number
text. Let's also make this one a little bit nicer. And you can align the different sizes but I
would really suggest you keep it in the middle. With the size you could actually create
quite a nice effect. If you go to this one and go to sizing and you change the size, you can
really make them pop out if you want to do that. 'Design' -> 'Sizing', make them a bit smaller. So
it is just what you want to make stand out, it can be done this way. So it's pretty straightforward.
It's just a circle counter settings. And what does it look on the front end, let's save it.
If you just load this page, you will see that the circle counters are working perfectly. Really
awesome. Alright, let's go to the next module.
And the next module is the code module. It is very
straightforward. And I can be very short about it. We have seen it in action with the other modules.
Just paste in your code and make sure that after pasting your code, that you lock your module
so that no thing can be altered or changed. And you can just use it in this page. Now with the
code module, just know when you enter code... when you enter code, it will only be used
for this page, you can also use it for script. And it will look like this. And of
course in between you enter your script, you can also use it to add some styling, some
extra CSS. I would really not know why would do it right there. Because there are already
three places to add styling to your page. But it might just come in handy. I always use
this module also when I want to enter a shortcode, for example, for a Gravity Form or another
plugin I've been using, and I will be using this code module to enter the shortcode.
It really works awesome.
So the next module is the comments. So with this
comments module, I can place anywhere on any page and any post a module so that people can comment
on this page. Let's see how it works. Because right now you cannot really do anything. So we're
going to save this page, we're going to add a comment. So you can see what happens when we edit
the comments module. So right now you don't see any comments, because I have closed the comments
for this page. So I have to go to 'Edit page'. And then I have to go to 'Discussion'. And here I have
to press 'Allow comments'. Then I press update. And now it will be possible
for us to enter comments. I then refresh my front end page. And now you
can see that it is possible to submit a comment. So let's submit a comment. And we can get back
to the back side. "Hey there awesome Doctor, your videos are great! I just subbed and liked
all of your videos! Can I get your phone number?" And the name is crazy -NO- crazy lady.
And the email address is Clady@WPresscom and the website is wpressdoctor.com.
All right, we submit this comment and someone else will reply and says:
"No offcourse not. Are your a troll?" Name: Troll police. And the website is... Allright
so we submit those comments. And now we have a few comments, which we can work with. We are
going back to the back end of this page. So as you see now on the back end, I have two
new comments waiting for moderation. Let's see what it says. These are from the crazy lady
and the Troll Police. So let's approve them, and let's get back to our page. And now you'll see
we have the comments and the submitted comments. All right, let's fine tune this entire module.
As you can see, we can first change the titles. Of course, let's go with Poppins. And let's
align it to there. Then we have the avatars, we can make a round image with them. These are
just standard options of gravatars and images, so this is really great. This looks a little bit
more better. Let's change the names. Also Poppins. The comments themselves, let's change them to
Ledger. And of course you can submit a comment. Let's make this a little bit bolder and
the comments section I really don't like this gray area. So we are going to change it to a
little bit more bluish. I would like to have more dark bluish. And we're going to change the
field text to white, so you can really type it. And when the focus comes to it -so when
you'r going to type- it's going to turn white. But then you can't read anymore. So we use
this black. "Here ya go its a little test!" Isn't that awesome? I really don't like this button it
is really ugly. So we're going to use a custom button. Of course, let's make it white. Let's
make the background color a little bit like this. And I really want to change the font, let's
make this Poppins. This is way better. Also, I want a icon. Submit our comment, the icon
should be white, right. You can style the entire button as you would usually do with buttons.
Let's add a little bit of shadow allright, this box is just pretty ugly now. So we're
going to change it to white and it's back. And when you start typing, it just stays
the same, why change it whenever it works. But it is nice if you could add a little bit
of a border to it. Let's make a little bit of border to it. And it's nice if you have a
double border. And the gray is that's making the dark red from the buttons. Alright, this is
way better. Now if you want to style it, you can always change of course, the meta also is the text
after it one. And that is great. Okay, so now we have a quite a different form. So that's really
looks great. Let's save it. And the gravatar will be added if people have a account with
gravatar.com and their image will appear there automatically. So that is really cool. Now the
beautiful thing of this comment module is that you can place it anywhere in your page. For example,
if I have this Handyman Services website, you can just place the comment any place you would like
to have it. So let's put it down there. The only thing is we just have to style the buttons back
to blue again and then we're all set and done. Isn't this great? The comments module is very
useful if you have an engaging target audience.
