Service pages, process explanations, and feature grids all share the same problem: they ask the visitor to read a block of text that feels like a brochure. The Info Box widget for Elementor solves that by giving each idea its own card — an icon or number or image up top, a tight headline, a short paragraph, and a single CTA. Sentio designed the Info Box widget so editors can stop wrestling with icon-text-button stacks and start shipping content that visitors actually scan.
What Is the Info Box Widget?
The Info Box widget is a one-card content block built to repeat in a grid. Each card takes an icon, image, or numbered badge, a title in any heading tag from H1 through H6, a short description, and an optional call-to-action button with its own icon. Editors choose where the icon sits — top, left, right, or bottom of the content — and whether the icon is wrapped in a circular badge, a rounded-square badge, or no badge at all. The Elementor Info Box handles the spacing, the hover state, and the responsive layout automatically.
Key Features of the Info Box Widget
- Three icon modes — Font Awesome icon, custom image, or numbered text — so the same widget can carry a services grid, an image-led product list, or a numbered process.
- Three badge shapes — circle, rounded-square, or no badge — combined with four layouts (top, left, right, bottom) for a full grid of visual treatments.
- Accent bar on any side of the card, plus nine icon hover animations from a quiet “grow” to a playful “wobble”.
- Fully styled CTA with hover colour, border, padding, and a positioned icon — no extra button widget required.
Why Use the Info Box Widget on Your Site?
Generic services grids look generic because they are. The Info Box widget exists because a service, a process step, and a product feature each want a slightly different shape, and editors should not have to rebuild that shape from scratch every time. A wealth management firm can lay out three core services with circle icon badges, a thin gold accent on top, and a quiet uppercase CTA — a layout that signals stewardship. A creative agency can run its process as a numbered grid where each card carries a 01, 02, 03 badge, a left-side accent bar, and content placed beside the badge instead of below it. A specialty coffee roastery can show three single-origin lots with full-bleed origin photography, no badge, and a soft float animation on hover. Each Elementor Info Box is keyboard accessible, screen-reader friendly, and works smoothly inside any flex or grid container.
Getting Started With Info Box in Minutes
Install Sentio Addons, drop the Info Box widget on any page, and pick an icon type. For icons, choose from Font Awesome or upload a custom SVG via image. For numbered grids, type a number directly into the icon-text field. Fill in the title and description, toggle the CTA on if the card needs a click target, and use the Style tab to dial in colours, padding, and hover behaviour. Duplicate the widget two more times inside a flex container to build a tidy three-card grid.
See the Info Box Widget in Action
The widget page above this article shows three distinct examples: a deep-navy wealth-management grid with circle icon badges and a gold accent strip, a vibrant pink creative-agency process grid with numbered rounded-square badges and a left-side accent, and a minimal cream coffee-roastery grid with full-bleed origin imagery and no badge at all. Same widget, same Style tab, three completely different stories.
Service grids are the workhorse of the modern marketing site. Use the Info Box widget for Elementor and you stop assembling card layouts by hand and start designing them. Sentio Addons keeps building practical, design-system-friendly widgets like this because publishing teams need real tools, not toy components.