In this video I will demonstrate all Divi modules. I will also show you some tricks with the modules that I get the most questions about! This is part 1 of the 5 part Divi Modules series.
👇🏻👇🏻👇🏻 Start here 👇🏻👇🏻👇🏻
Do you want to support my channel? Leave a like or buy Divi with 20% discount via the link below. That will help me enormously to create these free videos for you and keep going!
⇒ Software that I recommend:
Get Divi with 20% discount ⇒ https://wpressdoctor.com/getdivi/
Hosting & Domain provider ⇒ https://wpressdoctor.com/nr1webhosting/
Speed up your WordPress website ⇒https://wpressdoctor.com/nr1cachingpl…
I want you to succeed with your website, so lets get started.
All scripts and CSS snippets: 📜 https://wpressdoctor.com/divi-modules…
⏱️Timestamps⏱️
0:00 Intro
0:37 Accordion Module
5:42 Audio Module
8:34 Bar Counters module
12:18 Blog Module
16:10 Blurb Module
19:42 Button Module
22:50 Call To Action Module
26:41 Cicle Counter Module
30:29 Code Module
31:40 Comments Module
Thank you for watching, part 2 is coming soon! 😀
✅For tips and tricks on getting the most out of Divi and WordPress, don’t forget to subscribe: https://wpressdoctor.com/sub
📖Transscript📖
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.
