How to customize the global style of Gutenberg blocks using Essential Blocks

If you would like to add a new function to a WordPress site's Gutenberg blocksProviding consistent customization styles, Essential Blocks plugin will be a very useful tool. It makes it easy to configure global style settings without having to customize them from scratch every time, making website design more uniform and efficient. In this article, I will show you how to set global styles and apply them to Gutenberg blocks with the Essential Blocks plugin.

Introduction of Essential Blocks Plugin

Essential Blocks PluginDeveloped by WPDeveloper and designed for the Gutenberg editor, Essential Blocks provides a rich set of block elements to help users easily create a variety of layouts and designs. Whether you are a beginner or a professional developer, Essential Blocks will make you feel easy to use and make your website content richer and more attractive.

The plugin contains several highly customizable block elements such as Info Box, Price Table, Progress Bar, Image Gallery, etc. Users can easily add these elements to a page or post to enhance the page visualization and interactive experience. With intuitive drag-and-drop operations, Essential Blocks allows you to complete complex page designs in minutes without writing code.

1. Configure the Essential Blocks global style settings.

Need to configure global styling for Essential Blocks plugin, these settings below will help you apply consistent styling across multiple pages and posts on your website, saving time and improving user experience.

Step 1: Open a blank page

In the WordPress dashboard, create a new blank page. We will configure the global style settings for the Essential Blocks plugin on this page.

Step 2: Enter Essential Blocks Settings

• In the upper right corner of the page editor, click the Essential Blocks Icons.

• Scroll down and select Block Default Menu, go to the Global Style Settings option.

Step 3: Setting the style of the Info Box block

• In the global style settings, select Info Box(infobox) block. Click on the Info Box, a settings window will pop up.

Multiple style options will be seen, which can be adjusted as required:

• Clickable settings: You can choose whether or not to make the infobox a clickable item.
• Button Setting: The buttons can be retained or deleted, and the style of the buttons can be adjusted at the same time.
• content alignment: in Alignment option allows you to set the position of the content in the message box.
• Media Style: Select the appropriate infobox icon and customize its color.
• Title Style: in Title Style Set the color of the title in and select the desired font.
• Subtitle style: By Content Style, you can set the color and font style of the subtitle.
• Button Style: Sets the color for the button text.
• Background settings: Adjust the background color of the infobox and set the appropriate Margin respond in singing Padding (inner margins)The

Once you have completed all the customizations, click Save(Save) button to save the current style settings.

2. Using custom blocks in the Gutenberg editor

Once set up, the custom style will be applied to all Essential Blocks blocks. Next, we'll show you how to apply this custom style to the Gutenberg Page Editor.

Step 1: Adding an Infobox Block to the Gutenberg Editor

• Open the Gutenberg editor and click on the location where you want to insert the infobox + Button.

• Type in the search box Info BoxSelect the customized style of the Info Box BlockThe

• The customized infobox block will be immediately inserted into the page and display the set style.

Step 2: Further customization and saving

If you wish to further customize the block, you can do so via the Gutenberg editor sidebar. Modify the text, colors, or other styles as needed.

After completing all changes, click Save(Save) button to ensure that all settings have been saved and applied.

3. Advantages of global styles

Global styles set with Essential Blocks not only help you maintain consistency throughout your site, they also save you the time of having to reset styles every time you make an edit. Each time you insert a customized Essential Blocks block into a page or post, the global styles you've configured are automatically applied, maintaining a consistent design.

concluding remarks

With the tutorial in this article, you have learned how to set and apply global styles using the Essential Blocks plugin. Whether it's customizing Gutenberg blocks or reusing styles from page to page, it's easy to manage and optimize the look of your WordPress website. Hopefully, these tips will help you improve the efficiency of your website's design and ensure consistent styling on every page.

For more WordPress related tutorials and information, please follow thePhoton fluctuation network, has the most comprehensive WordPress tutorials and the most activeWordPress Exchange CommunityThe

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off