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

28b Creating blurb style guide

All right. So in this video, I’m going to do one more example where I style the Divi blurbs. So these are also commonly used as we design our website. So I’m going to show you again, the process of creating them. Now don’t worry. If you don’t want to create all these by yourself, I’m going to have this style guide as a downloadable.

It’s going to be free so you can just download it. Install it on your website. In fact, I’ll show you how to install it. And then you can just go ahead and use that. So that will save you a lot of time, but at least for these few videos, you know how to create your style guide. And I’ll also explain how you need to be used to get as you’re designing your website.

All right. So how are we going to do now is to add another section? So I’m just going to come over here and let’s add another one. So you just hover click on this plus button and we are going to go with regular. So we are going to have, say four styles here. So we’re going to have four columns. Okay, great.

So what we need to work on here are the blurbs. So let’s go ahead and slate. Okay. So by default, this is what it looks like. So we need to have a different style. So we need to have a blurb, which does not have a background, a few that have backgrounds and so on. So for this one here, we are going to start off with a background.

So I’m going to come over here and let’s give this a dark background. So let’s go with something a bit different here. So we’re going to go with it. And, uh, the next step now is to give this a bit of breathing space. Okay. So I’m going to come over here to design, and then I’m going to go to spacing next.

I’m going to give this some padding, so let’s go with, let’s try 20. See what that looks like. I’m going to do 20 again. So this is now starting to take shape, which is fantastic. Next I’m going to come over here too. We’re going to give this some rounded corners three. So just be consistent if you’re going to be going with three or four or five, just make sure that’s what you’re going to use throughout the whole day.

All right. So now it’s time to work on the text. So I’m going to click here on this paintbrush icon. As you can see here, it takes me straight to my body text. So now we need to change this from default to Poppins. So this is our font. So in your case, this is where you add your font. Okay. So regular sizes.

Fine. I’m going to bump this up a little bit to about 15, um, Let’s go with 15. Okay. You know what? I changed my mind. Let’s go with 16. Right? So next, I’m going to add my color here because I want it to be nice and easy to read. I think I’m gone. I’m going to go with this one here. It’s quite subtle. Now let’s work on our title here.

I’m going to click on this paint. Brush, change my font. And again, let’s. Poppins here. We’re going to change the style. This is going to be bold. We got going to increase the size a little bit. So let’s go with, let’s go with 22 and let’s also change the color. So I’m not sure which color I’m going to go with.

So I think I will go with this one and we also need to add a bit of line. So we’re going to go with 1.3. So this is starting to take shape. Now, what I also need to do is still style my icon. So I’m going to come back over here to content image, an icon, and I’m going to change this to an icon so I can just pick any icon here.

It doesn’t really matter which one you choose. Because as you’re designing, you’re going to be choosing a different types of icons anyway. So I’m going to go with this one. Okay. So now that I’ve selected my icon, I need to go in and stylize it. So I’m going to click here on this pencil icon or this paintbrush icon.

So, first of all, I need you to decide whether they should have a circle behind it or not. So if you add a circle, let’s change the circle color. So that’s where it looks much better. And, the icon color now needs to be lighter. So I’m going to go with this. So I think that looks really nice, nice and subtle, but you can play around with these colors here and see which one works.

So I’m going to go with this now, as you can see, this icon here is quite big. So I am going to, change the size by coming over here to use icon font size, and we’re going to reduce the size. There we go. So I think I’m going to go with that. Now my text here and it also needs to be centered. So I’m just going to scroll down here to text and just make sure everything is centered.

And I’m pretty happy with that. I’m going to save this and that’s how our blurb is going to look like. So right now I have quite a lot of texts. I’m just going to highlight. Quite a bit of text here and deleted. So this is what my blurb is going to look like. Now. I think I can add a bit more spacing here at the top.

Let’s go ahead and fix that. So I’m going to click again on this little gear icon and click on a design spacing. So let’s add top and bottom. So let’s go with 30.

Okay. I think we’re 30 works. Okay. I’m going to go with that. So that’s our doc version. So now let’s save it as a style. I’m gonna come over here and click on this dropdown, create new preset from current styles. Go ahead and select that. And we’re going to call this dark blurb.

All right, so now I’m going to save and now we have our preset.

Pretty cool. Now let’s design a lighter version. So I’m going to duplicate this one here to save me a lot of time. Drag it over here. Now I’m going to go in and for the lighter version, all we have to do is to reverse what we’ve just done. So I’m going to go to background. I’m going to choose this one here as my background.

And as I look here, I think everything looks fine here with the icon and the text. So I just need to go into my paragraph text here and change this. So with this, I can just play around with these different styles. So that’s a bit too light. So I’m going to go with this one and let’s also change our heading here, make it darker.

Will that work? Maybe, maybe not. You know what, I’m just going to keep things simple. So I’m going to go with this doc gray. So that’s going to be my light version. The icon here really stands out. So you may want to change this. So let’s go ahead and try and play around with our colors, from our color palette and see what we can come up with so I can color.

In fact, let’s start with a background color here. So if I go with that, so my icon color now can be something dark. So let’s see what can work here.

All right. So I think that works. Okay. I really like that. So that’s going to be my preset. So I’m going to come over here. Click on this little dropdown, create new preset from current styles.

So I’m going to call this light blur.

And I’m going to save this.

Save a game.

Excellent. So these are my two styles. So I may want to add a few more. So this could be just a default one, just a basic one, a which you can add on your side, but, it’s pretty straightforward to do let’s go ahead and do that for the two. We’re going to do a light version and a dark version. So, I’m going to click here in fact, you know what, let me duplicate one of these.

So let’s start with this one here. And drag it all the way to here. So I’m gonna click on this gear icon. So with this, since we’re not going to have a background, we might as well remove the sizes on the side. Remember we added a bit of a size inside infection, or we don’t even need to remove that. Let’s go ahead and remove just the background.

So I’m gonna come over here and just make the background transplant. So since this one here is going to be our default one, let’s add our colors. So I’m going to start off with clicking here on this plain brush. And let’s go with this color here. We are also going to change our title color.

There we go. And for our icon,

I think our icon will work the way it is.

And now over here, we’re just going to call this a standard blurb. So we’re going to create new preset from current styles, and we’re just going to call this standard blue.

Right. So what we’re going to do with this one here is going to be our default. So I’m going to assign this to the default and save that I’m going to say yes, and then I’m going to save changes. Okay. So that is our standard. And then finally we need a blurb with an image. So I’m going to come over here.

In fact, you know what, let’s just use something we already have. So I’m going to duplicate this one here, drag it’s to the right, and then I’m going to go in. So over here to add our image, just click on image and icon and then remove.

The icon, and then I’m just going to come over here and let’s give this some rounded corners. So let’s go with three

and that’s pretty much all we need to do. Now. I’m going to come over here to my presets, create new presets from current styles. So I’m going to call this blurb with image.

Excellent. So now we have all our blurbs, they’re all in different styles. That is fantastic. I want to save them. Okay. So these are the different styles. If you want to go ahead and add different variations, different colors, it’s really unnecessary because what you can do is you can just choose a preset and then just change the colors around as you’re designing your website.

In fact, I’ll be showing you how to do this as we design this. So as you can see, it is a. Easy to go in and create all the styles you need. So in this case, I, we added blurbs, we’ve added our text, our headings. We also added our buttons. So you can decide what else you want to go in and create. So in this, so in this case, if I duplicate this and create a regular section, So let’s go with three columns.

So when we click here on this dropdown, you can see, we have cold actions. We we’ve done the button already, so we have a call to action. We have a bar counters, we have accordions. So some of these may not be necessary to do because they’re not used. Um, a lot of the times. So this countdown timer. Yeah. It’s something you can work on, but again, it’s not really used email opt-in is important.

I think this one here needs to be designed. So from what I’ve done so far, go ahead and, create all these, other styles for. Your different type of blurbs and have your style guide. But as I mentioned, I’m also going to expand on this and add more elements to it. So it becomes a complete style guide for you guys to download if you need to use it as you’re designing this.

So, in the next video, I’m going to show you now how to just label this and make it easier to use, if you want to use it on other websites. Okay. So seeing the next.