All Divi Modules Overview incl. CSS Tricks – Part 3

All scripts and CSS snippets: 📜 https://wpressdoctor.com/divi-modules…

⏱️Timestamps⏱️

51:44 Sidebar Module

Thank you for watching, part 4 is here: https://youtu.be/NAWYKQb_L0M 😀

✅For tips and tricks on getting the most out of Divi and WordPress, don’t forget to subscribe: https://wpressdoctor.com/sub

📖Transscript📖
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 https://wpressdoctor.com/ #Divi #AllModules #WordPress