Infobox
In a world of short attention, how you present information makes all the difference. A plain text block gets skipped; a designed Info Box gets read. Master Addons Info Box Element helps to create compact, powerful content modules. Start with a professional Style Preset, then add your icon or image, a compelling title, and clear description. Style every layer independently – backgrounds, borders, text, and hover effects – to create service highlights, feature explainers, or CTAs that don’t just sit on the page, they work for it.
Pre made Style Presets & Layouts
Beat creative block and save hours. Choose from ten unique Style Presets (Variation One through Ten) that instantly apply coordinated layouts and visual styles. Whether you need a simple icon-left design, a centered card, or a modern banner-style box, there’s a starting point. These presets handle the basic structure and styling, so you can focus on your content and fine-tuning, ensuring a polished look from your very first click.
- 10+ Ready-Made Designs: Apply presets like “Variation One,” “Variation Nine,” etc., for instant visual structure.
- Layout Variety: Get different arrangements for icon/image placement (top, left, right) and content flow.
- Design Consistency: Ensure all info boxes across your site share a cohesive, professional foundation.
Typography & Text Control
Control the look of your text with precision. Style the Title and Description independently. For each, set the Typography (font, size, weight), Color, and Alignment. You can even define different text colors for the Normal and Hover states, creating a cohesive interactive experience. Adjust Padding around the text blocks to create breathing room and ensure your message is as easy to read as it is persuasive.
- Separate Text Styling: Apply unique Typography and Color to the Title and the Description.
- Interactive Text Colors: Change the text color when the user hovers over the entire info box.
- Alignment Options: Align text Left, Center, or Right to match your layout and preset.
Advanced Styling with Hover States
Make the container a key part of the design. Style the General Styles with a Background (color, gradient, or image) and full Border controls (type, width, color, radius). Properly control Padding and Margin for perfect spacing. Then, bring it to life by styling separate Normal and Hover states. Change the background color, border, or even apply a Hover Animation when users interact. This transforms a static box into an engaging, interactive element.
- Dual-State Backgrounds: Set different Background colors or images for Normal and Hover states.
- Complete Border Control: Design Border Type, Width, Color, and Radius on all sides.
- Interactive Feedback: Use Hover Animation effects (like fade, push, grow) to reward user interaction.
Frequently Asked Questions For Infobox
What's the most common use for this Info Box?
It’s incredibly versatile. The top uses are: Service/Feature Showcases (icon + title + brief description), Team Member Profiles (image + name + role), Contact Points (icon + “Call Us” + number), and Promotional CTAs (icon + compelling title + link to offer).
Can I link the entire box to a page, not just the title?
By default you can add link only to the Title. But fear not, make sure to enable the wrapper link and you can able to add a link to the entire infobox.
Should I use an icon or an image?
Icons are best for symbolic, simple concepts (a gear for “settings,” a phone for “contact”). They scale perfectly and are lightweight. Use Images when you need to show a specific logo, a person’s face, or a product photo for brand recognition.
Is the hover effect necessary?
Not necessary, but highly recommended. A subtle hover effect (like a background color change or shadow) provides valuable visual feedback to the user, indicating the element is interactive. It greatly enhances the professional, polished feel of your site.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Caldera Forms
