Transcript
Introduction
In this lesson, we will take a closer look at customizing your theme settings. When using a block theme, you can customize colors, fonts, typography, and layouts for your entire site using Styles. These features allow you to modify your site’s appearance without any code. This interface was created to help users and designers change the style of their site without having to edit individual blocks or pages.
Global Styles
To access Styles, go to Appearance, click Editor, and then select Styles. Your theme may provide you with style variations that allow you to update the style of your theme in one click. One of the variations you choose might be close to your design goal, but you will, of course, be able to customize this further. When you click on the pencil icon or Edit Styles, the Styles panel will open up on the right of the page. The Styles panel offers several customization options and is where you can define your design and apply globally to any changes. Let’s start with Typography. Here, you can manage fonts, install Google fonts, or upload a font from your computer. And below Elements, we can customize the text, links, headings, captions and buttons. When we select Text, for example, we will notice we can update the font, size, appearance, line height, and letter spacing. And please take note, when you return and make your way to Headings, you will see that you can customize individual heading levels separately, giving you precise control. When you scroll to the bottom and select Font Size Presets, you will be able to create and edit the presets used for font sizes across your site.
Now, let’s return to Styles and look at colors. In this section, you can select one of the color palettes that come with your theme, create a custom color palette, and then of course you can change the color for your text, your background, and other elements such as links, captions, buttons and headings. Did you know you also have the option to add a background image to your site? And you can of course remove it in one click by clicking Reset. Next, we move on to Shadows. A drop shadow is a great design element for various pieces of content and combinations of content. Below this section, you can edit default styles or create custom shadows. Once you’ve made the customizations, you can name them appropriately. Lastly, we will look at Layout. The layout section allows you to change the content width for the main content area on your site, as well as padding and block spacing. If you’re not satisfied with the change, you can use the revision history feature to restore your site to a previous version or to reset it to the default settings.
Style Book
Finally, let’s briefly touch on the Style Book. In one of our previous lessons, we explored how we can use the Style Book as a style guide. So let’s click on the eye icon to open our Style Book. As a reminder, the Style Book is a preview of the design decisions you make in the styles section. The Style panel is where you define your design and the Style Book is where you can see those designs applied across various site elements. To put it differently, it is a visual preview of how your style changes affect various elements and blocks across your site. It’s particularly useful when your homepage doesn’t display all the design elements or blocks yet. You can also customize individual blocks, which allows you for more detailed control over your site’s design.
Conclusion
In conclusion, the styles interface offers an intuitive and flexible way for you to personalize your site’s look and feel, and it also provides a user-friendly approach to design.