Use the Style Book to design your site

In this guide, you will learn how to use the Style Book to see a preview of how Styles changes will affect the display of any block, without having to insert those blocks onto the site.

This feature is available on sites with our WordPress.com Premium, Business, and Commerce plans, and the legacy Pro plan. For sites on the Free and Personal plans, upgrade your plan to access this feature.

The style book will show you examples of how all available blocks will look after saving any changes to your site’s styles.

1. Visit your site’s dashboard.
2. Navigate to Appearance → Editor.
3. Select Styles from the left-side menu.
4. Click the icon of an eye to the right of the “Styles” text. (You can click the icon again to return to the editor.)

You can also open the style book when editing any page, template, or template part. These are the steps used in the video overview above. Follow these steps:

1. Visit your site’s dashboard.
2. Navigate to Appearance → Editor.
3. Edit a page, template, or template part.
4. Click the “Styles” icon (a circle with one white and one black half) located in the top toolbar of the editor.
5. Click the “Style Book” icon (the icon looks like an eye) to open the style book. (You can click the icon again to return to the editor.)

Once you open the Style Book, you can preview and change your color scheme and typography, with examples of how each change will impact specific text, blocks, media, and more.

To the right of the “Styles” panel is a preview of the different types of elements (Colors, Typography, Buttons, Images, etc.) on your site. To edit a specific element’s styles:

1. Click on an element (Colors, Typography, etc.) in the preview on the right of your screen.
2. Edit the element’s styles under the “Styles” panel on the left.
3. Click the back arrow next to the element’s name to return to the full list of elements and select another element to style.

4. When you’re done, click the “Review Change…” button at the bottom of the “Design” panel to review and save your changes.

To exit without saving your changes, click the icon in the top left of the “Design” panel, and select the option to leave without saving changes.