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.
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.
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.
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.
Now, start adding a description for your InfoBox. The Description field is WYSIWYG editor which will allow you to highlight your content as well.
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.
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.
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.
Enabling the button, gives more options to customize the Button. Under the Button Style option, you can select the style of your choice.
The Button Text option allows you to add a text to your button for Eg: Read More.
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.
Select the title tags for your infobox titles.
Enable or Disable infobox using this option.
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.
Set which will be default active.
Select your preferred effect.
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.
Set the typography and color options here.
Set all the background options here.
Set the space above the button, padding, typography and text color.
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.
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.
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