MODULE 3 - Mastering The Divi Builder
Live Q&A
MODULE 4 - Building Our Website

28 Creating our style guide

In the previous video, we added our color palette in Devi and that went very well. The next step now is to create our style guide. And this again is very, very important without the style guide. We’re going to be all over the place. So I’m going to show you how to create our style guide. And every time you’re going to be designing our website, it’s going to be very easy because we’re going to be referring to our style guide as we design our web.


Okay. Okay.

so for our style guide, we need to have done a bit of research, inspiration and so on so that you can have ideas of how you want your buttons to look like or how would you like certain elements of your website to look like? Over here, I’m back on behance. This is the website that we spoke about before.

So I’m going through this and I’m looking at button styles. So I really liked this solid button here with this arrow. So what I may do is take a screenshot of this or any way that you can remember. How these styles are. So as you scroll through this, you’re getting to see different styles to different elements.

I also like this, a nice big heading here. So these are the sort of things that I’m going to be adding on to my style guide. I also have this different color button here. So we have two colors. We have this dark one, and we also have this bright one, which is also fantastic. So we are going to start by designing our buttons and I can also see here.

That, we also have this nice heading here and, as I go through this, I can see how, the buttons are used as well and even different colors. These are the sorts of things that I’m going to be adding on to my style guide. Okay. Back over here now we’ve added our color palette. So we are going to create a brand new page and call it a style guide.

To create a page, we’re going to come over here to pages and then click on, add.

Let’s call this style guide

and then we’re going to click on use Divi builder.

Okay. So if it’s the first time installing Divi, you’re going to get this welcome. There is a tour that you can go through. Go ahead and start building. Okay. So for this design, we’re going to build everything from scratch. So I’m going to click here on build from scratch. Okay. So, let’s start here with a single column.

So in here, we’re going to add a button. So I’m going to search for button. And again, please take note of how I’m using the Divi builder here. This is going to help you design your websites really, really fast. Okay. So what I do is if I need to look for a specific module, most people would go through here and start scrolling to find which modules you want to use.

In my case here, I just go in and if I need a button, I just start typing and here it is, boom. I just added my button. Now, when it comes to the interface itself, I prefer designing while this is snapped to the left. Now I can see, I have more real estate here and I can see what I’m designing. This is our default button, but ideally you don’t want to be using the default button.

You want to use your own styles. This is what we’re going to be doing next. Okay. Here, the text doesn’t really matter. You can just leave the text as it is. Now what you want to do is to come over here to design and let’s start with stylizing this button. So I’m going to come over here to button, and then I’m going to say, use custom styles for button.

All right. For this one here, we want this button nice and dark. I’m going to go with.

For this button and we need to have it nice and dark. I’m going to start off with, having a background, which is right here. So I’m going to choose my background color, like. No, I can see, I have a border around my button here. So there’s two ways you can do this. You can either give this a color like that, or you can just get rid of it completely.

I’ll just leave it like that. My border radius is fine at three. Style. Now my text here does not really match what I’m looking for. So I’m going to add my color here from the color palette. Now, do you see how easy it is now to pick my colors as I’m designing my button? This is the reason why we need to use our color palettes.

Okay. Let’s move on and now let’s add our text. So the font I’m going to use throughout this design is going to be Poppins. I’m going to come over here, click on this dropdown. Our fonts here, we have quite a lot to choose from, as you can see. I’ve made up my choice when it comes to fonts and we did discuss this in the previous video.

Where I spoke about choosing the fonts that you need to use for your website. Okay. I’m going to select my font here and you can see it’s been updated next. I’m going to choose, my icon here for my button. And I’m going to go with this one and you can see when I hover it looks pretty cool. Okay. Now that I have my texts and I have my icon pretty much, I’m happy with this style of button.

What you need to do now is to come over here. Click on your preset and we need to add, or we need to create a new preset from current styles. Okay. I’m going to click here and we’re going to give this button a name. So we’re going to say dark bar.

There we go. So I’m not going to assign this to a default, but of course you can also assign this to be a default button as you’re designing. So every time you add a button, that gets added on. I’m going to save that. Okay. So now you have your presets, over here. So if at any time you want to come and change the design of this button, you can always come over here to your presets.

You can change a few things and then save it. In my case, I’m happy with the design. So I’m just going to save. I’m going to save one more time. So now I want you to notice what happens when I add a new button. I’m going to click here on this plus button and I’m going to search for my button. I’m going to select that.

And you can see here, we have this style, but if I go to my presets, I can now choose the dark version. Boom, just like that. It saves me a lot of time to design a button every time I need it. This is why we need to create our presets. And this is going to be the foundation of our style guide so quickly here, while we on the buttons, let’s create a few more versions.

I’m going to come over here. And change this color here. So I need a bright version now. I’m going to go to design button and this time for my text color, in fact, I’ll decide what text color I will use soon. I’m going to go for the bright color here, and I’m also going to do that for the border.

Now I have a beautiful color. You know what, I may leave this color here, or you may just change that. A darker version for your contrast, but this doesn’t look too bad. it’s quite easy to read here on this button. I’ll just leave this as it is. That’s all second version. So again, I’m going to come over here to the top and I’m going to now create new preset from current styles.

And this one here is going to be called brown. Button, but of course you can name these buttons with the, whatever you want. I’m going to have this one here as a preset. Every time I add a button to my side, this is the one that’s getting loaded. Now I’m going to save changes and then he’s asking me here, are you sure I’m going to say yes and then I’m just going to save it.

And save one more time. Okay. Let’s add another button here so you can see this in action. Let’s say I want to add another button as I’m designing my site. I’ll just come over here, add a new module, and then I’m just going to search for my button module here. Oops. If I select it. You notice now this now becomes my standard as I’m designing my site.

Again, we need a third version of this button, so we want to have a button which just has the outline. So we’re going to have two versions, a dark one, and a bright one, which has just the outline. Let’s go ahead and do that. Okay. For this one here, I’m going to now come over to design and I’m going to go to my button.

This time I’m going to change my text color. To this dark version. Okay. And for my background, I’m just going to delete that. And now you can see my background here has gone and then next I’m going to add my border color, which is right here like that. Now we have an outline, which is fantastic. All I have to do now is to save this as a preset.

I’m going to come to the top. Click on the dropdown, create a new preset from current styles, and I’m just gonna call this dark outline. Okay.

The idea here is to make sure you save this with colors or with names that you remember. I’m going to save that saved one more time. I’m going to duplicate this. And go into my settings and now I’m going to do the bright outline. I’m going to go to design button. And this time, my text here can be the bright version and I don’t have a background, which is good.

And then over here now,

Oops. And then we are going to need our border. So we’re going to use the bright version. And now we have four styles of buttons here. All I have to do now is to save changes. Let’s do one more example. I can show you where these styles are now showing. I’m going to create a new row and let’s say, I need to add a button anywhere as I am designing.

You can see here, this is my standard, but if I click on this dropdown, I have my dark outline, my bright outline, a doc outline. In fact, I think we’re missing one here. Brought bright outline. Okay. Let’s close out of here. Let’s delete this for now and let’s go back into this one. I’m actually glad that I made this mistake because if you do make the same mistake, This is how you can fix that.

I’ve gone back to my button settings here. All I have to do now is to click on this dropdown and create new preset from current styles. And I’m now going to call this bright outline.

Excellent. I’m going to save this. I want to save one more time. And in close out of here. We have our buttons here, everything looks great. Just to, take a look at our buttons one more time. If I add, say a new section here, and let’s say, I need to add a button in here, I’m going to search for it.

Selected. This is our default. If I click now on the dropdown, I have different options to go with so I can choose a doc button. I can choose a bright one. I can choose a duck outline or a bright outline. This saves me a lot of time when I design and also the quick little items here. Like if you want to change the button style to a different one, you can just add a star over here, which is pretty.

That’s all we need to do here. I’m going to save and then I’m so delete this one. These are our four buttons

in the next video, we are going to be, styling our text. This is our paragraph text also, and also our headings. So let’s go ahead and do that.