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.

Visit Demo Page

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 Post Editor for Gutenberg?

Premium Blocks Plugin: Essential for accessing Global Settings features.
Feature Activation: Ensure the Global Settings feature is activated in the plugin settings.
Post Editor: Navigate to WP Dashboard -> Premium Blocks -> Settings tab. Activate the Global Setting Sidebar feature.
Site Editor: Utilize a block theme supporting Full Site Editing and ensure the Global Settings feature is activated.

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 and make sure that the Global Settings in Post Editor feature is enabled in Plugin Settings.
From Settings tab make sure that Global Setting SideBar in Site Editor feature is enabled.

How to Use the Global Settings for Gutenberg?

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 these colors are locked and cannot be modified or Premium Blocks for Gutenberg preset color pallets. You can also add a new custom color or delete a custom color if you want.
If you choose the premium blocks color palette as your default color palette the colors will be applied to the premium blocks elements.

How to Apply Premium Blocks colors to the Gutenberg native blocks?

First, choose Premium Blocks colors as your default color palette.
Enable the Apply to Native Blocks option in the color section.
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.

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:

Font Size: You can set the size of the font for different devices and also change the unit px or em.
Font Family: Choose your preferred font type and Google fonts are fully included.
Font Weight: Choose the thickness of a font.
Line Height: You can set the line height of the font for different devices by the px unit.
Letter Spacing: You can set the letter spacing of the font for different devices by the px unit.
Font Style: Choose your preferred font style.
Text Transform: Set text-transform lower case, upper case, or none.
Text Decoration: Set text-decoration line through, underline, or none.

Premium Blocks Global Typography Settings

Global Layout

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

Layout options:

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