Global Feature Tutorial

Introduction

Our Global Feature Tutorial provides you with the knowledge to effectively use the Gutenberg Editor’s Global Settings, a pivotal tool for anyone looking to enhance their site’s design workflow and user experience. By embracing Premium Global Settings, you achieve not only a unified aesthetic but also elevate the overall professionalism of your website, making every element from colors to layouts consistently impressive.

Gutenberg Global Features

Free Download

Requirements

To get Premium blocks on your WordPress website, make sure to install and activate the following plugin(s).

Premium Blocks for Gutenberg – The Free WordPress Plugin.
Recommended* Kemet Full-Site-Editing WordPress Theme.

How to Enable Global Settings in Site Editor for Gutenberg?

You will need to use a block theme that supports WordPress Full Site Editing.

Head up to your WP Dashboard -> Premium Blocks -> Settings tab.
From the Settings tab make sure that the Global Setting SideBar in the Site Editor or Post Editor feature is enabled.

Enable global settings in site editor for gutenber.g

How to Use the Global Settings for Gutenberg?

You can navigate to the Site’s Global Settings from two places either from the WP dashboard -> Apperences -> Editor -> Styles, or you can click on the three-dots icon at the top right. You’ll see the Gutenberg editor options opening up, and under the plugins section, you’ll find Premium Blocks for Gutenberg Settings.

Global Colors

Set a global color palette that will be used. You can choose the default theme color palette or Premium Blocks for Gutenberg preset color pallets. You can also add a new custom color or delete a custom color if you want.

How to Apply Premium Blocks Colors?

First, choose Premium Blocks colors as your default color palette.
Click on the plus button in custom colors to add a new custom color.
Place your cursor over the color, and you’ll notice a delete icon; click on this icon to remove the color.
If you want the color to be applied on all Gutenberg native elements enable the “Apply to Native Gutenberg Blocks” option in the color section.

Global Typography

Create uniform text styles for headings, buttons, and paragraphs by choosing font sizes, families, weights, and more, ensuring a cohesive text appearance throughout your website.

Typography Options:

Typography of headings ( H1, H2, H3, H4, H5, and H6 ), Buttons, and Text including Font Family, Size, and Weight.
Apply to Native Gutenberg Blocks: Checkbox to apply the typography settings to native Gutenberg blocks.

Premium Blocks Global Typography Settings

Global Layout

Layout Options:

Set universal standards for container block widths and breakpoints for responsive devices, guaranteeing smooth layout adjustments on various screen sizes for your website.

Block Spacing: Adjust the space between individual Gutenberg blocks.
Container Max Width: Manage the maximum width of the container that holds the Gutenberg blocks.
Tablet Breakpoint: Set the viewport width at which the layout changes for tablet devices.
Mobile Breakpoint: Define the viewport width at which the layout adjusts for mobile devices.

Conclusion

This comprehensive guide walks you through the process of activating and utilizing Global Settings in the Gutenberg Editor, emphasizing the importance of consistent design elements like colors, fonts, and layouts. By applying these settings, you create a unified and professional look across your website, significantly improving the user experience and streamlining your design workflow.

Need Further Help?

Have a question or need assistance? Our dedicated support team is here to help! Explore our contact options to ensure you get the support you need. We’re committed to making your Gutenberg website-building experience seamless and resolving any queries you may have.

Contact Support

Facebook Group

Table Of Content