How to edit typography, color, and layout settings


In the site editor, there's the styles panel and you'll see options for typography, colors and layout.


Editing Layout Settings

We'll start with the layout section because that's a bit more basic and there's really only one setting that you may want to change. 

I would recommend leaving the padding and blocking block spacing settings alone because they are more global settings that have already been carefully thought out with the design and you're able to change these on a more specific level within the block sections anyway. 

With the dimensions, your content and wide width, those are going to be the widths of your different content areas. So when you look at your site, you'll see that these sections have kind of a boundary where you know there's a certain point that as the browser width gets larger, wider, the content is still contained within this specific container. When it's wider, that's going to be your wide width. 

In the case specifically of this blog site, layout, where you have the posts on the left and the sidebar on the right, this whole container is going to be your wide width. And then where your blog posts are is going to be the content width. 

Also, when you click into a blog post that has, that has the content the no sidebar layout, that's going to be your content column width.

So this is kind of the default width. And then when you choose in blog settings, the wide width setting, that's going to be your wider container. 

So if you're looking to make things either wider or not so wide, that's where you're going to adjust these settings. 

There are still going to be some places in the layout that are not affected by this. In particular, where you see these vertical titles, those have specific width settings that you will have to adjust. As well, but for everything else, like this particular freebie section on the site and like your content container, like those are going to use these dimensions and you can adjust them to your liking there.  


Editing Color Settings

Next, we're going to take a look at colors because this is a little easier to edit than the typography. It's just a little bit more straightforward because you have your existing color palette and you really just have to change the different theme colors within the color palette and everything will adjust accordingly. So, you don't necessarily need to worry about any of these settings unless you want to customize it further. 

If you want your button color to be a different color other than the one that you swap out for this brighter pink color, just a note on the link color itself this does need to stay the same as your text color, because when you think about it there are links all over your site, and you don't necessarily want all of them to be a bright pink color or whatever color you choose, So I would recommend just changing the palette colors because the more specific elements you can change individually. 


Editing Typography Settings

Typography is a little more complex. So we're going to load the typography panel and then this is going to show you what fonts are already in the theme. Then you can open up this little manage fonts icon and this will let you install your own fonts so you can upload font files. 

Or you can install fonts directly from Google fonts. Just click allow access to Google fonts and then you can add your own fonts from there.

Unfortunately, as of right now, as of this recording, there is no way in WordPress to say swap out all instances of coconut with another font. So, you are going to have to look through your site and see what areas need to be changed.

If you decide you want to go back to the default styles in the styles panel, look for the three dots and you can reset the styles and it will reset everything back to the way that it was except for the typography which you're going to have to make sure is still active.

One other thing that you can do in the styles panel is customize the font. So if of specific blocks for the whole site. So for that, you'll go to the block section and it will show you a list of all the blocks. If you click on the little eye icon, you can open the style book and this is going to show you all the different blocks that are available in WordPress and how they're going to, how they're styled with the theme. So from here, if you want to make any changes to any of these blocks, you can do so.