Get access to free tutorials, exclusive content and more.

Improve UX With Global Styles

using WP, WordPress 5.9 global stylesMany of the benefits of WordPress 5.9 relate to total control of your site — the ability to customize every detail with ease. Sometimes, though, you need to make universal changes for a better user experience. That’s where Global Styles come in. This is yet another new feature that makes the latest WP release so exciting.

 

Want to customize a theme to represent your brand? First, start by tweaking your site’s Styles.

What Are Global Styles?

Global Styles — also called “Site-Wide Styles” or simply “Styles” — are edits that affect your entire site. Available exclusively in block themes, the Styles menu allows you to make sweeping changes that give your site a cohesive, polished look. Say, for example, you want to change your selected theme’s background to match your brand colors. Instead of updating every individual page of your site, you can simply change the color once in Global Styles. It’s fast and easy, allowing you to preserve your time and energy for more nitty-gritty site details.

What Can You Customize With Styles?

colors, WordPress 5.9 global stylesStyles targets aspects of your site that should have a unified look, such as font, link color, header size, and more. Changes are applied in real-time, making it easy to preview your selections. When working in Global Styles, you can customize:

Typography

Edit the typography of text and links across your site. Options include font weight, family, size, and line-height.

Colors

Select your preferred site colors for your site’s background, text, and links. Choose between the default palette and your theme’s palette, or create custom shades using HEX values or the color picker. Save your custom colors for later use — you can even rename them for clarity. You can also choose between solid colors or gradients.

Layout

Add universal padding to your site’s design for symmetry across all pages.

Blocks

Make unified changes to blocks — no need to edit block-by-block. Select the block you’d like to customize and then edit the typography, colors, and layout where applicable. For example, you can customize the size and color of your header blocks. Going forward, any newly-added headers will automatically align visually with other headers on your site.

Accessing Global Styles

After installing your block theme, such as the new default theme Twenty Twenty-Two, navigate to Appearance>Editor (beta). Once you’re in the Editor, click the half-circle icon in the top-right corner. This opens the Styles menu, allowing you to choose Typography, Colors, Layout, or Blocks. Note that you can reset all Styles to their default settings by clicking the three dots in the top-right corner of the Styles menu.

Bring Your Brand to Life

brand specific, global stylesAdding to the long, impressive list of WordPress 5.9 features, Global Styles is a fast, seamless way to adhere perfectly to your brand guidelines. Rather than painstakingly editing individual pages or aspects of your site, Styles enables broad customizations for unity and precision. It’s never been easier to create your picture-perfect user experience.