All Divi Modules Overview incl. CSS Tricks – Part 3

Feb 8, 2021 | Divi

In this 3rd video I will continue to demonstrate all Divi modules. I will also show you some CSS with the modules that I use for my clients. This is part 3 of the 5 part series Divi Modules.
👇🏻👇🏻👇🏻 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 ⇒
Hosting & Domain provider ⇒
Speed up your WordPress website ⇒…

I want you to succeed with your website, so lets get started.

All scripts and CSS snippets: 📜…


0:00 Intro
0:39 Persons Module
08:37 Number Module
14:49 Portfolio Module
15:31 Post Navigation Module
20:45 Post Slider Module
32:48 Post Title Module
36:35 Pricing Table Module
47:15 Search Module
51:11 Products Module

51:44 Sidebar Module

Thank you for watching, part 4 is here: 😀

✅For tips and tricks on getting the most out of Divi and WordPress, don’t forget to subscribe:

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.

📖 Read the rest of the transcript at #Divi #AllModules #WordPress

All Divi Modules Overview incl. CSS Tricks – Part 3


Hey Friends, it’s the WordPress Doctor here. Welcome to part two of the Divi – All Modules video series. In this video I’m gonna take you by the hand and demonstrate and show you and explain to you all kind of different Divi modules, I’m going to also show you the most use CSS tricks that I use for my clients on their websites. For example, how can we remove this zero on the countdown timer? How can we remove this ‘All’ tab in your filterable portfolio? How can we add google ReCaptcha v3, but also remove that irritating logo on the front end? And of course, how can we create this gallery module and make it responsive two or three columns on your mobile device. So let’s go, because we’re going to start right now.

For the next module we’re going to create a contact form. Press ‘Contact form’ and as you can see, immediately a couple of fields will appear. The contact form is a pretty basic module that you will use in every kind of website. You have the name, the email address messages, all the fields are right there. So the first thing you will do is, of course, change the fields like you seem fit. So if I want to add another field, just press this button. And here I can enter another field so here’s the idea you have to give it someone so let’s make it a telephone number. This field ID is only for the back end, and the title is what people will see. And now we can just press ‘ok’ and we can drag and drop this field, just to where you want to have it. Let’s have it right there. The problem is now, it is full-width. So what I want, I want to make it… go to ‘Design’ -> ‘Layout’ and press ‘no’. Now you can see it just flips through the half of this module. Let’s make another field next to the telephone number. We’re gonna just clone this one. You have different types of input fields. You can make an input field, a email field, a text area, checkboxes, radio buttons, or select drop down. Let’s make this one a select drop down. And the options will be… as you can see now the placeholder is still “telephone”. So first of all we’re going to change that one. Let’s call this one… the fields ID will be just “Purpose”, and the title will be: “What is the purpose of your visit?” And ff course, now we’ll go to ‘field options’ and then we’re going to create options in the drop down menu. So the first option is: “I want to install rocket launchers behind my headlights like James Bond!” The second option is: “I want to have a ejection seat just like Jason Bourne” And the last option is: “I want to let the puke of my boyfriend being removed from my seat after I drove like a idiot”. Alright let’s save this. And what you can see right now is this field has been added right here. If I’m gonna save this module, and let’s save this page and let’s look at the front end how it looks. And let’s quickly go down to our fields, and as you can see, now you can choose any kind of drop down. This is pretty simple, pretty straightforward. It’s a pretty easy module now let’s style it a little bit more. If you want to style this field just hit on these brush buttons. And as you can see you have the global design, which is the design of all the form fields, but you can also change the design of the individual fields. And you press the gear icon again. And as you can see now you can style it just for that field so if you want to change the background color for example for only the Name field, this is the way you could do this. If you don’t want it, just hit this button, the discard all changes, and you would go back to this. If you just want to change the entire design just press on ‘Design’, go to ‘Fields’, and you can change for example the background color. Let’s make the background color a little bit more smoother. This is very nice. Let’s make a text color white, as you can’t read it. And we want to focus the background color to make it entire black so when you start typing it turns really dark black. This is really nice so people can really see what they’re typing. The focus text color should be the same as the field text color in this case, it is white. With the fields margin, you can change the margin of the entire contract form of course, and use the fields padding to make all fields bigger as you can see. Now we can create really big fields. I really like some more padding on the fields, so that the texts are a little bit more lined out, I really like that. What I still want is to make the field text size a little bit bigger. Yes, that is way better. And the fonts that, of course, go with Poppins right this is smooth. So now it really looks very smooth, you can actually make the title of your contact form. Alright, so if you enter a title, you can see it right there. No you can’s see it but it is right here. So let’s make it white for demonstration purposes. So you can create ‘Contact Form’ right there and this is your title. I actually never use this one, I use a different module for title, a text module or a title module. And that works way better. The success message is the message that people see when they fill out the form and they press Submit. So something like: “Thank you very much. We will be contacting you within 48 hours. The submit button is of course the name of the submit button, and sometimes I change this to to: “Show me the money” or… “Yeah, send me the quote!” And here we go to email, this is pretty important when you attempt to fill out your email address, to which this form will be submitted. So enter your email address And the message pattern -Oh, we can talk days about this one. If you press this button you will see all the field IDs available for this message. If you just leave it empty what I most of the time do, you’ll get all the fields inside of your email, if you want to style this message. Well, you can just enter these things but it’s very clumsy. So %% you have to use your field IDs to create this one. So, for example, message and % well this is not very intuitive and very logical so I want to suggest to just leave it empty and you get your default message patterh. If you see empty mails when people fill it out then you have to fill this out. There are a lot of examples online. Now what I usually do is use this redirect option to redirect people to a “Thank you” page. Why is this important? Well, you really have to have a contact page so you can absolutely track this in your Google Analytics to see what will happen, how many people fill out the form, but just also very handy for other people to know that the form is actually sent out. Spam protection is, of course, very logical to have. Basic Captcha is just this, it’s a very simple math. I would suggest you always use reCAPTCHA. If you want to use reCAPTCHA, it’s pretty easy to do, just go to Google and type in “reCAPTCHA Google” press enter, and here you go to the reCAPTCHA website. If you log into the admin console. You can just easily now add one, for example, this is the cars website, I want a version 3, my domain enter your domain and has to be exactly your domain, or else, it doesn’t work. I’m going to accept this. And I want to send alerts and I press Submit. If I do that, I get a site key and a secret key I just copy this one, go to my website. Copy the site-key right there. Go to the secret key, copy this one copy it right there. The account name will be, because that is my email address and I press Submit. As you can see it has been accepted into the reCAPTCHA accounts. Now we can just save this and now reCAPTCHA v3 will be active on my website, it is very, very easy. So we’re going to style this button, and we’re going to use custom styles -well it is really basic it is just exactly the same as we did with the other buttons so you can just really go all the way you would like to go with these buttons. Of course you have to make it the same as this one, but you get the idea. You could also add a conditional logic, let me do an example of conditional logic real fast. We’re going to add a new field and this will be the field ID will be ‘trouble’ and the title will be “Are you in trouble with the FBI or CIA?” And why, because it’s the input fields, or let’s make it a radio button, and the option: “Yes, I am wanted in 24 countries.” And the other option is: “No, only my neighbor is with the FBI” And the other option is: “I can tell you, but I have to kill you if I do”. And this field is of course required. Now I want to be this field conditional logic. So that means if “What is the purpose of your visit” equals “I want to install rocket launchers”, then this field should appear. Alright, we’re going to save this. Save the page. And when I refresh this page you will see this field, and when I change this one to “I want to have ejection seat”, no nothing happens. And this one is: yes. Here we go, here are the fields. So the conditional logic is pretty straightforward. As I scroll up this website you will see that this reCAPTCHA field is really annoying because it is visible on the entire pages! I really don’t want that, actually I want it removed without a plugin. So how are we going to do that, I’m quickly going to show you, because I am the WPress Doctor and I want to help you out. Just go to your Divi options, and you go all the way down and add some custom CSS, and just paste in this little bit of CSS. This little bit of CSS is in the description of this video, we will change the google recaptcha batch to opacity:0. Press Save Changes. And I reload this page, you will now see that The Google reCAPTCHA badge is gone, and it will still work on your website, pretty awesome.

So the next module we’re going to discuss is the Countdown timer. And we’re going to create it right here so we’re going to add a new row. And I’m going to add a countdown timer Yeah. So the countdown timer is pretty simple, it is a countdown timer. It’s a timer that will count down to a certain event. Guys, please forgive me because you won’t see my mouse (cursor) during this module and also the next module but after that, the mouse (cursor) is coming back. Please forgive me. So, if you press the gear icon, you can just change the date, very useful. Change the time of course you see it changing live. Now, you’re going to add your title right here: “The fun is about to start” and you can create of course, a link from the whole module but I wouldn’t recommend it. Alright, let’s go to the background, let’s make it white. No everything disappears, no we’re not gonna make it white. We’re first going to change the title. Let’s make the title in the font Montserrat. That is pretty cool. Let’s make the numbers, change the numbers to also Montserrat. And let’s make the color a little bit. Let’s see, blueish of course, yes, and you can change the labels, also when you press this brush icon. You can change them to another color. Let’s make them a little bit more white and change the font to Montserrat. Let’s make them a little bit bigger. And we save this one. And actually I want this to be full width. So we’re going to the ‘Row settings’, we’re going to ‘Design’ we go to ‘sizing’. We’re going to make this width go to 100%. And also the max width we’re going to increase it to 100%, and this is very awesome. Now you have a cool full-width countdown timer. So the background is really not what it’s supposed to be. So we’re going to change it again. I really like designing because you always notice different things that you want to change when you’re working on it. Right so now we have this one, and I want also to create a very cool shadow. So we go to ‘Design’, we go to ‘Shadow’, we’re adding the shadow right there. But you must be thinking yeah shadows, it’s pretty boring but no we can give it another color. So let’s go with the blue, and then we’re going to make this spread like this, and we don’t going to give it any, well, just Nope, not any blur. And we’re going to just put a little bit down. You can also make it inside of your module. Alright, now the most common question I get asked is how do we remove the first number on the days, because my event is not 100 days away and it really doesn’t look very professional. So to change that we have to leave the module and we are going to the settings of this page right there. We’re going to ‘Advanced’ -> ‘Custom CSS’, if you just paste in this snippet you can find it in the description of this video, and now the first number is gone. This really looks way better. Alright, let’s go to the next module.

I’m going to show you the next module, its a Divider. Here we go. So with this Divider you can create and make any kind of lines with it. Which is very funny. And if you go to ‘Design’ we go to ‘Sizing’ first, let’s make it a bit bigger. So you see what we’re doing. And if we now go up and we go to ‘Line’. You can change the color of the line. Let’s make it a little bit more of this template. And this line style can be dashed, it can be dotted, it can be double, it can be groove, it can be ridge, it can be outset, it can be a lot of very things. It also can be nothing! And you ask: “Why do you have a divider with no line in it?” Well if you put the line to none, you can add some spacing anywhere on your website that you would like to do this. As you can see you can add some padding right there. And you don’t have to change the margins itself but you can change create a empty space with it. We’re not gonna do that right now so we’re gonna remove those paddings, press ‘reset’. Go back to line again. And we want it to be a dashed line. Allright. The line position is where you want to have it centered within the modules surrounding it. So let’s make it vertically centered so now it’s in the middle. If you go to ‘Spacing’, you change the margin at the bottom to zero, you can see that the line just really goes to stick on the module below it. But we don’t want that, we want a little bit of spacing so that is a nice way to do it. All right, let’s go back to the sizing. And we’re going to make it a little bit smaller. So, now it looks a little bit more nicer. You can change the width of your module right there. You can align it again to another place if you want to have it centered, or you want to have the left side. And let’s make it stick to the bottom of the other module. And of course you can use filters and you can transform it any way you want it. But you can also use the background color to create for example a gradient. Now, if you do this with white or transparent for example you can do some real funny stuff. As you can see, if you do this, we have to remove the design. We have to go to ‘Design’ -> ‘Line’ and change this color, and we’re going to make it transparent. But as you can see now – if you have the background image we’re gonna create the color that we just used. Here we go. And if you just change the starting positions, then now you can use – when you go to ‘Advanced’ you go to ‘Scroll effects’ you make it ‘Horizontal motion’. Then, now you can do some funny things with it. And now you can actually when we change the ending to zero, and we change the viewport on the button to there, you can actually create some pretty funny thing with it. As you can see. So one of the most common question I get asked is: “Can we make this Divider stand vertically, like this bar right there to make it appear between two columns?” Well, yes you can but you have to get a different approach to make it responsive, because if we just go to ‘Design’ and we go to ‘Transform’ and we’re going to rotate it with 90 degrees, then we have to put on the right place and when I just changed my size of my website, it will not work and it will move all around. So what are we going to do. First we’re going to ‘Content’ -> ‘Visibility’. And we are going to press ‘No’. We go to ‘Design’, we go to ‘Border’ we pick on the left one we set the colors allright and then we’re going to make it dashed. And we’re gonna make it 2 pixels. All right, then we close this one, we go to ‘Sizing’. We’re gonna change the width to 2%. We’re gonna change the height to 500 pixels. Look at that. Now we have a vertical divider It’s awesome! But as you can see, this is really not the way we want it. We want it to appear between the two columns. Okay, we close the ‘Sizing’, we go to ‘Advanced’ and we go to ‘Position’ and we’re going to put a position on ‘Absolute’. And now you can see something really has happened. And now you can change the vertical offset to put it on the place that you really like to have, I want to make it, I want to have it here. And let’s lower it a bit so that it lines out with the… So, and I’m going to change this one, so that it lines out a little bit more beautiful, with the image. Now save this page, and when I start moving this page, and we start resizing it, you see it will stay the same. And that is exactly how I like it, it will stay the same on all different screens, of course, you have to style it on mobile, because then it will just get up over here and on tablets. But, of course, style it the way you want it. This is the perfect way to get a vertical divider, which is fully responsive and working the way it should.

So the next module we’re going to talk about is the Email optin. Now the email optin, you can choose to add people to your email subscriber newsletter. So let’s create one real quick right there. First of all we’re gonna add the title. And we’re gonna change the description, and it’s situated in the body. Right, it’s pretty good and here you can add a footer, you can tell us the legal stuff of your newsletter for example: “I will only send you three times a day a email! I promise to not sell your email address to other firms. You have my word on that!” All right, this looks pretty awesome. Now of course, we will connect our email account. Here you can choose your email account, which you use for your online marketing. Just select the one you’re using, let’s check out MailChimp right there. And we can -and now you press “Add” And now you can add your account name and your API key. Let’s try it right now. You log into your MailChimp account. Then you go to ‘Website’, you go to ‘Domains’. Then you go to ‘Extras’ and go to ‘API keys’. Here you can find your own API key you just copy this code. And in Divi you paste the code right there. You press ‘Submit’. And now you can select the list. If you have selected the list, you can press this ‘Save changes’ button, and now the module has been connected successfully to MailChimp, it is that easy, and it works with all kinds of email providers. Alright let’s customize this module a bit more, we go to fields. Here you can change this one to use a single name field. I usually use this, because this is less more of a hassle than filling out two fields. And if your service provider allows it you can have custom fields. Just press this button and you can add new custom fields, but they have to be enabled within your email provider. So we’re not going to use custom fields right now. Well what happens on our success. I want the success to go to a custom URL. Let’s redirect them to the page: /sign-up-thanks/ and that they will see a beautiful page which says: “Thank you”. And we don’t need any queries to go to the redirect URL. This is useful if you want to track it. Spam protection is of course very useful if you want to use reCAPTCHA v3 for example. Well we have just enabled in the other video, so you could just select it right there. We’re not going to use this for now. This will make the module link out to another page or website. For this module I would really not recommend this because we want people to fill this out. So let’s change the background, let’s make it dark blue. And what you can also do if you have a PNG like this one, you can actually change the entire module to go to make it something like this. That is pretty funny if you ask me for a little effect. Let’s go to the ‘Design’ tab. With these options you can just change your layout of your email optin module, anytime you would like. You can do it on the right side, you can do it on the top site you can do the body on the bottom side, just do it the way you like to do. I would have the body on left, and form on the right. So with the fields you can customize of course the background color of your fields. So let’s change the text color of this one make it more darker, and the sort of field focus background colors let’s leave them white and the text color, let’s make it black again. All right with this margin you can actually create some more space between all these fields. And with this padding, you can make the fields even larger. If you would like that. Of course, we’re gonna make this pop out with Poppins. What else I like to do is to really not make these things full-width. Why is this? Well, now you have only two fields and they’re even on one row. So it really feels more easier to fill them out, but we do gonna change the title heading, we’re going to change this to Montserrat, and we’re going to align it in the center I really like that one. Okay, we can also change the title text, let’s make it bigger, and the spacing now that is all right. So, all the other things of changing his module are just very really easy. This is the result message text, this is if you have the success action set to display a message. All right, let’s style the button a little bit more to make it more pop out the background color of the button, you can of course change the border width if you want that it really looks ridiculous. Let’s just remove the border entirely. So here you can say if you want a button yes or no. Now we’re on the sizing page you can make this module, a bit more smaller, which I do like because I really think that this module is really big on the website. You can add a border if you want to, you can make it even go a little bit more round because it’s the style of this website, so make it rounded, that would be really better. You can add a border here if you would like to do that. And of course you can add a shadow. You can use filters to create a more sepia effect on this field, which is really funny in some cases. So with the filters you can do something really awesome. That is: we’re going to change the opacity to make it a little bit more cloudy, but when you hover over it, the opacity will be normal. So this is pretty funny if you now go to the front end of the website, and you can actually see that this module just is really interactive. So witht he transform options, of course, you can just give it a little bit of a more 3D effect, if you want to do that. You can go nuts with this, it is really funny, right, and of course we have the animations we have the normal animations, but I would like to, I think, I would go to a ‘Scroll effect’ because this is pretty funny to make it just fading in and out. So, at the end, this is our beautiful website with of course our beautiful signup module, coming in right there. And if you hover your mouse over it, it just pops out a little bit. This is really cool. So I’m very happy with this one. All right, let’s go to the next module

On our babysitter website the next module we’re going to talk about is the ‘Filterable portfolio’. As you can see when you add the module, it is a huge portfolio with just giant pictures of your projects. Well, let’s just change it a little bit, we go to ‘Design’ we go to ‘Layout’ and you change it to a ‘Grid’. Now, this is more like it. As you can see I now have a module where you can actually change all the projects on the go. So basically the normal one is selected the ‘all’ projects but you can use your project categories. Well how does this module gets his information? Well, it’s pretty easy: When you go to your dashboard and you go to ‘Projects’, you go to ‘All projects’. Here you can see all the projects that you just saw in my filterable portfolio. Here I have created some categories, as you can see and the categories are used by the module to get the tabs. You just add your projects and you just give them the right category. And as you can see those are the categories right here. And here you can see the projects we have just created. Alright so let’s style this module, what can you do with this? Alright, first you go to your content. And here you can choose which categories to include and which one to exclude, for example, if I only want to use the ‘infant category’ I just click on this one, and you only see the infant tab right there. But I want also the newborn, the teenagers, and toddlers on this project page. So, you will see them all right there. It really works very easy. The post count is of course, how many projects, you want to display. Let’s go for three for example, then you only see three in every different category. Let’s go further to the ‘Elements’, in the elements you can choose if you want to show the title, yes or no. If you want to show the category yes or no. And if you want to show the pagination. If I only go for three for example, I would need no pagination. And where is it? Well, it is hidden a bit, it is down here. But I know if you want to have more and it doesn’t fit your layout you can use the pagination to change your layout. Alright, so the categories -usually I don’t show them because I have the categories right up here, but you say, “Well, only if they use the All button, the ‘all tab’, this is useful.” However, I’m going to show you in just a bit how to remove this ‘all tab’ because I really don’t like the ‘all tab’, I just want people to see the categories, and don’t see the all category tab. Just a second, we’re going to fix this. And here you can of course change the background, which we’ll be doing in just a bit. We got to ‘Design’ and ‘Layout’ we already changed it to the grid. And if you click on ‘Overlay’ here you you can choose what overlay you want to have when you hover your mouse over it. Let’s make these Zoom color white. Let’s change the icon to a magnifying glass -that is really nice. And now we can change this one also to a little bit more blueish of the style of this website. And of course with the image rounded corners, you can make the image a little bit more rounded – oh this is a little bit too much. Let’s make it 25px, because it fits the style of this website. Okay. Of course you can make a border on the image, I like this style for this website so this is great. And let’s go with a shadow. And we can also make it white if your going with a shadow then the white is also cool because we have the blue and a white right there so it is great. Okay, let’s go to the ‘Text’. You can change the text of everything so we’re gonna change this text and gonna place it in the center, because I like to change this one. Let’s make it a more Poppins. So let’s go through the next one, click on ‘Text’ and here you can make the alignments of the entire text module I usually use this to center this module because it looks way better right now. All right, let’s go to the next one. The next one is the ‘Filter criteria text’, if you press here you can change the font of the filter. And you can of course style a little bit to make it more blue, or a, let’s make it more the style of this website -this looks pretty awesome. You can make it even bigger, that is… I think it is smaller for this website. We can more add more spacing, I would not recommend that. And of course you can add the line height, if you have multiple rows because your categories are really thick you can change them right there. Sizing is of course very useful if you want to change the max wide of your entire module to make it a little bit smaller. As you see now, the whole design changes of this thing, which is really great if you have a little more spacing, or you just want to make it smaller. If you want to make it full width, you just go to your row settings, click on the row, you go to ‘Design’, you go to ‘Sizing’ and you can change your white to 100% and your max width also to 100%. As you can see now the sizing is just 100%. Well, we’re not going to use it on this website but now you know how you can make it full width. I press CTRL-Z on my keyboard, and we go on with this module. The most common question I get with this module is how can we remove the ‘all’ button and you just go to this one. Because the ‘all’ is just so huge and it shows everything and I don’t really want that. Well, it’s pretty easy if you know how. First of all, we need to add some coding which makes sure that it’s selecting the first one in the projects. So we’re going to add another module and the other module is going to be a code module. And you just paste the code found in the description of this video, save this page. And then also we’re gonna need some a little bit of CSS to hide this button, we go to the Page Settings, we go to ‘Advanced’, we go to ‘Custom CSS’. And there you just paste this code also found in the same snippet. As you can see immediately, the ‘all’ button just disappears. So save this page, and now when we look at the front end of this website, you will see that the ‘all’ tab has just been removed, and you go immediately to the first tab available. This works pretty awesome. Alright, let’s go to the next module.

So the next module we’re going to discuss in this video is the Gallery Module, you can press this big button right there to add some images to the gallery. So let’s press it right now, and select all the images you want to use or just hold shift and press one or press Ctrl and you can use this one, or whatever, just press Select. Let’s go to the next option, we have ‘Image order’ right there. You can make it random so that the images, every time appear random. That’s very cool. The ‘Image count’ of course how many images, do you want to show. On this page, or this module. I’m gonna make it 99. If you don’t want a second row four is excellent. All right, if you go to elements you can disable this one to show the title and the caption. Those are those names down there sometimes it’s useful. This time, I don’t want it. ‘Pagination’ is just when you have less images of course. Link the entire module, I would not recommend that. A background for this module can be useful. As you can see in this design we have the header, and we have the color section right there so I won’t be needing a background for this one. Let’s go to design, and we’ll go to layout, so you can change the layout to a slider if you like to use a image slider. But let’s stick with the grid right now. The thumbnail orientation is very useful, because most of my images right here are portraits. So let’s change this to portrait and see what happens. This looks a bit nicer. It’s more organized. So if you’re creating a website for yourself or your business, I would suggest you make all these images the same height in the same width. You can do it with a simple tool like Photoshop or Paint or whatever you use to change your pictures. Let’s go to ‘Overlay’. The overlay is very useful. And of course, it’s the same overlay we always use. For the icon let’s use this one. It’s the color also used in the rest of the website. So that is a really nice tone. And for the background let’s go with a bit of greyish right there. This is awesome. The icon, let’s change this one because the standard behavior of this module is that it will come and go in the gallery. As you can see, it’s pretty nice. so if you have bigger pictures the lightbox will expand like this, but this is the normal way that it goes. So that’s why I want to use a magnification icon so people know when they click on it, they will get a bigger image. The image itself, you can make it more rounded which is pretty nice. I think this is way awesomer, way smoother than we just had. Let’s add a little border. It’s also very nice it gives a very nice touch to it, and a shadow is very cool. I really liked it without a border right now because of the white background. If you go to ‘Text’ you can change the text below the images so let’s turn it on, real quick. And you can also go to ‘Title’. Your title text you can change the fonts. These are the fonts below all the pictures. You want to have a other fonts, you can make it uppercase you can make it well, anything you want you can do with this module. Its pretty awesome ofcourse. If I want to use this, and our styles were important for me, I would make them the same color as this section below. Why would I do that? Because it really distracts you from the image itself, and I want this module to not distract me, but to get my attention to the pictures, because I am for example a photographer and I want to sell my photos, or I want to sell my services as a photographer. Just make this a little bit smooth. Then you have filters, if you want all your photos to look the same way without using Photoshop every time you can use this one. Just remember also your titles will go with it. This looks like a haunted website so let’s change it back. Animation is of course how does the animations start on your website. Well, this looks awesome. No it doesn’t. But if you want some animation you can add it right there, just make it smoother. You can add a delay if you have more modules, and the starting opacity really depends on how intense you want it to look. A common question I get is: How do I change the width between the pictures? It’s pretty easy but you can find it in the module options you need to go to the row settings. You go to ‘Design’. Click on ‘Sizing’. Click on ‘Use custom gutter wide’ and change it just the way you would like it. If you use a gutter width hat is very small, you should really remove those rounded corners. Now this looks awesome but you see, I really should have made all these images the same height as this doesn’t look very cool. If you like this design you will quickly notice a problem when you look on your website on mobile. Let me show you what happens when you go to your mobile fview, you will see that it all gets stacked. So let’s say I want a two column on my website. Well there is a way to do it, just go to your settings of your module, go to ‘Advanced’ go to ‘Custom CSS’, we go to ‘Gallery item’ and we paste in this CSS snippet, you can find in the description of this video. Now this is 50%, let’s make it 33.3%. And I only want three columns to have on a tablet. Here we go, now you have on your tablet you have three columns.