Transcript
Introduction
In this lesson we will learn how you can utilize the Style Book as a design guide. The lesson objectives are understand the purpose and functionality of the Style Book and to navigate and utilize the Style Book to preview and refine design choices.
Style Book
To view your Style Book make your way to Appearance, click on Editor and then make your way to Styles. On the left we will see the style variations and the color palettes and then when you click on the eye icon you will be able to view your Style Book. The WordPress Style Book is a powerful tool that bridges the gap between traditional design practices and WordPress’s block based editing system. Think of it as your digital style guide showcasing how different blocks or components of your site will look and interact with each other.
To open Styles click on the pencil icon and now we will see our Style Book on the left and our Global Style settings on the right. The Style Book is intimately connected to WordPress’s global styles feature which will explore depth in a future lesson. These are referred to as the style section. For now it’s important to understand that the Style Book is a different way to preview the design decisions you’ll make in Global Styles. When you update Global Styles you can view the changes either directly in the Style Book allowing you to focus on specific blocks or you can view the changes you make in Global Styles directly in the Site Editor, allowing you to see the changes you make in a template or a page. So for the next example we can change the background color of our site and view how it appears on our homepage. So the Style Book can be helpful if you don’t have much content on your site. You can then for example style the gallery even though you don’t have a post with a gallery yet.
How the Style Book is organized
The Style Book is organized into several tabs, firstly Text, where you can preview headings, paragraphs, lists and other text elements. Then we move on to Media and here you can see how images and other media will appear. Thirdly, Design. View buttons, columns and other layout elements. And next to that Widgets such as calendar, latest posts and even social icons. Lastly, Theme which includes blocks like Site Logo, Site Title, the Query Loop and the Featured Image.
Practical examples
When you design you can use the Style Book to visualize your design choices across different elements, ensure consistency in your design system, experiment with different style variations and identify areas that need refinement. So let’s look at some practical examples of how you can use the Style Book as a style guide and to test your design choices.
Firstly when you select the Style Book you can test out and preview the style variations that come with your theme. Or you can start adding your own styles. So I will make my way to the Style Book, select typography and then you can install or upload custom fonts. I have gone ahead and added two custom fonts, Frauncis as well as Rubik. And now we can update our fonts. So I will change my text font to Frauncis, I’ll update the line height and then change the font of my headings to Rubik. And then we can immediately see the changes in the Style Book and when you save you will see that the changes are site wide. Next you can customize your H1 to H6 headings further. In this example I will go ahead and change the size of all my headings. And for H3 and H4 I will also change the appearance to light. As you update these changes you can preview it on the left in the Style Book. You can of course do this for all individual blocks.
Then I will select Media and change the radius of the Image block to 10 pixels and this will also be applied to the Gallery block. Next we can explore colors. So I will make my way to colors, click on Palette and then you’ll notice you can add your own custom color palette. I will go ahead and add some colors. The first, a dark green. When my other colors are in place I will return to Elements and update the background color, the text color, the colors for my Buttons block as well as heading color. Then we can preview our changes and customize blocks further, for example, styling the Buttons block to meet our design needs. Throughout the process you’re constantly referring back to the Style Book to ensure all elements work harmoniously together.
Conclusion
In conclusion, the Style Book is your visual guide. Use it to experiment, refine and perfect your design.