Image cards — a picture on top, a title and a line of text under it — are one of the most common blocks on a marketing page. They map to Elementor’s Image Box widget, but a few details decide whether the result looks right.
When a card becomes an Image Box
A container with exactly one image, one heading and at most one paragraph, and no other content elements, is converted into a single Image Box. There is one deliberate guard: if the card contains any extra text beyond the heading and paragraph — a step number, a badge, a price — the conversion is skipped and the block is kept as a normal Container instead. Losing that extra text would be worse than keeping a slightly deeper tree.
Making the image actually fill the card
Elementor’s Image Box shows the image at 30% width by default. That is almost never what a converted card wants, so the display width is set explicitly from how wide the image is relative to its card — full-bleed images get 100%.
If the source image used object-fit: cover to fill a fixed height (or an aspect-ratio box), that is carried over too: the rendered height plus Object Fit = Cover are written to the widget. The practical benefit shows up in placeholder mode — the settings are already in place, so when you later drop a real picture into the empty slot it crops and fills the card immediately instead of arriving as a small thumbnail you have to resize by hand.
Rounded corners
Card corners usually come from border-radius plus overflow:hidden on the card, which clips the full-bleed image to the rounded top. Since a flattened Image Box has no overflow control of its own, the image is given a matching radius directly, so it lines up with the card’s rounded frame.
The one real limitation
Elementor’s Image Box has no content-padding control. If your design has a full-bleed image with text inset by, say, 18px, that inset cannot be reproduced inside the widget — the widget’s own padding would inset the image as well. The text sits close to the card edge.
If pixel-exact text padding matters more to you than having a single tidy widget, keep that block as a Container with separate Image, Heading and Text widgets; each keeps its own padding. It is a genuine trade-off between structural tidiness and exact spacing — worth knowing before you convert a whole page of cards.
Checklist for image cards
- Upload images to the Media Library first and reference real
https://URLs — they import with no manual step. - Otherwise use Empty image placeholders; each slot keeps its
alttext as a caption so you know which picture goes where. - Keep the card to image + heading + one paragraph if you want the single-widget result.
- Avoid Base64-embedded images; they are dropped to placeholders by design.