Don’t miss a fantastic opportunity to get the best way how to add custom CSS to Gutenberg block with the blog today. Everything will become easier and simpler than ever before.
Introduction
If you are using WordPress for a long time, it’s undined that you are familiar with the classic editor. However, the appearance of Gutenberg which is a new editor of WordPress makes a lot of WordPress users feel confused since they don’t get used to using it. Gutenberg vs Classic Editor is a balanced fight because each editor has different outstanding advantages. Understanding the problem that almost WordPress developers or owners are facing, we are here today to provide with you some guidelines and tips related to Gutenberg usage.
In the blog today, we would like to show you 2 methods to add custom CSS to the Gutenberg block. If you think this task is complicated or difficult, don’t worry about that as it is simple for you to implement. In contrast to Elementor which requires you to use the pro version to apply custom CSS, Gutenberg enables you to accomplish your objectives just with the free version. Gutenberg vs Elementor is a comparison story of another beautiful day. Now, it’s time for you to have a look at the way how to add custom CSS to Gutenberg block with the instruction below.
Let’s add custom CSS to Gutenberg block
Add custom CSS to Gutenberg block with WordPress customizer
If you have just used Gutenberg in a few days, you may think there isn’t any place to add custom CSS. However, the reality is not true. You can do that just with a few simple steps. Here is the recommended method that you should try.
First of all, let’s choose the post or page you want to add custom CSS to Gutenberg block. Then, simply click to edit it.
After the editing window opens, you just need to choose which block you want to edit.
Now, it’s time for you to open the setting sidebar by pressing the combination keys Ctrl+Shift+ or simply clicking the right mouse button -> Show more settings.
On the right side of the screen, don’t hesitate to select the Block section, then find the Advanced -> Additional CSS Class(es).
In the box of the Additional CSS Class(es) field, let’s fill out the name of the custom CSS style.
Once the CSS style name is entered, you need to press the Preview -> Preview in new tab to fully add custom CSS to Gutenberg block.
Now, the preview window will open. Let’s click the customize button on the top panel of the screen.
The customizing features will appear for you to edit. Simply find the Additional CSS, then click on it. There will be a box for you to add the custom CSS there. Let’s make sure that the first line is the name of the custom CSS style you entered in the previous steps.
After putting the code successfully, you can see the result on the right side of the display screen. Finally, don’t forget to select Publish button to save all your settings.
Add custom CSS to Gutenberg block with a plugin
If you need a useful plugin that allows you to add custom CSS directly when you access any post or page, Gutenberg Blocks Library & Toolkit – Editor Plus can meet your requirement.
First of all, let’s install the plugin on your WordPress site. After installing and activation, all you need to do is open any post or page, and choose the block you want to customize. Now, there will be new options on the left sidebar. Custom CSS is available for you to put your custom CSS style there. Everything is simple, isn’t it?
Furthermore, with this plugin, you can also add custom CSS code applying to all pages. In order to do that, you just need to go to Settings -> Editor Plus on the admin dashboard. Then, open the Advanced tab and put the global custom CSS code there.
Is it easy for you to add custom CSS to Gutenberg block?
To sum up, we believe that you can quickly add custom CSS to Gutenberg block after you explore this tutorial blog. If you have any trouble related to this topic, don’t hesitate to leave your comment below. Moreover, don’t forget to share this blog with other Gutenberg users to help them conquer this editor effectively.
Last but not least, whenever you need to get more Free WordPress Themes in general and Gutenberg WordPress themes in particular, let’s visit our site. Thanks for your reading and have a nice day.
- How to place menu items in helix joomla 5 ? - December 14, 2024
- How to reduce the size of helix 2 layout ? - December 14, 2024
- What’s J4 starter template and how to use it - December 3, 2024
Recent Comments