--- title: "Info Box Widget: Settings Overview" url: https://theplusaddons.com/docs/info-box-widget-settings-overview/ date: 2024-03-14 modified: 2026-04-09 lang: en author: "Aditya Sharma" description: "Want to make your website more eye-catching and highlight important content? The Info Box widget from The Plus Addons for Elementor allows you to easily create stunning, interactive boxes that..." image: https://theplusaddons.com/wp-content/uploads/2024/03/Info-Box-Widget_-Settings-Overview-1024x536.jpg word_count: 910 --- # Info Box Widget: Settings Overview ## - Info Box widget from The Plus Addons for Elementor enhances website engagement by showcasing promotions and testimonials. - Pro version of The Plus Addons for Elementor unlocks advanced features like Info Box Carousel and Remote Carousel Info Box. - Users can select from six styles for the Info Box, including interactive hover animations in Style 6 (Pro). - Icon options include FontAwesome, Icons Mind (Pro), and Lottie animations, allowing for extensive customization of the Info Box. Want to make your website more eye-catching and highlight important content? The Info Box widget from The Plus Addons for Elementor allows you to easily create stunning, interactive boxes that convert visitors. With the Info Box, you can showcase promotions, testimonials, featured services, and more. This versatile widget helps you add beautiful, functional boxes that boost engagement across your site. [LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-info-box/?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## Required Setup - [Elementor FREE Plugin](http://wordpress.org/plugins/elementor/) installed & activated. - You need to have The Plus Addons for Elementor plugin installed and activated. - Make sure the Info Box widget is activated, to verify this visit The Plus Addons → Widgets **→ **and Search of Info Box and activate.  - This is a Freemium widget to unlock the extra features, you need the [PRO version of The Plus Addons for Elementor.](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## Learn via Video Tutorial: https://youtu.be/wcnlT5JE0vM?si=umfm-tx0updSyFWQ ## How to Activate the Info Box Widget? Go to  - **The Plus Addons **→** Widgets ** - **Search **the widget name** **and** turn on the toggle. ** ![](https://theplusaddons.com/wp-content/uploads/2024/03/info-box-1024x358.png) ## Key Features - **Info Box Carousel (Pro): **You can [add an info box carousel.](https://theplusaddons.com/docs/create-an-infobox-service-box-carousel-in-elementor/) - **Link Info Box:** With this, you can [add a link to the whole info box.](https://theplusaddons.com/docs/add-link-to-the-info-box-in-elementor/) - **Remote Carousel Info Box (Pro): **With the Unique Carousel ID, you can easily [connect and control the Carousel info box listing with the Carousel Remote widget.](https://theplusaddons.com/docs//connect-elementor-infobox-with-carousel-remote/) - **Carousel Anything Info Box: **You can make a [connection between your info box and the Carousel Anything widget with a unique ID.](https://theplusaddons.com/docs//connect-infobox-with-carousel-in-elementor/) ## How to Add Info Box in Elementor? Add the Info Box widget to the page. From the **Select Layout** dropdown, you can select **Listing** or **Carousel**. **Listing **- You can create a list of info boxes. **Carousel **- You can [create a carousel of info boxes.](https://theplusaddons.com/docs/create-an-infobox-service-box-carousel-in-elementor/) Let’s select **Listing** here. ![Info box content](https://theplusaddons.com/wp-content/uploads/2024/03/Info-Box-Content.gif) > *Note: You can directly use *[*The Plus Addon for Elementor’s All info box designs*](https://theplusaddons.com/elementor-widget/elementor-info-box/)* that you can *[*copy & paste into your website*](https://theplusaddons.com/docs/perform-cross-domain-copy-paste-live-copy-elementor-page-builder/)*.* In the **Info Box Style,** you’ll find six different style options. **Style 1:** In this style, the icon is placed inline with the title & description in the left position. **Style 2 (Pro): **In this style, the icon is placed inline with the title & description in the right position. **Style 3:** In this style, the icon is placed at the top and below the title & description in the center position. **Style 4:** In this style, the icon is placed inline with the title, and below the description, with the left position. **Style 5 (Pro): **In this style, the icon is placed with the title & description in the left position. **Style 6 (Pro): **This style will give interactive hover animation for the Info box. Then in the **Title Of Info Box** field, you can add a title. In the** Description** section, you can add the info box's description. In the **Link** field, you can add a link to the Info box title. From the **Select Icon** dropdown, you can select the icon type. Here you’ll find five options –  - **None** - With this, no icon will be added to the info box. - **Icon** – To add a standard icon to the info box. - **Image** - To [add an image to the info box. ](https://theplusaddons.com/docs//create-elementor-image-box/) - **Svg (Pro)** - To add a custom SVG to the info box - **Lottie** – To [add a Lottie animation to the info box.](https://theplusaddons.com/docs//lottie-animation-in-infobox-elementor/) Based on your selection, you’ll find different icon options to add to the info box. From the **Icon Font** dropdown, you can select and add an icon based on the chosen Icon Type. Here you’ll find four options: - **FontAwesome** – To add classic icons, from the FontAwesome icon library. - **FontAwesome 5** – To add modern icons, from the FontAwesome 5 collection. - **Icons Mind** **(Pro)** –To add clean and minimal icons, from the Icons Mind library. - **Icons Image (Pro) **–To add icons using your own images for a more custom look. Based on your selection, you’ll find different options for an Icon Type. From the **Button** toggle, you can add a button to the info box.  When enabled, you can select a button style from the **Button Style** dropdown. From the **Button Text** field, you can edit the button text. Then in the **Button Link** field, you can add a link to the button. From the **Title Tag** dropdown,** **you can change the HTML tag of the info box’s title. From the **Full Infobox Link** toggle, you can [make the entire info box clickable](https://theplusaddons.com/docs/add-link-to-the-info-box-in-elementor/) ## How to Style the Info Box Widget? To style the Info** **box, you’ll find all the options in the Style tab. **Title Style** -  From here, you can manage the main title style. You can change the title style’s typography, title color, and title top & bottom space. ![Info Box Style](https://theplusaddons.com/wp-content/uploads/2024/03/Info-Box-Style.png) **Bottom Border Style **- From here, you can add an underline under the title. **Description Style** -  From here, you can customize the description’s typography and color. **Background Option** - From here, you can customize the info box background border and add an image background, etc. **Icon Style **-  From here, you can manage the icon style. You can change the icon style, size, and color. **Extra Options** - From here, you can customize box padding, center icon, minimum height section, box hover effects (Freemium), and responsive visibility.  **On Scroll View Animation** -  This is our global extension available for all our widgets. This adds scrolling animation as the widget comes into the viewport. You can learn more about this from here. Advanced options remain common for all our widgets. You can explore all its options from here. [View Advanced tab tutorial.](https://docs.posimyth.com/tpae/advanced-tab/) ![Info Box Demo](https://theplusaddons.com/wp-content/uploads/2024/03/Info-Box-Demo-1024x280.png)