How Does the Style Variations in FSE Themes Work?

The Style Variations in FSE Themes ensures consistency across your website, as you can set global customizations for your blocks and not individually editing them. The changes you make inside the Styles panel will apply to all the pages of your website. For example, if you change the color of the headings, all the headings will match that color.

To reach the Styles panel, navigate to Appearance > Editor and click the Styles icon.

From there, you can choose to browse styles which will change the appearance of your website completely, according to the selected palette:

🖋 Typography

Inside the Typography panel you will find various elements you can customize globally, such as the typography of text, links, headings, and buttons across the website.

You can also check the preview window to choose the perfect options:

🎨 Colors

Inside the Color panel you can create your own color palette that can be used for having global color for all the elements you use on your website. Apart from this, you can add custom colors to the palette and edit the existing colors:

The colors from the Theme section will appear across the theme's settings, whereas those from the Default section can be used for the blocks. 

The theme allows for creating palettes of solid color and also gradients:

In the Colors panel you can also set colors for specific elements, such as background, text, links, etc. Clicking on the elements will open a new panel of specific options; see the example below for background:

📐 Layout

In the layout section, you can set the width of the main content area. Clicking on the three dots allows you to enable other dimensions, such as padding or block spacing:

🗂 Blocks 

The style of blocks can be customized individually for the each block. After opening the panel, a list with the available blocks will appear. Clicking on each one of them will lead you to the general settings: