Transcript
Introduction
Styling your site with global styles. Learning Outcome, change global styles to reflect your own brand. Change typography, colors layout, using the font library feature, how to apply a color palette change to an accent color, change the global style of blocks example of quote block. A couple of resources to think about beforehand is font pairing. A good design principle is to pick a one style of font for your heading and a different font style for your text. Here’s an article from Google Fonts. Another resource is the font pair website FONTPAIR. Within their pairings tab, they’ve paired together fonts that work well. Color Palettes is another thing to think about before designing. Here are two resources that have free access Coolors has a trending color palette, which will give you the hex code number, which is always good to jot down so that you have those colors. Canva also has a color palette that’s free.
Global Styles
We’re gonna go to our dashboard now. And we’ll look at our site toolbar on the left, and go down to Appearance and over to Editor and click on that. We’ll go in under design, and go to Styles. Click on that. And within the style Styles menu, you will see an icon which is the Style Book and we’ll talk about that in a later lesson. And the pencil icon which when I hover over says Edit style. So we’ll click on that. We’re going to look at browse styles now.
Browse styles
I opened up my right menu at the upper right hand corner is a halfmoon. And I hover over that which says Styles. So I’m going to go down to Browse Styles. The Twenty Twenty-Four theme comes with eight variations. The variations include different color and font combinations. When I click on one of the variations, I can see instantly how the different blocks will look on my site. I’m going to stick with the default theme. And we’ll look at maybe changing a couple of the colors to better represent my color palette. Then go back out to the Style section.
Typography
This section manages the settings for font family’s size appearance, from text to links to buttons. A good rule of design is to have, like I said before, one font family for headings and a different plug-compatible font family for the text. A new feature is our presets, which allow us to look at the different font combinations. And if we wanted to change those, even though I’m in the default theme, I can still change the fonts, how I would like. The fonts that come with the theme are listed here. And you see that I have different combinations variants. So that means I have to wear variations of this one and two variations of this one.
Font Library
A new feature is to manage your fonts. And if you hover over this icon, I’m going to open up the font library. So the theme fonts are listed. Like I said, I also have the option to upload or install fonts. So, let’s look at installing fonts first, and we’re going to connect to Google Fonts. So we need to allow access to our Google fonts, so we can scroll through, there are 390 pages as of this recording, so there’s a lot to choose from. So I had done a little bit of research. And so I know that I like this one particular, Open Sans. So I’m gonna click on that. Now the Open Sans, I’m gonna use for my main text. So I don’t need follow these. And so I’m planning ahead that I need a, at least a normal, and I like it a little bit darker than the 300 normal. So I’m going to pick the 400, I’d like to be able to make some words a little bit bold. So I’m going to pick the 700. I’m also going to pick an italic, again, the 400 and a bold with that, so I have four of those. So I’m going to hit click Install button at the bottom. And if I scroll back up, it says that it was successful. So when I go back to the library tab, I see that install fonts, I have my font there, and I have the four variants active. The other way to upload is to upload. So I’m going to click on Upload. And just to remember that upload fonts appear and can be used, it needs to be support, you need to use a supportive format of a TTF, OTF, WOFF or a WOFF two format. So in the middle is the word upload font, I’m going to click on that. And I already have a folder of a font that I like, I’m going to open that font. And again, I don’t need all of them. But this is going to be the font for my headings. So I definitely want to have a regular and I don’t need any light. I’m definitely would like a bold, because my headings I’d like to make bold. So I think I’m going to just stick with that because I don’t want to do any italic headings and stuff like that. So, again, I’m planning ahead of time, but is that beneficial for these steps. So the font was successful, I’m going to go back to my library, and I see that that font is available now. So I can close this up. And if I look over on my right menu, I see that I have those two options available for me too.
Elements
The other section down here is the elements. So I can go in and on a global level, change all of my text. So now that I’ve added these two new fonts, I’m going to go into text. And I want to change it to the Open Sans. Okay. And then I want to keep it regular. Okay. So we’re good with that, we’re going to click Save.
Headings
And it’s going to save that, and I’m going to click back out and go into my headings. And so now the headings have different so I could do all of my headings, the same font family, okay. But remember that we have one h one per page, and then we have to do our structural formatting, then the next one would be an h two. And then we would go into h threes, and so on. So you see that there are different sizes of the font. So I probably want to kind of go through and style each of the font, double check the sizing of that is the default sizing isn’t what I would like if I would like maybe the H threes to be a little bit bigger font, I can do that here. So let’s look at this. We want to change our font family to Bellota and I want to make it the bold Okay, and I’m gonna go a little bit bigger than extra large because the font family is on the smaller sites. I’m going to click on this we’re using rems Rem is just an easier to when you when it goes down to mobile, that it sizes a little bit better. So let’s go to a 4.5. So you can see the difference up in this little window at the top. I’m not seeing any change over here. It might be just a little bug within there, so I’m going to click on that and save it and save again. And then I can go to, like I said, the h two is okay. And we can go to the all? And I need to make sure that well, no, yeah, no, yeah, let’s just see, you can always change your design in the middle, right? The h two, I’m going to keep in the Bellota. And then like that side, so I’m gonna say that, let me go back. Because I don’t want all the font to be, can I just realize that I wouldn’t want the H threes to be the fancier font. So the H threes, we’re going to just make as the Open Sans. But I do want to make it a little bit bigger. Okay, so I’m gonna do that. And let’s just look at our front end to see what happens there. So we’ve changed that to the bold that too, and that is staying. So things to play with on that. So I’m going to click back out of typography.
Color
The next section is color. So our color section takes care of kind of fine tuning our color palettes that we picked. Remember that I picked the default, and the default palette has 10 colors. Now if I’ve gotten this far, and I might want to change to one of the other ones, or just at least see how it is. I do have access to it right above. So if I click on the 10 colors of the color palette, we have the palette, we have our solid and we have our gradient, my focus just more on the solid right now. And like I said, there was one color this orange that I probably will not use, but I did want to kind of change that. So I can go into themes and the three dots over here. Click and it says Show Details. Okay. So the close up is going to show after I’ve changed the color. So the reset colors will appear in that, as of right now where I’m at on here, it just shows the show details. So I’m going to click on Show Details. And what’s nice is that it shows the names of the different colors. And so I want to focus in on accent number three. So if I click on that, I can go ahead and change the color. I’m gonna change it to more of a bright red, a deeper red. Okay, so I found that I’m happy with that it’s changed. And then I have to make sure I hit done. And then hit save. Okay, so on doing the color setting, it’s nice to kind of just double check to make sure what you have changed. So don’t just keep looking. Alright, so I can also add a custom color if I wanted to add more colors within here. So now that we go back out to from our palette, we go back to our colors menu.
Colors for font types
The section down below is our colors. Okay, so we have. We can pick our basic text background heading, we could also do the H ones and stuff too. Okay. So what we want to do is the button. So I’d like to change that one up and have it as a universal color. So if I click on the button colors, I have the option for the text in the background and gradients. So let’s look at the text. So right now it’s white, and I know that we’re going to kind of keep that so then look at our background and we’re gonna change that to red. Okay, so now we’re good with that. So then we make sure we hit save up here and that will change the global styles of the button and the color setting. So then whenever I add a button, it will be that those two colors right we’re gonna go back out.
Layout
Our next section is layout. Alright, so we go down to layout. And the layout section styles the main content area, and gives the content and the wide in pixels. Okay, so that is from your left to all the way to your right. These are the default settings. So you see that there is some padding already part of it. And if you take a look up here in the heading, and I moved this, you can see how that changes. Okay, we also have a block spacing, default, that’s already set there, too. So I click back out of layout.
Blocks
Blocks is our next section. We will go down here to blocks and this menu opens up all of our blocks that are within this theme. And we can go in and we can customize the appearance of specific blocks and for the whole site. So that means that if you want all your heading blocks to have a certain background color, you could do that. Okay, you don’t want to get too involved with doing each of these separately, because remember, we have our initial global styles up here that we’ve already changed. And if you start changing every little block, then it gets really confusing when you need to do change something, you don’t know where you changed it. So it’s always good to start in the global styles. And then if there’s a particular block that you really want to kind of change, and you could do that. So I’m gonna just give an example of the Quote block because that’s kind of like a specialty block that you might want to do a different kind of font. So let’s scroll down here to my example. So we have the quote block. I’ve added a group and the quote block has a paragraph within it. And then it has an area for citation which is the author’s name. So if I want to change the font of this, okay, I can go to typography and go down to font. And remember that I have my Open Sans as my overall font. And I can either do it as regular or I can do it as italic. Things like that. And I can always change the size of it to if I just want it small, large, I can click on Save for that. So that would be an example.
Conclusion
I just touched on the basics of how to style your site with global styles. Go explore on your site and check out more lessons.
Practical
Use WordPress Playground below to test your knowledge by tweaking the following.
- Browse through the various style variations that are provided by the relevant theme.
- Use the Font Library to install a new Font Collection of your choice.
- Change the typography of your text to a different font style.
- Below Layout > Dimensions, enlarge the width of your main content area.