Cómo añadir un lightbox en WordPress (3 métodos, incluido el gratuito integrado) 

Insertas algunas imágenes en una página y, al hacer clic en una, no pasa nada o el visitante acaba en una página de adjunto poco atractiva. Lo que realmente quieres es un lightbox, donde la imagen se abre en una ventana emergente limpia y el resto de la página se atenúa detrás.

Dirigí un blog de diseño de interiores durante años, así que sé cuánto depende un portafolio de cómo se muestran las imágenes. En esta guía, te mostraré tres formas de crear un lightbox en WordPress, empezando por la opción gratuita integrada que la mayoría de las guías omiten.

¿Qué es un Lightbox (y cuándo deberías usar uno)?

Un lightbox en WordPress es una superposición emergente que amplía una imagen, vídeo o contenido cuando un visitante hace clic en él, atenuando el resto de la página para que el contenido sea el foco.

Utiliza un lightbox siempre que quieras que los visitantes se centren en una pieza de contenido sin salir de la página. Mantiene a la gente interesada y ahorra cargas de página adicionales.

Los usos comunes para un lightbox de WordPress incluyen:

• Mostrar fotografía o portafolios creativos
• Mostrar imágenes de productos con más detalle
• Resaltar capturas de pantalla, maquetas de diseño o ejemplos de trabajo
• Reproducir vídeos de YouTube o Vimeo de forma que no distraigan

También puedes usar lightboxes para formularios de suscripción o anuncios importantes. Como el fondo se atenúa, es más probable que los visitantes noten y actúen sobre el mensaje.

¿Qué método de Lightbox deberías usar?

Si solo necesitas un lightbox en una galería individual, la opción gratuita integrada suele ser suficiente. Elige SeedProd cuando estés creando páginas o un tema visualmente, y Envira cuando quieras controles avanzados de galería como pies de foto y efectos de transición.

M extasciitildeetodo	Mejor para	¿Plugin necesario?
Lightbox integrado de WordPress	Un lightbox rápido en una imagen o galería individual	No
SeedProd	Creación de páginas o un tema completo visualmente	Sí (SeedProd)
Envira Gallery	Control y personalización avanzada de galerías	Sí (Envira)

Método 1: Usa el Lightbox Integrado de WordPress (Sin Plugin)

La forma más rápida de añadir un lightbox es la que está integrada en WordPress. Desde la versión 6.4, el bloque de Imagen tiene una opción integrada de Ampliar al hacer clic que abre las imágenes en un lightbox nativo, sin necesidad de plugin.

Necesitarás WordPress 6.4 o posterior y el editor de bloques. El Editor Clásico no tiene esta opción.

Aquí está la parte que confunde a la gente: es una opción de enlace, no un selector de barra lateral. Agrega un bloque de Imagen, selecciona la imagen y luego haz clic en el icono de enlace (cadena) en la barra de herramientas del bloque.

En la ventana emergente que se abre, activa Ampliar al hacer clic.

Guarda la página y esa imagen ahora se abre en un lightbox ampliado.

Una pega honesta: esto es fiable para imágenes individuales, pero no para el bloque Galería. WordPress agregó la opción al bloque Imagen primero, y en muchas versiones todavía falta en las galerías.

Así que si quieres un lightbox en toda una galería, no luches contra la opción integrada. Usa uno de los métodos de plugin a continuación, que manejan las galerías correctamente.

Recurro a esto siempre que solo necesito que una imagen individual se amplíe, porque no hay nada que instalar, actualizar o que ralentice la página. El límite es cuánto control tienes.

Obtienes una ventana emergente limpia, pero sin subtítulos, temas ni efectos de transición, y sin soporte real para galerías. Para eso, querrás uno de los dos métodos siguientes.

Método 2: Crea un Lightbox en WordPress usando SeedProd

Si estás diseñando una página o un tema completo, SeedProd te permite activar el lightbox mientras construyes, para que puedas verlo funcionando en vivo sin tocar código. SeedProd es un constructor de sitios web de WordPress de arrastrar y soltar, y su bloque de Imagen tiene una opción de lightbox integrada.

Herramienta	constructor de sitios web de WordPress
Precios	Opciones gratuitas y de pago disponibles
Versión gratuita	Sí
Características destacadas	Editor visual de arrastrar y soltar, selector de lightbox de imágenes integrado, fácil para principiantes
Mejor para	Principiantes que desean una forma sin código de agregar un lightbox de WordPress

SeedProd viene con kits de sitios web y plantillas de páginas de destino prefabricados, para que puedas crear un diseño en unos pocos clics y personalizarlo con el constructor de arrastrar y soltar.

Con el bloque de Imagen de SeedProd, puedes habilitar un lightbox para mostrar versiones grandes de tus imágenes de galería, y esa es la función que configuraremos a continuación.

Paso 1: Instalar y Activar SeedProd

Primero, dirígete a la página de precios de SeedProd, elige un plan de licencia y crea tu cuenta de SeedProd. Una vez que estés dentro del panel de tu cuenta, ve a la pestaña Descargas y descarga el archivo del plugin SeedProd a tu computadora.

Mientras estás allí, copia la clave de licencia, porque la necesitarás en breve.

Después de descargar el plugin, instálalo y actívalo en tu sitio web de WordPress. Puedes seguir este tutorial sobre cómo instalar un plugin de WordPress si nunca lo has hecho antes.

Cuando SeedProd esté activo, ve a SeedProd » Ajustes y pega la clave de licencia que copiaste anteriormente. Haz clic en el botón Verificar clave y pasa al siguiente paso.

Paso 2: Crear un tema o una página de destino

El siguiente paso es comenzar a construir tu tema de WordPress o página de destino. SeedProd te permite hacer ambas cosas, así que esta es la diferencia:

• Constructor de temas: El Constructor de temas reemplaza tu tema actual de WordPress por uno personalizado. Elige entre muchos kits de sitios web, instala un diseño con un clic y luego personaliza cada parte visualmente.
• Constructor de páginas de destino: El Constructor de páginas de destino crea páginas independientes que funcionan junto con tu tema actual. Elige una plantilla adaptable y luego personalízala con el constructor de arrastrar y soltar.

Ambos te permiten añadir galerías de imágenes, así que elige el que mejor se adapte a tus necesidades. Si necesitas ayuda para empezar, aquí tienes tutoriales sobre cómo crear un tema personalizado de WordPress y cómo crear una página de destino con SeedProd.

Paso 3: Decide dónde añadir tu galería

Ahora decide dónde quieres que aparezca la galería de imágenes. Para esta guía, estoy creando una página de portafolio de diseño de interiores con el constructor de temas, así que editaré la página con SeedProd para abrir el constructor de arrastrar y soltar.

Cuando se abra tu diseño, verás bloques y secciones a la izquierda y una vista previa en vivo a la derecha. Puedes mover elementos haciendo clic, arrastrando y soltando.

Empieza añadiendo una nueva columna para las imágenes de tu portafolio. Desde la barra lateral, arrastra el bloque Columnas a tu página y elige una disposición.

A continuación, arrastra el bloque Imagen a cada columna.

Haz clic en cada bloque de imagen y sube una imagen de tu ordenador o de la biblioteca de medios.

Ahora añade la galería a cada imagen. Haz clic en un bloque de imagen, busca el encabezado Tipo de enlace y selecciona Medios – Galería en el menú desplegable.

Repite esto para cada imagen de tu galería y luego haz clic en el botón Guardar en la esquina superior derecha.

Paso 4: Publica tus cambios

El último paso es publicar tu galería. Para un tema personalizado, ve a SeedProd » Constructor de temas y cambia el interruptor “Habilitar tema SeedProd” a “Sí”.

Si vas a publicar una página de destino, ábrela en el constructor de páginas, haz clic en la flecha desplegable del botón Guardar y selecciona Publicar.

Ahora visualiza tu nuevo diseño para ver cómo queda.

Haz clic en cualquier imagen de tu galería y se abrirá en una galería adaptable a pantalla completa.

Método 3: Crea un Lightbox usando un Plugin de Galería

Para un mayor control sobre cómo se ve y se comporta tu galería, utiliza un plugin de galerías de WordPress. Yo usaré Envira Gallery, uno de los plugins de galerías más populares para WordPress y una herramienta que conozco bien del ecosistema de WordPress.

Herramienta	Plugin Envira Gallery
Precios	A partir de 39,50 $/año (normalmente 79 $)
Versión gratuita	Sí, Envira Gallery Lite
Características destacadas	Constructor de galerías de arrastrar y soltar, ajustes de galería integrados, plantillas adaptables para móviles
Mejor para	Usuarios que necesitan personalización avanzada de galerías

Con este plugin de galerías de imágenes ligero, puedes crear galerías optimizadas para publicaciones, páginas, áreas de widgets y barras laterales. También está optimizado para la velocidad, por lo que tus imágenes se cargan rápidamente para los visitantes.

Empieza instalando y activando el plugin Envira Gallery. Luego ve a Envira Gallery » Añadir nueva para crear una nueva galería.

Añade imágenes haciendo clic en Seleccionar archivos de tu ordenador. Para usar imágenes que ya están en tu biblioteca de medios, haz clic en Seleccionar archivos de otras fuentes.

Después de añadir imágenes, puedes reorganizarlas arrastrando y soltando las miniaturas. Luego haz clic en la pestaña Configuración para configurar tu galería.

En esta pantalla, puedes:

• Cambiar el número de columnas de la galería
• Habilitar la carga diferida de imágenes
• Mostrar la descripción de la galería
• Habilitar títulos y leyendas
• Establecer el tamaño de la imagen y la posición de recorte
• Cambiar el tema de la galería
• Ajusta los márgenes y el relleno

A continuación, haz clic en la pestaña Lightbox para configurar el propio lightbox.

Asegúrate de que la opción Habilitar Lightbox esté marcada. Desde allí, puedes cambiar el tema del lightbox, mostrar leyendas, añadir efectos de transición y más.

Cuando estés satisfecho con la configuración, haz clic en el botón Publicar en la esquina superior derecha.

Para mostrar la galería a los visitantes, edita una entrada o página, haz clic en el icono más (+) en el editor de bloques, busca el bloque Envira Gallery y añádelo.

Elige tu galería en el menú desplegable para previsualizarla.

Haz clic en Actualizar o Publicar para guardar tus cambios. Cuando previsualices la página, tu galería debería verse así:

Haz clic en cualquier imagen para verla en una galería lightbox adaptable como esta:

Extra: Añadir Envira Gallery a Páginas de SeedProd

Si estás creando páginas con SeedProd, puedes insertar tus lightboxes de Envira Gallery directamente en cualquier página o plantilla. Eso significa que no necesitas shortcodes ni pasos adicionales.

1. Abre tu página o plantilla de SeedProd en el editor de arrastrar y soltar.
2. Busca el bloque Envira Gallery en la barra lateral y arrástralo a tu página.
3. Elige tu galería en el menú desplegable y ajusta la configuración de visualización.

Esto combina el flexible constructor de páginas de SeedProd con las funciones de lightbox de Envira, para que puedas crear galerías de imágenes pulidas en cualquier página de tu sitio.

¿Por qué no funciona mi Lightbox?

Si haces clic en una imagen y el lightbox no se abre, la causa suele ser una de las siguientes. Realiza estas comprobaciones:

• Destino del enlace incorrecto: Cada imagen debe enlazar a su archivo multimedia, no a su página de adjunto. Un enlace a la página de adjunto envía a los visitantes a una página separada en lugar de abrir la ventana emergente.
• Conflicto de tema o plugin: Si tu tema u otro plugin de galería también añade un lightbox, los dos scripts pueden entrar en conflicto. Deshabilita uno y vuelve a probar.
• Caché: Un plugin de caché o una CDN pueden servir una versión antigua de la página. Borra tu caché y vuelve a cargar.
• Comportamiento en móvil: Prueba siempre el lightbox en un teléfono o tableta, ya que el comportamiento táctil puede diferir de los clics en escritorio.

Preguntas frecuentes sobre la creación de un lightbox en WordPress

¿Tiene WordPress un lightbox incorporado?

Sí. Desde WordPress 6.4, los bloques principales de Imagen y Galería incluyen un interruptor "Expandir al hacer clic" en el panel de Configuración. Actívalo y tus imágenes se abrirán en un lightbox nativo sin necesidad de plugins.

¿Cómo añado un lightbox a una galería de WordPress sin un plugin?

Añade un bloque de Galería principal a tu entrada o página y sube tus imágenes. Selecciona el bloque, abre el panel de Configuración y activa "Expandir al hacer clic". Guarda la página y al hacer clic en cualquier imagen se abrirá en un lightbox a pantalla completa.

¿Por qué no funciona mi lightbox de WordPress?

La causa más común es que la imagen enlaza a su página de adjunto en lugar de a su archivo multimedia. Configura cada imagen para que enlace al archivo multimedia. Un conflicto de tema o plugin, o una página antigua en caché, también puede detenerlo, así que deshabilita los scripts de lightbox en conflicto y borra tu caché.

¿Puedo usar un lightbox para vídeos además de para imágenes?

Sí. Muchas herramientas de lightbox abren vídeos de YouTube o Vimeo en una ventana emergente, igual que las imágenes. Es una buena forma de mostrar demostraciones de productos o tutoriales sin enviar a los visitantes fuera de tu sitio.

¿Cuál es el mejor plugin gratuito de lightbox para WordPress?

Las opciones gratuitas populares incluyen Envira Gallery Lite, Simple Lightbox y WP Featherlight. Son fáciles de usar y cubren la configuración básica de lightbox. Puedes actualizar a una versión de pago más adelante para obtener funciones avanzadas.

Añade tu Lightbox de WordPress Hoy

Esa fea página de adjunto es ahora una ventana emergente limpia que mantiene a los visitantes en tu contenido. Elige el método que se adapte a tu sitio, ya sea el interruptor gratuito incorporado, SeedProd o Envira, y tendrás un lightbox funcionando en minutos.

Aquí tienes otros tutoriales útiles que te pueden gustar:

• Cómo añadir una galería a entradas y páginas de WordPress
• Cómo crear pestañas en WordPress para contenido organizado en pestañas
• Cómo añadir un botón de Tweet a WordPress (3 formas)
• Cómo añadir un botón personalizado de "Añadir al carrito" en WooCommerce

¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.