How to Use the Alert Block in WordPress

Gutenberg Alert Block

The Alert block allows you to create eye-catching message and notification sections on your website. With its customizable design and versatile functionality, this block can be utilized in various ways to enhance user experience and communicate important information.

From highlighting limited-time offers to notifying users about website maintenance or providing urgent updates, the Alert block could be a great way to communicate with users. In this blog post, I will show you how to use the Alert block in WordPress.

How to Use the Alert Block in WordPress

The Alert block is available in the CoBlocks plugin. It has another 30+ custom blocks. I will explain this tutorial using the Alert block of the CoBlocks plugin.

Step 01: Install the CoBlocks Plugin

Go to Plugins > Add New Plugin. Find the CoBlocks plugin. Install and activate CoBlocks.

Install and activate the CoBlocks plugin

Step 02: Find the Alert Block

Click the plus (+) icon on the editor. Type Alert in the search box.

You’ll see four alert blocks appear. Actually, all of them have the same set of functionalities. Select anyone you like. I will select the Informational alert block for this tutorial.

Find the Alert block of the CoBlocks plugin

You can see that the block is added to the editor.

The block is added

Step 03: Add Text to the Block

Now, add your desired text to the block on the editor.

Add Text to the Block

Step 04: Switch to Other Alert Block

Under the Styles section, you’ll see all the alert block options you saw above just a few minutes ago. By clicking on any option, you can switch your present block to another alert block.

Switch to Other Alert Block

Step 05: Stylize the Alert Block

Next, from the Color section, you can change the text and background color of the block. You can change the font size from the Typography option.

To change the padding and margin of the block, go to the Dimensions section.

Thus, you can utilize the Gutenberg Alert block in WordPress.

Conclusion

Throughout this guide, we have explored the various features and customization options of the Alert block. We have learned how to create different types of alerts, customize their appearance, and strategically place them within your website’s layout.

I have been writing on Gutenberg on this website for a long time. I have already covered numerous blog posts on 100+ Gutenberg blocks. For example, before clicking away from this post, explore my other tutorial post on how to use the Gutenberg featured image block in WordPress.

Leave a Reply

Your email address will not be published. Required fields are marked *