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
Absolutely Free X-Box !!! HAHA just kidding. It worked, find on your own pun and put it in message box just like this.

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.

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 widgets panel.

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

1. Layout

Content

Title

Title or heading text for message box.

Description

A text area to add the description text.

Main Icon

Want an Icon or not !?

Icon Position

Set icon before or after the title text.

Select Main Icon

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

Close Icon

Want a close Icon ?

Select Close Icon

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

Button

Show Button

Option to set an extra button after content.

Style

Style list to give button some looks.

Button Text

Text input for button text.

Button Link

A target URL to send user on button click.

2. Style

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

View The Style Tab Article

Title

Typography

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

Text Color

A color picker to assign 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 size, weight, spacing and much more to fonts.

Text Color

A color picker to assign 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 icon from here.

Arrow

Want arrow after icon ?

Icon Color

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

Background Color

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

Arrow Color

A color picker to assign 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 icon.

Button

Typography

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

Color

A color picker to assign suitable color to the text.

Button Above Space

An input to set spacing between content bottom and button.

Button Bottom Space

An input to set spacing between box bottom and button.

Close Icon

Icon Size

Set size of icon from here.

Icon Width

Set width of icon from here.

Icon Color

A color picker to assign suitable color to the icon.

Border Radius

Set the radius curve of the icon’s corner.

Background Color

A color picker to assign 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 widgets. 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?