Key Features of the Elementor Information Box Widget
- Customizable Icon: Choose from a variety of icons to visually represent the information.
- Flexible Content: Add a title and description for each box to provide clear, digestible content.
- Styling Options: Customize backgrounds, borders, and typography to seamlessly integrate the widget with your design.
- Responsive Layout: The widget is mobile-friendly, ensuring your content looks great on all devices.
What’s Needed?
To use the Elementor Information Box Widget, you will need:
- Elementor Free Version: The core page builder plugin for WordPress.
- Vertex Addons for Elementor: The plugin that provides the Information Box Widget.
Install and Activate the Elementor Information Box Widget
To activate this widget, please refer to our Widget Activation Guide.
How to Configure the Elementor Information Box Widget in Elementor
Let’s walk through how to configure the Elementor Information Box Widget within Elementor:
Step 1: Add the Widget
Start by dragging and dropping the Information Box Widget from the Elementor panel onto your page.
Content Tab Configuration
In the Content tab, you’ll define the main elements of your Information Box.
- Icon:
- You can choose an icon from the library to represent the information you’re displaying. Whether it’s a lightbulb for ideas or a phone for customer service, the icon helps users quickly identify the box’s subject.
- Title:
- Enter a concise title that grabs attention. The title will be the first thing your visitors see, so make sure it’s clear and descriptive.
- Description:
- Add a brief description to explain the information presented. This is a place for additional details, so use this space to support your title with relevant context.
Style Tab Configuration
Once the content is in place, move on to the Style tab for further customization. You can adjust the look and feel of each part of the Information Box:
Icon Style:
- Background Color: Set a background color for the icon to make it stand out.
- Text Color: Adjust the color of the icon to match your design.
- Size: Choose the size of the icon to ensure it fits well within the box.
- Box Height: Adjust the height of the icon box to control the spacing around the icon.
- Box Width: Control the width of the box surrounding the icon.
- Padding: Add space inside the box to prevent the icon from touching the edges.
- Border Type: Choose a solid, dotted, or dashed border for the icon’s box.
- Border Radius: Round the corners of the icon’s box for a softer appearance.
- Box Shadow: Add a shadow effect to create depth and make the icon stand out.
Box Style:
- Background Type: Select a background color or gradient for the entire Information Box.
- Padding: Adjust the padding to create space around the title and description.
- Border Radius: Round the corners of the entire box for a smooth, polished look.
Title Style:
- Text Color: Choose a color for the title to make it stand out.
- Typography: Set the font, size, and weight for the title to match your design.
- Alignment: Align the title to the left, center, or right.
- Margin: Adjust the margin around the title for better spacing.
Description Style:
- Text Color: Choose the color for the description text.
- Typography: Select the font style, size, and weight for the description.
- Alignment: Adjust the text alignment for left, center, or right.
- Margin: Add spacing around the description text for better visual balance.
Back Box Style:
- Background Type: You can also customize the background color for the box behind the icon and text.
Advanced Tab Configuration
The Advanced tab offers more detailed settings that apply to all widgets in Vertex Addons:
- Margin: Adjust the outer spacing of the widget relative to other elements on the page.
- Padding: Set the inner spacing to control the area around the widget’s content.
- Custom CSS: If you need more advanced design options, use custom CSS to fully personalize the widget’s look.
Final Outcome
After configuring the widget to your liking, your final Information Box will be a well-styled, responsive element that highlights key information with clarity and style.