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.
Object Fit needs a height to do anything
A detail that explains a specific frustration. Elementor’s Image Box has an Object Fit control, but it only takes effect when the image also has an explicit height — that is how the widget is built, and it is verified against Elementor’s own widget source rather than assumed.
So setting Object Fit alone does nothing. The conversion therefore writes both together or neither: when the source image fills a fixed height with object-fit: cover, the rendered height and the fit value are written as a pair.
If you later change that image and the cropping stops working, check the height field first. Clearing it silently disables Object Fit, and the widget gives you no hint that the two are connected.
Why the 30% default matters so much
Elementor’s Image Box ships with the image at 30% width, which suits its original purpose — an icon-sized picture beside a block of text. Dropped into a converted card it looks like the conversion failed: a small thumbnail floating above a heading, nothing like the full-bleed image in the source.
The width is therefore always set explicitly, computed from how wide the image actually is relative to its card. A full-bleed image gets 100%; a half-width inset image gets the width it had. It is a small thing that decides whether a page of converted cards looks finished or broken at first glance.
Deciding per page, not per card
The padding limitation above is a real trade-off, and the useful habit is to decide once per page rather than card by card. Convert one representative card both ways — accept the Image Box, then convert again with an extra element in the card so it stays a Container — and look at the two next to each other at mobile width.
If the text inset is visible enough to bother you, take the Container route for that whole page and keep it consistent. A page where some cards are Image Boxes and others are Containers is the worst outcome: it looks fine but every future edit needs you to remember which is which.
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.
- If you change an image afterwards and cropping breaks, check that the height field is still set — Object Fit does nothing without it.