Prerequisites

ElementsPagesBlocks

Intro

A site's Element Default Sheet is where you can set up default styles for all the different types of Elements, making your site's spacing and typography consistent and easy to manage. Think of it as a master style template. 

Styles set up in Defaults will be applied to those Elements whenever you add them to a Page or Block and can be overwritten at anytime. 

Defaults Before You Build

Setting up styles in the Default styles for some of the most-used Elements such as Div, H1, H2, H3, Paragraph, Image, etc. can save tons of development time. Additionally, it allows you to change every instance of an H1 Element's font family or font-weight, for example, by editing the style in one place. 

For this reason, it is recommended to set up the Defaults relatively early on in the building process.

Using Defaults

To open Defaults, open the hamburger menu in the toolbar and then select the Defaults option, or search for Defaultsheet in the command palette (CMD + K).

You'll see that each Element has a row and the Style Grid next to it that resembles the Page and Block editor.

There is also the option to view only certain Element categories such as containers, text, media, tables, and forms by clicking on the buttons on the bottom right side of the editor.

In this example, I have clicked the #text button.

Editing Defaults

Edit the style values in the same way you would on the Page or Block editor.

When editing text Elements, a preview string will appear to help visualize the styles. Remember to save any additions or changes to this sheet.

When you add an Element to a Page or Block, you will see style values appear in light grey text to indicate that they are coming from the Defaults. You can overwrite these by typing in a new value.