Skip to main content

BlockStrap Documentation

Customization Options in the Styles Tab of the Full Site Editing (FSE) WordPress Editor

WordPress’s Full Site Editing (FSE) feature allows you to create and customize your entire website using the Gutenberg block editor. One of the powerful tools within the FSE editor is the Styles tab, which provides access to various customization options, including colors, typography, and more. In this article, we will explain what can be customized via the Styles tab of the new FSE WordPress editor.

1. Colors

The Colors section within the Styles tab allows you to manage and customize your theme’s color palette. You can adjust the following color settings:

  • Background color: This setting allows you to change the default background color of your website.
  • Text color: Customize the default color of your site’s text content.
  • Link color: Modify the color of hyperlinks within your content.
  • Heading color: Set the default color used for headings (e.g., H1, H2, H3) across your site, ensuring consistency in your design.
  • Button color: Define the default colors used for buttons across the site, including background color, text color, and hover effects, to maintain a uniform appearance.
  • Custom color palette: Edit, add, or remove colors in your theme’s color palette, which can be used across various blocks and elements on your site, or create a completely custom color palette.

2. Typography

The Typography section within the Styles tab enables you to manage and customize the font settings for various elements on your website, such as headings, paragraphs, links, and buttons. You can adjust the following typography settings:

  • Text, Links, and Buttons: For these elements, you can customize the following settings:
    • Font: Choose the font family from various options, including Google Fonts and system fonts.
    • Size: Set the font size, with options to choose from predefined sizes or enter custom sizes.
    • Appearance: Adjust font weight and style, such as normal, bold, italic, and other numerical font weights.
  • Headings: For heading elements (e.g., H1, H2, H3), you can customize the following settings:
    • Font: Select the font family from a range of options, including Google Fonts and system fonts.
    • Size: Define the font size, with options to choose from predefined sizes or enter custom sizes.
    • Appearance: Modify font weight and style, such as normal, bold, italic, and other numerical font weights.
    • Letter spacing: Control the spacing between individual letters in heading elements, enhancing readability and visual appeal.
    • Letter case: Apply text transformations to headings, such as uppercase, lowercase, or capitalized, to create a distinctive style.

3. Layout

The Layout section within the Styles tab provides the option to control the overall layout and structure of your site through:

  • Content width: Set the maximum width of the content area for your site.

4. Blocks

The Blocks section within the Styles tab allows you to customize the appearance of specific blocks across your entire website. This ensures a consistent design and style for those blocks, regardless of the page or post where they are used. You can adjust the following settings:

  • Select a block: In the Blocks section, you’ll find a list of available blocks that can be customized. These may include standard blocks such as paragraphs, headings, images, quotes, etc. Click on a block to access its customization options.
  • Block-specific settings: Each block may have unique customization options depending on its function and purpose. These settings can include adjustments to typography, colors, and layout. For example, you may change the background color for a button block or modify the font size for a paragraph block.
  • Apply global styles: When customizing a block, you can apply the global styles you have set for the entire site. This ensures that the block’s appearance remains consistent with the overall design of your website.
  • Save your changes: Once you’ve made your desired customizations for a specific block, click the “Save” button in the top-right corner of the panel to apply the changes across your website. Remember that any changes made in the Blocks section will affect the appearance of the selected block everywhere it is used on your site.

The Styles tab in the Full Site Editing (FSE) WordPress editor offers a range of customization options to help you create a unique and cohesive design for your website. By understanding the various settings and options, you can tailor your site’s appearance to match your brand and showcase your content effectively.

Feedback