< All Topics

An InfoBox element is used to present crucial information about your product, service or company in an enticing manner. This element consists of an Icon, Title, Description, Carousel using which you can create beautiful infoboxes for your website. Now, let’s take a look at how to use InfoBoxes.

Pro tip
InfoBoxes look beautiful in a 2, 3, and 4 column grids. They can be displayed horizontally or vertically on the webpage. Want to make it more interactive? Add a carousel to it.

How To Use The InfoBox Element Of The Plus Addons in Elementor

The InfoBox element comes with two display style options which are Listing and Carousel (This one slides). You can select any one style based on your preference.

Table Of Contents

General Steps

Search for the InfoBox element from the Elementor screen in the left and then drag and drop it into the content building area.

After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to the InfoBox widget. First, click on the Content tab.

1. Content

Content Setting in the InfoBox widget.

Content

Select Layout

We have provided two layouts i.e. Listing, Carousel. Choose your preferred one. Both the layouts have similar options.

Infobox Style (Listing Layout is selected)

Now that the layout is selected, the next option to choose is the InfoBox style. You get 6 different styles to choose from. Select your preferred one.

Title Of Infobox

Add Title of the InfoBox. Click on the input field to add your desired title.

Description

Now, start adding a description for your InfoBox. The Description field is WYSIWYG editor which will allow you to highlight your content as well.

Link

Further down, you will see the Link option. This will add a link to the Title of your InfoBox. If you want to link an internal page of your website, just search by typing the desired page name and select it. It will automatically add the link to it. On the other hand, you can also add a custom link for eg: http://theplusaddons.com/elementor/.

If you want the links to open in a new window, click on the small gear icon and tick Open in new window option. Similarly, if you want to add no follow, tick that option.

Select Icon

The next step is to Select Icon. We have provided you 3 different ways to add icons. Those are Icon, Image, and SVG. Under the Icon option, you can choose the icon from the FontAwesome or IconsMind library.

If you want to add a custom image based icon, select the Image option. Similarly, you can also add an SVG based icon of your choice. You can either add a custom one or select from the pre-defined SVG icons.

Enable button in InfoBox widget.

Button

Then, we have the Button option. It is disabled by default. But, you can enable it if you want to display a Button below the Description.

Button Style

Enabling the button, gives more options to customize the Button. Under the Button Style option, you can select the style of your choice.

Button Text

The Button Text option allows you to add a text to your button for Eg: Read More.

Button Link

Below that, there is the Button Link option using which you can add an existing page link to the button or you can a custom link.

Title Tag

Select the title tags for your infobox titles.

Full Infobox

Enable or Disable infobox using this option.

Link

The Full InfoBox Link option gives the ability to link the entire InfoBox element to one single link. It can be added using the Link option. All the other links if set any will be removed.

Infobox Style (Carousel Layout is selected)

Just like we explained the Listing Layout options above, you can follow it for setting up a infobox carousel.

Carousel Anything Connection (When you select layout as Carousel)

Slide the button to Yes to connect infobox to anything carousel.

Connection Carousel ID

Add anything carousel ID here.

Default Active

Set which will be default active.

Effect On

Select your preferred effect.

2. Style

Title Style

Set the typography and color options here. Apart from that, you can also set the title top and bottom space.

Bottom Border Style

Show or hide the bottom border. Set the border width, height and color.

Description Style

Set the typography and color options here.

Background Options

Set all the background options here.

Button Style

Set the space above the button, padding, typography and text color.

Icon Style

Set all the icon cosmetic options here such as icon size, width, color, border color, border radius and box shadow. You can also enable the icon shine effect using the toggle button.

Carousel Options

Keep this blank or setup unique carousel id which you can use with carousel remote widget. Apart from that, you can set all the carousel options here such as Slider Mode, Slide Speed, Desktop Columns, Next/Previous, Slide Padding, etc.

Extra Options

Set the box padding, vertical center, messy columns, minimum height section, box hover effect and responsive visibility settings here.

The Style tab is used for customizing the appearance of all the Infobox widget components. All these styling options include customizing 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

On Scroll View Animation

On Scroll View Animation Options are used to set beautiful animations to your sections. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.

View On Scroll View Animation Tutorial

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

Do you want to rate this article?
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?
Need help?