Infobox

Infobox is a normal UI widget 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.

Configuration for Infobox

Infobox mostly contains title & small description. We have provided options for carousal, icon, button / links 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 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

Select Layout

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

Infobox Style

Choose a style from a pile we have provided.

Alignment

Alignment of text into left, centre or right direction.

Title

Title text for infobox.

Description

Description text for infobox.

Select Icon

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

Icons

On selection of Icon in previous drop down, 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.

Image

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

Display Pin Text

A pin text is an extra text to show additional feature on infobox, like if there is something you launched couple of days ago and 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 infobox.

Full Box Link

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

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 Infobox widget 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.

Title Top Space

An input to set spacing between box top and title.

Title Bottom Space

An input to set 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 suitable color to the border.

Description

Typography

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

Text Color

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

Color

A color picker to assign suitable color to the button.

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.

Icon

Icon Shape

A select box to choose shape of an 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.

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 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 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 infobox.

Shadow Color (Float Shadow) ⭐

A color picker to assign suitable color to the shadow.

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

A color picker to assign suitable color to the shadow.

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

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?