Info Box

How to use Info Box Widget of Sky Addons for Elementor

The Info Box Widget is a versatile tool for displaying key information with an icon/image, title, description, and an optional button. Perfect for features, services, highlights, and call-to-actions, this widget fits seamlessly into any website style. It is a powerful tool to show additional information about any item you add to the page. It can be used in many different ways and it will suit any kind of website.

Features:

1. Icon or Image Support – Choose between an icon or image to visually represent your info box.
2. Flexible Layouts – Display content horizontally or vertically with left, top, or right media alignment.
3. Button Integration – Add a custom button or link with full styling and icon support.

Insert Info Box Widget

1. Open Elementor Editor. In the Elementor panel, search for “Info Box” under Sky Addons.
2. Drag and Drop the Widget to the desired location on your page / editor.

Customize Layout

Layout Section

1. Media Type – Choose to display an icon or an image.
2. Media Position – Set icon/image alignment: Left, Top, or Right.
3. Title – Add a custom heading for your Info Box.
4. Title HTML Tag – Select heading level (H1–H6) for SEO and structure.
5. Description – Add supporting text below the title.
6. Show Button / Link – Toggle to show a clickable button or link.

Button Section

1. Link – Set the button URL or anchor link.
2. Button Text – Add custom text for the button label.
3. Full Width? – Stretch the button to the full width of the box.
4. Select Icon – Add an icon beside your button text.

Style Customization

Info Box Section

1. Alignment: Align content Left, Center, Right, or Justify.
2. Content Padding: Add spacing inside the info box wrapper.

Icon/Image Section

1. Icon Size: Adjust the size of the icon or image.
2. Spacing: Space between icon/image and content.
3. Offset: Move icon/image up/down.
4. Padding: Add space around the media.
5. Border, Radius: Apply border and corner radius.
6. Advanced Border Radius: Control each corner separately.
7. Box Shadow: Add depth with shadow.
8. Icon Color: Set icon color.
9. Background: Customize background color or gradient.
10. Opacity: Control media visibility (normal & hover).

Title Section

1. Spacing: Adjust space below the title.
2. Typography: Control font style, size, and weight.
3. Color: Set text color.
4. Shadow: Add text shadow (normal & hover).

Description Section

1. Spacing: Space below or above the description.
2. Typography: Customize font settings.
3. Color: Set normal and hover text colors.

Button Section

• Padding: Adjust inner space of the button.
• Typography: Customize button font styles.
• Color: Set text color.
• Background: Define the button’s background.
• Border & Radius: Add borders and round corners.
• Text Shadow: Add shadow to the text.
• Box Shadow: Apply shadow to the button.
• (All in Normal & Hover)

Save and Preview

1. Once you’ve customized and styled your accordion, click “Publish” or “Update” to save your changes.
2. Preview the page to ensure the widget looks and functions as desired.

Troubleshooting

1. Icon/Image not showing? Make sure you’ve selected a valid media type and uploaded an image or chosen an icon.
2. Layout looks broken? Check padding and alignment settings in the Style tab.
3. Button not clickable? Ensure the link is set and “Show Button” is enabled.

Conclusion

The Info Box Widget offers a clean, customizable way to present important information on your site. With full control over layout, icons, content, and styling, it’s an essential building block for dynamic Elementor pages.