Las tarjetas con imagen (una foto arriba, un título y una línea de texto debajo) son uno de los bloques más habituales en una página de marketing. Se corresponden con el widget Caja de imagen (Image Box) de Elementor, pero unos cuantos detalles deciden si el resultado se ve bien.
Cuándo una tarjeta se convierte en Caja de imagen
Un contenedor con exactamente una imagen, un título y como máximo un párrafo, y sin otros elementos de contenido, se convierte en una única Caja de imagen. Hay una protección deliberada: si la tarjeta contiene algún texto adicional además del título y el párrafo (un número de paso, una insignia, un precio), la conversión se omite y el bloque se conserva como un contenedor normal. Perder ese texto adicional sería peor que conservar un árbol algo más profundo.
Cómo hacer que la imagen llene de verdad la tarjeta
La Caja de imagen de Elementor muestra la imagen al 30 % de ancho por defecto. Casi nunca es lo que necesita una tarjeta convertida, así que el ancho de visualización se establece explícitamente según lo ancha que sea la imagen respecto a su tarjeta: las imágenes a sangre reciben el 100 %.
Si la imagen original usaba object-fit: cover para llenar una altura fija (o una caja con aspect-ratio), eso también se traslada: la altura renderizada más Object Fit = Cover se escriben en el widget. La ventaja práctica se nota en el modo de marcadores de posición: los ajustes ya están puestos, así que cuando más adelante sueltas una foto real en el hueco vacío, se recorta y llena la tarjeta de inmediato en lugar de llegar como una miniatura pequeña que tienes que redimensionar a mano.
Esquinas redondeadas
Las esquinas de la tarjeta suelen venir de border-radius más overflow:hidden en la tarjeta, que recorta la imagen a sangre por la parte superior redondeada. Como una Caja de imagen aplanada no tiene control de overflow propio, la imagen recibe directamente un radio equivalente, para que encaje con el marco redondeado de la tarjeta.
La única limitación real
La Caja de imagen de Elementor no tiene control de padding del contenido. Si tu diseño tiene una imagen a sangre con el texto desplazado hacia dentro, por ejemplo 18px, ese margen interior no se puede reproducir dentro del widget: el padding propio del widget también desplazaría la imagen. El texto queda pegado al borde de la tarjeta.
Si el padding exacto del texto te importa más que tener un único widget ordenado, conserva ese bloque como un contenedor con widgets Imagen, Título y Texto separados; cada uno mantiene su propio padding. Es un compromiso real entre orden estructural y espaciado exacto, y conviene conocerlo antes de convertir toda una página de tarjetas.
Object Fit necesita una altura para hacer algo
Un detalle que explica una frustración concreta. La Caja de imagen de Elementor tiene un control Object Fit, pero solo tiene efecto cuando la imagen también tiene una altura explícita: así está construido el widget, y está comprobado en el código fuente del propio widget de Elementor, no supuesto.
Por eso, configurar solo Object Fit no hace nada. La conversión escribe ambos a la vez o ninguno: cuando la imagen original llena una altura fija con object-fit: cover, la altura renderizada y el valor de ajuste se escriben como pareja.
Si más adelante cambias esa imagen y el recorte deja de funcionar, revisa primero el campo de altura. Vaciarlo desactiva Object Fit en silencio, y el widget no te da ninguna pista de que ambos están relacionados.
Por qué importa tanto el 30 % por defecto
La Caja de imagen de Elementor viene con la imagen al 30 % de ancho, lo que encaja con su propósito original: una imagen del tamaño de un icono junto a un bloque de texto. Dentro de una tarjeta convertida parece que la conversión ha fallado: una miniatura pequeña flotando sobre un título, nada que ver con la imagen a sangre del original.
Por eso el ancho siempre se establece explícitamente, calculado según lo ancha que es realmente la imagen respecto a su tarjeta. Una imagen a sangre recibe el 100 %; una imagen interior a media anchura recibe el ancho que tenía. Es algo pequeño que decide si una página de tarjetas convertidas parece terminada o rota a primera vista.
Decidir por página, no por tarjeta
La limitación de padding de arriba es un compromiso real, y el hábito útil es decidir una vez por página en lugar de tarjeta por tarjeta. Convierte una tarjeta representativa de las dos maneras (acepta la Caja de imagen y luego vuelve a convertir con un elemento adicional en la tarjeta para que se quede como contenedor) y compara las dos una junto a otra en ancho móvil.
Si el margen interior del texto se nota lo suficiente como para molestarte, elige la vía del contenedor para toda esa página y mantenlo coherente. Una página en la que unas tarjetas son Cajas de imagen y otras son contenedores es el peor resultado: se ve bien, pero cada edición futura te obliga a recordar cuál es cuál.
Lista de comprobación para tarjetas con imagen
- Sube primero las imágenes a la Biblioteca de medios y usa URLs
https://reales: se importan sin ningún paso manual. - Si no, usa Marcadores de imagen vacíos; cada hueco conserva su texto
altcomo leyenda para que sepas qué imagen va en cada sitio. - Limita la tarjeta a imagen + título + un párrafo si quieres el resultado de un único widget.
- Evita las imágenes incrustadas en Base64; por diseño se sustituyen por marcadores de posición.
- Si cambias una imagen después y el recorte falla, comprueba que el campo de altura siga configurado: Object Fit no hace nada sin él.