Message Box

Message Box

Message Box is a kind on alert UI widget used for same purpose.

Message Box is used to grab user’s attention, can be used in between normal content. Normally written text can’t get as much attention, but message box passes some alertness just by using it’s UI.

Pro tip
Why not add this Block to your website/product? Because Using this Block You can create something special Alert Box to notify the user Like danger, success, information, or warning for your website.

Configuration for Message Box

Message Box can have creative only content. Write some, find some link to redirect users from it, and put it in a work.

How to use the Message Box Block of The Plus Addons For Gutenberg

The Message Box Block comes with a simple layout with many styling and customization options you can create a pleasant-looking layout for your websites.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add Message Box into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Message Box after “/” sign, eg.“/Message Box”, in the content area. Gutenberg also provides drag & drop after opening the list of Blocks panel.

After placing the Block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

1.1: Content

Title

Title or heading text for the message box.

Credit : Gutenberg, WordPress

Description

A text area to add the description text.

Credit : Gutenberg, WordPress

Main Icon

Want the main Icon or not?

Icon Position

Set icon before or after the title text.

Select Main Icon

You’ll be displayed a whole list of icons provided by the Font Awesome icon library. If you have purchased a license for the pro plan and activation has been done then you’ll be able to use pro icons too.

Credit : Gutenberg, WordPress

Close Icon

Want a close Icon?

Select Close Icon

You’ll be displayed a whole list of icons provided by the Font Awesome icon library. If you have purchased a license for the pro plan and activation has been done then you’ll be able to use pro icons too.

Credit : Gutenberg, WordPress

Button

Show Button

Option to set an extra button after content.

Style

Style list to give a button some looks.

Button Text

Text input for the button text.

Button Link

A target URL to send the user on button click.

Icon Type

You’ll be displayed a whole list of icons provided by the Font Awesome icon library. If you have purchased a license for the pro plan and activation has been done then you’ll be able to use pro icons too.

Icons

You can select an icon from this option here.

Icon Position

You can set an icon position whether you want it before the content or after the content here.

Icon Spacing

Set the space between the icon and the content.

Icon Size

Set the size of the icon.

2. Style

The Style tab is used for customizing the appearance of all the Message Box components. All these styling options include customizing the fonts, colors, background, margins, and padding which are common across all the Blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Title

Typography

Assign a size, weight, spacing, and much more to fonts.

Text Color

A color picker to assign a suitable color to the text.

Background

Apply suitable background like color/ gradient to text.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Padding

Put in some inner space to an element.

Margin

Put in some outer space to an element.

Description

Typography

Assign a size, weight, spacing, and much more to fonts.

Text Color

A color picker to assign a suitable color to the text.

Background

Apply suitable background like color/ gradient to an element.

Border Radius

Set the radius curve of the element’s corner.

Padding

Put in some inner space to an element.

Margin

Put in some outer space to an element.

Main Icon

Icon Size

Manage icon size from here.

Icon Width

Set width of the icon from here.

Arrow

Want arrow after icon?

Icon Color

A color picker to assign a suitable color to the button icon.

Background Color

A color picker to assign a suitable color to the button icon background.

Arrow Color

A color picker to assign a suitable color to the button arrow icon.

Border

Draw a border around the icon and give width and color to it.

Border Radius

Set the radius curve of the icon’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to the icon.

Button

Typography

Assign a size, weight, spacing, and much more to fonts.

Color

A color picker to assign a suitable color to the text.

Button Above Space

An input to set the spacing between content top and button.

Button Bottom Space

An input to set the spacing between content bottom and button.

Padding

Put in some inner space to an element.

Box Border

Draw a border around the icon and give width and color to it.

Border Radius

Set the radius curve of the icon’s corner.

Background

Apply suitable background like color/ gradient to the content.

Box Shadow

Give Box/Text/Drop shadow effect and color to the button icon background.

Close Icon

Icon Size

Set the size of an icon from here.

Icon Width

Set width of an icon from here.

Icon Color

A color picker to assign a suitable color to the icon.

Background Color

A color picker to assign a suitable color to the icon.

Border Radius

Set the radius curve of the icon’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to the icon.

Margin

Put in some outer space to the icon.

Background Option

Padding

Put in some inner space to the background.

Background

Apply suitable background like color/ gradient to the content.

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the background’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to the background.

3. Advanced

Advanced Tab Options are common across all the Blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.