With Ultra Addons, you can add an Info Box anywhere on a web page. This is a simple widget, yet does a great job. Widgets like this are only available on Ultra Addons. Even better, you can get the Info Box widget on the free version of Ultra Addons. In this article, we will show you how to use Info Box from Ultra Addons.
Some people, especially those who are technically sound; face difficulties when there are situations to create infoboxes for their services or products. They may need to hire developers or create one manually by themselves, which is a lot of hassle. If you use Ultra Addons, you can get rid of this extra hassle.
Let’s Find Out How to Use Info Box from Ultra Addons
Using the Info Box widget of Ultra Addons is very easy, it is just like other widgets of Ultra Addons. Before you go through the process, you must ensure you have both Elementor and Ultra Addons installed and activated. So, without further ado, let’s get started.
Previously, we have shown how to use the Pricing Table from Ultra Addons. Similarly, you have to choose the web page where you want to insert an Info Box. Just navigate to the page which you want to edit –
Dashboard >> All Pages >> [The Page You Want to Edit]
For this tutorial, we are going to insert an Info Box inside the Homepage. After selecting the homepage, we will need to hit the Edit with Elementor button.
After clicking the button, it will appear along with the Elementor customization panel. Scroll down until you finally see the Info Box widget. Select it and drag it over to a suitable place where you want it to appear.
As soon as you place the widget, you will notice an Info Box is automatically generated like below –
Info Box –
Set the alignment of the Info Box to –
- Left
- Center
- Right
- Justified
You can either select an icon or image from the “Select Icon Or Image” drop-down section.
When “Icon” is selected, you can pick any icon from the Elementor Icon Library after clicking space under Icon. Aside from “All Icons”, all the icons from Elementor are categorized in –
- Font Awesome – Regular
- Font Awesome – Solid
- Font Awesome – Brands
You Should Know –
The icons in the Elementor Icon Library are from Font Awesome.
Ultra Addons provide more icons from its own selection. Therefore, you have more options to choose your desired icon in the Info Box.
And if you are a paid user of Elementor Pro, then you can upload your own custom icon by hitting the Upload button beside “My Libraries”.
That being said, you can also set an image from the “Select Icon/Image” drop-down menu. You will notice a blank space under the title “Select Image”. You can select your preferred image in the Info Box.
Ultra Addons lets you view the Info Box in three ways. They are –
- Default view – Info Box without icon
- Stacked view – A sophisticated Info Box with an icon
- Framed view – More organized Info Box with an icon
Except for the Default view (where there is no icon), you can change the shape of the icon for the other two views. You can either make the icon Square or Circle.
After that, we can come to the “Title & Description” part, where we can change the title of the Info Box, the HTML Title tag for the title, and the description of the Info Box.
After changing the title, description, and title tag; we got the following Info Box –
You can make the whole Info Box clickable by turning on the Wrapper Link Switch. This will wrap the entire section with the link you provided and make the button inside the Info Box disappear.
Just like any input field for a link, you can insert your desired URL and set the Padding.
You can tweak the settings icon next to the URL field to configure more advanced options like –
- Opening the link in a new window/tab
- Adding a nofollow rule
- Insert custom attributes
As usual, Dynamic Content can be applied by clicking on the icon next to the settings icon and pressing “SEE IT ACTION” for further instructions.
And if you don’t want something like this, then keep “Wrapper Link Switch” turned off. This will keep the button enabled inside the Info Box, which will bring us to our next session.
Button –
Like other widgets of Ultra Addons, the Button section works as usual. You can change the button text, insert a suitable link, and change the button icon.
The icon can be placed before the text like below –
Note –
Changing the button icon will be the same as changing the icon in the header section from the Icon Library.
Now it’s time for some advanced customization. You can change the icon position before or after the text. You can also increase or decrease the icon space.
Moreover, you can change the size of the button from the Size drop-down option –
Also, add some Padding or adjust the position by configuring the Margin.
Wrapper Link –
We previously described how you can properly use the Hero Banner of Ultra Addons. Just like the Hero Banner widget, you make the whole Info Box section wrapped inside a URL. Copy and paste the link inside the “Desired URL” input field.
Advanced settings for the link can be configured by clicking the settings icon. You can make the link open in a new tab, add a nofollow rule, and add custom attributes to the link.
That being said, Dynamic Content can be set inside the Wrapper Link section by pressing the icon beside the settings icon. Then you have to press the “SEE IT IN ACTION” button to go with the further procedure.
Hover Effect –
You can set an animation for the Info Box from plenty of selections. Select an animation that you liked the most for the Info Box from the Hover Effect section. Just like the widgets, Ultra Addons offer the same number of animations here.
The configuration for the Style and Advanced tab is the same for the other widgets of Elementor. These 2 tabs allow you to change the text color, adjust the alignment, change typography, insert gradient text, insert Custom CSS, configure the settings in responsive mode, and so on.
We guess, there isn’t too much to discuss when you already know how to customize a web page using the Style and Advanced tab in the Elementor.
Also Read –
Take your customization to the next level with Ultra Slider
Conclusion
There you have it! Now you know how to use the Info Box of Ultra Addons. Using this wonderful widget, you will unlock more possibilities to customize web pages and overcome the limitations of Element Page Builder. Even the free version of Ultra Addons will give you many customization options like this one. Now you can create and customize exclusive InfoBoxes without hiring a developer.