Infobox

Infobox

Infobox is a normal UI block used to display relative information with simple box layout and content in it.

Infobox template contains similar information same as other infoboxes placed with it. In web design, mostly infobox is used to display features, services or any kind of listing with related information with them.

Pro tip
Our infobox is lot different than Wikipedia’s. Might want to check it out.

How to use the Infobox block of The Plus Addons For Gutenberg

The Infobox block comes with multiple functions. Let’s understand how to use this block in the tutorial below.

Configuration for Infobox

Infobox mostly contains title & small description. We have provided options for carousal, icon, button/link and much more.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add Infobox 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 Infobox after “/” sign, eg.“/Infobox”, 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

Content

Select Layout

We have provided two options for layout, a single one and a carousel. Choose as your needs.

Infobox Style

Choose a style from a pile we have provided.

Alignment

Alignment of text into left, center or right direction.

Title

Title text for the infobox.

Description

Description text for the infobox.

Select Icon

A selection for icon, whether to choose an icon from a library we provide or a custom one.

Icons

On selection of Icon in the previous dropdown, you’ll be displayed a whole list of icons provided by the FontAwesome icon library. If you have purchased licence for the pro plan and activation has been done you’ll be able to use pro icons.

Image

On selection of Image in the previous dropdown, you’ll be asked to choose and upload an image, and after uploading the image basic styling option for the image would be displayed there.

Display Pin Text

A pin text is an extra text to show additional features on infobox like if there is something you launched a couple of days ago and the user should know that then pin text can be used.

Pin Text

Text input to add pin text.

Link

A destination URL on click of the infobox.

Full Box Link

An option to set a whole infobox as an anchor tag/ link.

Button

Show Button

Option to set 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.

2. Style

The Style tab is used for customizing the appearance of all the Infobox block 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.

Title Top Space

An input to set the spacing between box top and title.

Title Bottom Space

An input to set the spacing between box bottom and title.

Divide Border

Enable Divide Border

Draw a border line dividing title and description content.

Border Width

Width of the line/ divider between title and description.

Border Height

Height of the line/ divider between title and description.

Border Color

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

Description

Typography

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

Text Color

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

Background

Background

Apply suitable background like color/ gradient to the infobox.

Overlay Background

Apply suitable background like color/ gradient with an overlay to the infobox.

Box Padding

Put in some inner space to the infobox.

Border

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

Border Radius

Set the radius curve of the infobox’s corner.

Box Shadow

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

Button

Typography

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

Color

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

Button Above Space

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

Button Bottom Space

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

Icon

Icon Shape

A select box to choose the shape of an icon.

Icon Size

Set the size of the icon from here.

Icon Width

Set width of the icon from here.

Icon Color

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

Background

Apply suitable background like color/ gradient to the infobox.

Box Shadow

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

Overlay

Set cover of transparency or coating on the element.

Icon Shine Effect

Give an icon some shiny look from here.

Pin Text

Typography

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

Pin Padding

Put in some inner space to an element.

Border

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

Text Color

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

Background

Apply suitable background like color/ gradient / image to an element.

Border Radius

Set the radius curve of the element’s corner.

Pin Horizontal Adjust

Set pin’s horizontal position from here.

Pin Vertical Adjust

Set pin’s vertical position from here.

Extra Options

Minimum Height Enable

Enable minimum vertical height from here.

Minimum Height

Set minimum height here.

Content Hover Effect

Set on hover effect on the infobox.

Shadow Color (Float Shadow) ⭐

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

Shadow Color (Float Shadow/ Grow Shadow/ Shadow Radial) ⭐

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

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

Note : ⭐ Symbol as a suffix displays a Pro feature field.
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.