En este artículo te voy a enseñar cómo dominar las imágenes y galerías en Elementor Pro, no solo usando el widget básico, sino combinando contenedores, efectos hover y plantillas para crear diseños que realmente impacten y mejoren la experiencia de usuario en tu web. Llevo años diseñando webs para clientes de todo tipo, desde tiendas online hasta portfolios de artistas, y siempre me encuentro con el mismo error: la gente sube imágenes sin optimizar, las coloca de cualquier manera y se olvida de que una galería no es un álbum de fotos, es un funnel visual. Te voy a contar exactamente cómo lo hago yo, paso a paso, para que no cometas esos fallos.

Por qué la galería básica de Elementor se te queda corta (y qué hacer al respecto)

La mayoría de la gente abre Elementor, busca el widget «Galería», lo arrastra y ya está. Creen que con eso tienen una galería profesional. Y no, ¿vale? Ese es el primer error. Es como si para construir una casa solo usaras ladrillos, pero te olvidaras de los cimientos, las vigas y el diseño de la distribución.

El problema del widget único

El widget de Galería de Elementor está bien para algo rápido y sucio. Te permite subir varias imágenes, elegir un número de columnas y poco más. Pero te ata a una estructura rígida. ¿Quieres que una imagen ocupe dos espacios? No puedes. ¿Quieres añadir un título con un estilo diferente justo debajo de una foto concreta? Complicado. ¿Quieres que al pasar el ratón no solo se vea un efecto genérico, sino que aparezca un botón de «Ver proyecto»? Olvídate.

Te limita a lo que el widget decide por ti. Y cuando tu diseño necesita personalización, chocas contra un muro. Elementor es el constructor de páginas para WordPress más popular del mundo, con más de 12 millones de instalaciones activas. Con tantas instalaciones, si todos usáramos solo el widget básico, todas las webs tendrían el mismo aspecto aburrido.

De la galería estática a la experiencia dinámica

La clave no está en mostrar fotos, está en guiar al visitante. Una galería estática es un muro. Una experiencia dinámica es un camino. Piensa en la web de un fotógrafo de bodas. No quieres solo un mosaico de 50 imágenes iguales. Quieres que la primera imagen sea impactante, la que cuenta la historia del día. Luego, quieres agrupar las fotos de la ceremonia, los retratos, el banquete… y que el usuario pueda interactuar con cada grupo.

El widget básico no hace eso. Para eso necesitas pensar en contenedores, en secciones independientes que puedas manipular a tu antojo. Tienes que dejar de verlo como «una galería» y empezar a verlo como «un sistema de presentación visual» que construyes pieza a pieza. Es más trabajo, sí. Pero la diferencia en el resultado es abismal.

Guía paso a paso: Construyendo una galería profesional desde cero

Vamos a hacerlo como yo lo hago. Olvídate del widget Galería por un momento. Vamos a construir con bloques de Lego, que son mucho más potentes.

  1. Paso 1: La base con contenedores, no con el widget Galería. Lo primero que hago es arrastrar un contenedor a la sección. Dentro de ese contenedor, voy a crear la estructura de mi galería. Si quiero una cuadrícula de 3 columnas, configuro el contenedor para que tenga 3 columnas desde el panel de diseño. Este contenedor es mi lienzo en blanco, mi rejilla vacía. Aquí tengo el control total sobre los márgenes, el padding, el fondo… todo.

  2. Paso 2: Insertar y configurar cada imagen individualmente. Ahora, dentro de la primera celda de mi contenedor, arrastro un widget de Imagen. Subo la primera foto. Y aquí viene lo bueno: configuro esta imagen como si fuera la única que importa. Le pongo el tamaño exacto, el borde redondeado que me gusta, la sombra. Luego, copio este widget y lo pego en la siguiente celda del contenedor, solo cambiando la imagen. Así con todas. ¿Por qué? Porque si mañana quiero que la tercera imagen tenga un efecto diferente, solo tengo que editar ese widget concreto, no toda la galería. Un truco práctico: a veces es más rápido duplicar la celda entera del contenedor (con la imagen ya configurada dentro) que copiar solo el widget. Prueba ambas y quédate con el flujo que te resulte más natural, ¿vale?

  3. Paso 3: El arte del espaciado y la alineación. Con cada imagen en su propio widget dentro del contenedor, puedo jugar con el espacio entre ellas de una forma precisa. En el panel del contenedor, uso el control de «Espacio entre elementos» (Gap). Un error común es poner demasiado o demasiado poco espacio. Yo suelo empezar con 20 píxeles y ajusto según vea. La alineación también es crítica. Asegúrate de que todas las imágenes tengan la misma altura o proporción, o al menos que estén alineadas visualmente. Si una es vertical y otra horizontal, define un contenedor de altura fija para que no rompa la cuadrícula.

  4. Paso 4: Añadir títulos, descripciones y enlaces que conviertan. ¿Recuerdas que cada imagen es un widget independiente? Pues justo debajo del widget de imagen, dentro de la misma celda del contenedor, puedo arrastrar un widget de Título o Texto. Le pongo el nombre del proyecto, una breve descripción, y lo más importante: un enlace. Puede ser un enlace a una página con más detalles, a un formulario de contacto para ese servicio concreto, o que abra esa imagen en un Lightbox personalizado. Así, cada elemento de tu galería deja de ser una foto muda y se convierte en una tarjeta de presentación con una llamada a la acción clara.

El efecto ‘hover’ que marca la diferencia (y cómo aplicarlo sin código)

Pasar el ratón por encima y que pase algo no es un efecto bonito. Es una oportunidad. Es el momento en el que el usuario te dice «me interesa esto». Si no haces nada, la oportunidad se pierde.

No es un adorno, es una llamada a la acción

Imagina que tienes una galería de productos. Al pasar el ratón, la imagen se oscurece un poco y aparece un botón que dice «Añadir al carrito» o «Ver especificaciones». Eso no es decoración, es un funnel de conversión directo. Le estás guiando al siguiente paso sin que tenga que pensar. El efecto hover debe tener una intención: revelar información oculta (precio, categoría), destacar el elemento para confirmar la selección, o invitar a una acción concreta.

Configurando escala, opacidad y sombras en Elementor Pro

Vamos con un ejemplo práctico. Toma uno de esos widgets de imagen individuales que creamos antes. En el panel de edición, ve a la pestaña «Estilo» y busca la sección «Efectos Hover».

  • Escala: Activa la transformación y pon un valor como «1.05». Esto hará que la imagen crezca ligeramente al pasar el ratón, dándole una sensación de interactividad física.
  • Opacidad: En el estado normal, la opacidad está al 100%. En hover, puedes bajarla un poco, al 90% o 85%, para que se oscurezca y permita que cualquier texto o botón que añadas encima después se lea mejor.
  • Sombra: Añade una sombra en el estado hover más intensa que la normal. Una sombra más grande y difuminada da la sensación de que el elemento «se eleva» sobre el resto.

La magia está en combinar estos efectos de forma sutil. No se trata de que la imagen dé volteretas. Se trata de un cambio sutil pero perceptible que confirma la interacción del usuario. Pruébalo, ¿vale? Verás cómo algo tan simple cambia completamente la sensación de profesionalidad.

Carrusel vs. Galería en rejilla: Cuándo usar cada uno (y por qué)

No son intercambiables. Cada uno cumple una función psicológica diferente en tu página. Usar el incorrecto puede hacer que tu contenido pase desapercibido.

Característica Carrusel (Slider) Galería en Rejilla (Grid)
Mejor para Destacar un número limitado de elementos principales (ej: testimonios, productos estrella, proyectos destacados). Mostrar un catálogo completo para exploración (ej: portfolio, tienda, blog).
Atención del usuario Dirigida. El usuario se centra en un elemento a la vez, guiado por las flechas. Libre. El usuario escanea y elige por dónde empezar.
Control Tú decides el orden y el ritmo. Ideal para contar una historia secuencial. El usuario tiene el control total de la navegación.
Riesgo El «ciego de banner»: los usuarios a menudo ignoran los slides después del primero. La sobrecarga de opciones puede paralizar la decisión si no está bien organizada.
Mi recomendación Úsalo arriba en la página, para lo más importante. Máximo 5-7 slides. Úsalo en secciones de catálogo o portfolio. Con paginación o carga progresiva si hay muchos elementos.

La regla de oro del número de elementos

Para un carrusel, si tienes más de 7 elementos, replantéatelo. Probablemente haya cosas que no son tan «destacadas». Para una rejilla, en escritorio puedes mostrar 3, 4 o 6 elementos por fila. En móvil, reduce a 1 o 2. La clave es que se vean bien, no amontonados. Si tu galería tiene 50 imágenes, no las muestres todas de golpe. Usa la paginación de Elementor o el botón de «Cargar más» para no matar la velocidad de carga.

El pecado capital: Subir imágenes sin optimizar (y cómo solucionarlo)

Esto es no negociable. Puedes hacer la galería más bonita del mundo, que si tarda 8 segundos en cargar, el usuario se habrá ido antes de verla. Y Google también se habrá ido, porque penaliza las páginas lentas.

El impacto real en la velocidad de carga

Según datos de HTTP Archive, las imágenes representan en promedio el 42% del peso total de una página web. Casi la mitad. Subir una foto directamente desde tu cámara (que puede pesar 4 o 5 MB) es un suicidio para tu web. Además, Google considera el Core Web Vitals, donde la carga de imágenes es clave (Largest Contentful Paint), como factor de posicionamiento. Si la imagen más grande de tu página tarda mucho en pintarse, tu LCP será malo y te costará más rankear.

Herramientas gratuitas para comprimir antes de subir

Yo no subo nunca una imagen sin pasar antes por un compresor. Es un paso obligatorio en mi workflow. Herramientas que uso y no cuestan un euro: * TinyPNG / TinyJPG: Una web donde arrastras las imágenes y las comprime de forma brutal manteniendo una calidad decente. Perfecto para PNG y JPG. * Squoosh.app: De Google. Te permite jugar con la compresión y ver al instante la diferencia entre el original y el comprimido. Tienes control total. * Plugins en WordPress: Si ya se te ha pasado alguna, plugins como ShortPixel o Imagify comprimen automáticamente las imágenes que subes. Suelen tener un límite gratuito mensual.

Los formatos correctos: WebP no es una opción, es una obligación

El formato WebP es, a día de hoy, el estándar. Ofrece una calidad similar a JPG o PNG con un tamaño de archivo mucho menor. La mayoría de las herramientas de compresión que te he dicho te permiten exportar a WebP. Elementor, por defecto, sirve imágenes WebP si tu hosting lo soporta (casi todos los modernos lo hacen). Asegúrate de que es así. Si no, convierte tus imágenes a WebP antes de subirlas. Para logotipos o iconos simples, sigue usando SVG, que es vectorial y pesa casi nada.

Trucos avanzados: Lightbox personalizado, plantillas de galería y filtros sin plugins

Cuando ya dominas lo básico, puedes dar un paso más para crear experiencias únicas sin depender de plugins de terceros que ralenticen tu web.

Configurar el Lightbox de Elementor para que no parezca genérico

El Lightbox es esa ventana que se abre al hacer clic en una imagen. El de Elementor es bastante bueno, pero sale con un estilo por defecto. Puedes personalizarlo para que encaja con tu marca. Ve a Elementor → Ajustes → Lightbox. Ahí puedes cambiar el color de fondo, la transparencia, el color de los botones de navegación e incluso el tamaño de la tipografía. Un detalle que marca la diferencia: activa la opción para mostrar el título y la descripción de la imagen en el Lightbox. Así, cuando alguien amplíe una foto, verá el contexto que tú quieras darle.

Aprovecha las Plantillas y Bloque guardados para ser más rápido

Aquí es donde entran las plantillas que mencioné al principio. Yo no vuelvo a construir cada galería desde cero, ¿vale? Cuando tengo un diseño que me gusta —por ejemplo, una cuadrícula de 3 columnas con imágenes redondeadas, un título en negrita y un botón con un hover específico—, lo guardo como una Plantilla o un Bloque Global en Elementor. La próxima vez que necesite una galería para otro proyecto, solo tengo que ir a la biblioteca de plantillas, arrastrarla a la página y cambiar las imágenes y textos. Es una forma de estandarizar tu trabajo y hacerlo mucho más eficiente, sin perder la personalización total que te da usar contenedores.

Simular filtros de categoría sin plugins: Explicación paso a paso (y su límite)

¿Quieres una galería donde el usuario pueda hacer clic en «Web Design» y solo vea esos proyectos? Es posible, pero tengo que ser honesto: el método nativo de Elementor Pro no es un filtro con un clic como los de JavaScript. Es un hack que usa contenido dinámico y visibilidad, y yo no soy programador, ¿vale? Te explico cómo se haría, para que veas si te compensa el esfuerzo o es mejor buscar una solución más robusta.

  1. Estructura: Crea un contenedor principal. Dentro, crea tantos contenedores hijos como categorías tengas (ej: «Web Design», «Branding»).
  2. Categoría dinámica: Dentro de cada contenedor hijo, añade tus imágenes. Luego, ve a la configuración de cada imagen (o de su contenedor padre) y en la pestaña «Contenido Dinámico», busca la opción de agregar una etiqueta personalizada. Asígnales la misma etiqueta a todas las imágenes de la misma categoría (ej: «web_design»).
  3. Los botones «filtro»: Crea tus botones de categoría. Ahora, para que esto funcione, tendrías que usar un truco de plantillas dinámicas y condiciones que, te soy sincero, es bastante avanzado y a menudo requiere un plugin ligero de filtros o un código corto. En Elementor puro, sin código, no puedes hacer que un botón «muestre solo los elementos con una etiqueta». Lo que sí puedes hacer es duplicar toda la galería por categoría y usar los Controles de Visibilidad de la sección para mostrar u ocultar contenedores completos al hacer clic en un botón, pero eso requiere configurar interacciones de clic, y la galería resultante no se reorganiza dinámicamente.

¿Por qué te cuento todo esto? Porque es mi forma de trabajar: te muestro lo que es posible y lo que no, con sus límites. Para un filtro de verdad, hoy por hoy, muchas veces recomiendo un mini-plugin específico y bien optimizado. Pero si tu galería es pequeña, duplicar secciones y mostrarlas/ocultarlas con las interacciones nativas de Elementor puede ser una solución práctica y que tú mismo puedes mantener.

Revisión final: Checklist antes de publicar tu galería

Antes de darle al botón de publicar, repasa estos puntos. Son detalles tontos que, si se te pasan, arruinan todo el trabajo anterior.

  • ¿Se ve bien en móvil? (Responsive). No des por hecho que sí. Abre el editor de Elementor, cambia a la vista móvil y comprueba que las imágenes no se salen, que los textos no se solapan y que los botones se pueden pulsar con el dedo. Ajusta los márgenes y el tamaño de fuente específicamente para móvil.
  • ¿Todas las imágenes tienen ‘alt text’ descriptivo?. No pongas «IMG_5432.jpg». Describe lo que se ve en la foto. «Fotógrafo de boda capturando el primer beso en una ceremonia en Sevilla» es mucho mejor. Es accesibilidad y es SEO.
  • ¿Los enlaces funcionan y abren donde deben?. Haz clic en cada uno. ¿El botón de «Ver proyecto» lleva a la página correcta? ¿El enlace del Lightbox se abre en una nueva pestaña si es necesario? Parece obvio, pero es el error más común.
  • ¿La velocidad de carga no se ha resentido?. Usa una herramienta como PageSpeed Insights o GTmetrix y analiza la página donde está tu galería. Presta atención al LCP (Largest Contentful Paint). Si ha empeorado mucho, vuelve al paso de optimización de imágenes. A veces, activar la carga diferida (lazy load) para las imágenes de la galería puede ayudar.

Construir una galería que realmente funcione es un trabajo de artesanía. No se trata de usar la herramienta más fácil, sino de combinar las herramientas más potentes con un propósito claro: guiar a tu visitante y convertir su interés en acción. Empieza por cambiar el chip, deja el widget básico para lo que es y atrévete a construir con contenedores. La diferencia no es solo visual, es de resultados.

Si te ha quedado alguna duda o quieres profundizar más en algún truco de Elementor, tienes el vídeo de donde sale este artículo justo aquí arriba. Y si necesitas una mano para aplicar esto a tu web, ya sabes dónde encontrarme.