¿Te sientes limitado por las opciones predeterminadas de la galería de WordPress? A menudo, las galerías estándar obligan a los usuarios a cargar una página completamente nueva solo para ver una versión más grande de una imagen, lo que puede interrumpir su experiencia de navegación.
Un efecto de lightbox resuelve esto mostrando tus imágenes en una superposición impresionante sin que los visitantes abandonen la página.
En WPBeginner, usamos Envira Gallery para nuestros proyectos porque ofrece la experiencia de lightbox más fluida y confiable.
En este artículo, te mostraremos cómo agregar fácilmente una galería en WordPress con un efecto de lightbox.
Aquí tienes un resumen rápido de lo que aprenderás en este tutorial.
¿Por qué agregar el efecto de lightbox en las galerías de WordPress?
Al agregar un efecto de lightbox receptivo a las galerías de tu sitio web de WordPress, puedes exhibir tus imágenes de manera más profesional. Este efecto te permite mostrar tus fotos en una ventana emergente en tu sitio web cuando un usuario hace clic en ellas.
Los lightboxes ayudan a crear una experiencia de visualización más inmersiva para tus visitantes e incluso les facilitan compartir tus imágenes en redes sociales o descargarlas en sus computadoras.
Si tienes un sitio web de fotografía, agregar un efecto de lightbox permitirá a los usuarios ver tus imágenes de alta resolución en un modo sin distracciones, aumentando la participación.
De manera similar, si tienes una tienda WooCommerce, agregar un efecto de lightbox a las galerías de tus productos puede ayudar a los clientes a ver el producto de cerca y tomar una decisión informada.
Dicho esto, veamos cómo agregar fácilmente una galería de imágenes de WordPress con un efecto de lightbox, paso a paso.
Cómo agregar una galería de WordPress con efecto de lightbox
La forma más fácil de agregar una galería con lightbox es usando Envira Gallery. Es el mejor plugin de galería de WordPress del mercado y el que usamos para nuestros propios proyectos.
Viene con un constructor de arrastrar y soltar, plantillas profesionales y funciones potentes como compartir en redes sociales, marcas de agua y, por supuesto, lightboxes. Para un desglose completo de sus características, puedes leer nuestra reseña completa de Envira Gallery.
Primero, necesitas instalar y activar el plugin Envira Gallery. Para obtener instrucciones detalladas, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Nota: Envira Gallery también tiene un plugin gratuito que puedes usar para este tutorial. Sin embargo, actualizar al plan de pago te dará acceso a más funciones.
Al activarlo, si estás usando la versión Pro, necesitas visitar la página Envira Gallery » Configuración para ingresar tu clave de licencia.
Puedes obtener esta información desde tu cuenta en el sitio web de Envira Gallery.
Después de eso, visita la página Envira Gallery » Add New desde el panel de WordPress para empezar a crear tu propia galería nueva.
Desde aquí, escribe un título para la galería de imágenes. Luego, haz clic en el botón ‘Select Files from Your Computer’ para subir imágenes. Si deseas agregar imágenes de la biblioteca de medios a tu galería, haz clic en el botón ‘Select Files from Other Sources’.
Esto iniciará la biblioteca de medios desde donde puedes subir imágenes de la galería. Recuerda que solo puedes subir una imagen de la biblioteca de medios a la vez.
Una vez que lo hayas hecho, cambia a la pestaña 'Lightbox' en la columna izquierda. La opción '¿Habilitar Lightbox?' debería estar marcada por defecto, pero asegúrate de verificarlo.
Aquí, verás una vista previa de tu galería a la derecha con la configuración en la columna izquierda.
Ahora, haz clic en el ícono del lápiz encima de cada imagen para abrir el cuadro de diálogo ‘Editar metadatos’ en la pantalla.
Desde aquí, puedes agregar la descripción, el estado, el título y el texto alternativo para imágenes individuales.
Después de eso, no olvides hacer clic en el botón ‘Guardar metadatos’ para almacenar tu configuración.
A continuación, cambia a la pestaña ‘Configuración’ desde la columna izquierda para cambiar el diseño de tu galería según tu gusto. Desde aquí, puedes seleccionar un diseño, número de columnas, tamaño de imagen, dimensiones, temas y más.
Para obtener instrucciones detalladas, consulta nuestra guía para principiantes sobre cómo crear una galería de imágenes en WordPress.
Una vez que hayas hecho eso, cambia a la pestaña ‘Lightbox’ desde la columna izquierda y marca la opción ‘¿Habilitar Lightbox?’.
Después de eso, selecciona un tema de lightbox del menú desplegable ‘Tema de Lightbox de Galería’. Si eliges la opción ‘Legado’, el cuadro de diálogo del efecto lightbox tendrá un diseño anterior.
Al elegir la opción ‘Base (Oscuro)’, el cuadro de diálogo del lightbox tendrá una base oscura como diseño.
A continuación, debes seleccionar si deseas mostrar el título de la imagen o su descripción en el cuadro de diálogo del lightbox. También puedes mostrar ambos o ninguno de ellos si lo deseas.
Una vez que hayas hecho eso, elige el tamaño de la imagen para el lightbox desde el menú desplegable.
Después de eso, marca la opción ‘Habilitar flechas de galería’. El aviso de lightbox ahora mostrará dos flechas que los espectadores pueden usar para cambiar a diferentes imágenes en tu galería.
También puedes configurar otras opciones, como efectos de transición y el redimensionamiento de imágenes. Envira también admite gestos de deslizamiento en dispositivos móviles, lo que proporciona una experiencia de usuario mucho mejor para los visitantes de teléfonos y tabletas.
Una vez que hayas terminado, no olvides hacer clic en el botón ‘Publicar’ en la parte superior para guardar tus cambios.
Para agregar tu galería de imágenes a una página/publicación de WordPress, abre la página en el editor de bloques.
Aquí, necesitas hacer clic en el botón ‘+’ para agregar un bloque en la esquina superior izquierda de la pantalla para abrir el menú de bloques. Luego, agrega el bloque Envira Gallery a la página/publicación.
Después de eso, selecciona la galería de imágenes que acabas de crear del menú desplegable en el propio bloque. Finalmente, haz clic en el botón ‘Actualizar’ o ‘Publicar’ para guardar tus ajustes.
Ahora, puedes visitar tu blog de WordPress para ver la galería de imágenes y luego hacer clic en cualquier imagen para ver el efecto lightbox.
Alternativa: Usa NextGen Gallery para crear portafolios y galerías de imágenes en WordPress
Envira Gallery es la mejor opción para agregar imágenes lightbox a tu sitio web de WordPress. Alternativamente, puedes usar NextGEN Gallery para crear galerías y portafolios completamente responsivos y visualmente atractivos en tu sitio de WordPress.
NextGEN Gallery es la mejor alternativa a Envira Gallery porque soporta una amplia gama de tipos de galerías, tiene funciones relacionadas con el comercio electrónico y te permite agregar marcas de agua, lightboxes, comentarios de imágenes y más.
Además, NextGEN Gallery te permite aceptar pagos en línea a través de Stripe o PayPal, lo que facilita vender tus imágenes en línea.
Es un plugin de galería avanzado con funciones para fotógrafos profesionales, diseñadores gráficos y artistas visuales, lo que lo convierte en uno de los mejores plugins de portafolio para WordPress del mercado.
Para obtener instrucciones detalladas, es posible que desees consultar nuestro tutorial sobre cómo agregar un portafolio a tu sitio de WordPress.
Preguntas frecuentes sobre galerías de lightbox en WordPress
Aquí tienes respuestas a algunas de las preguntas más comunes que recibimos sobre cómo agregar un efecto lightbox a las galerías de WordPress.
¿Qué es un efecto lightbox en WordPress?
Un efecto lightbox es una función que muestra tus imágenes en una superposición que llena la pantalla. El resto del contenido de la página se atenúa en segundo plano.
Esto permite a los visitantes ver medios en un tamaño más grande sin navegar a una nueva página, creando una experiencia de usuario más enfocada.
¿Cuál es el mejor plugin de galería lightbox para WordPress?
En nuestra experiencia, Envira Gallery es el mejor plugin de WordPress para crear galerías lightbox. Es increíblemente fácil de usar para principiantes, rápido y está repleto de funciones potentes.
Para fotógrafos profesionales que necesitan funciones más avanzadas de portafolio y pruebas, NextGEN Gallery es otra excelente alternativa.
¿Puedo agregar un lightbox a la galería predeterminada de WordPress sin un plugin?
Las versiones más recientes de WordPress incluyen una función básica de 'Expandir al hacer clic' para las imágenes. Sin embargo, es muy limitada en cuanto a funciones y personalización.
Para una apariencia profesional, necesitas un plugin dedicado como Envira Gallery. Agrega flechas de navegación, vistas previas en miniatura, botones para compartir en redes sociales y transiciones optimizadas para móviles que el bloque predeterminado de WordPress no tiene.
¿Una galería lightbox ralentizará mi sitio web?
Un plugin bien optimizado como Envira Gallery está diseñado para la velocidad y no debería ralentizar tu sitio web. Utiliza funciones de rendimiento como la carga diferida (lazy loading) para las imágenes.
Sin embargo, siempre debes optimizar tus imágenes para la web antes de subirlas a WordPress para asegurar los tiempos de carga más rápidos posibles.
Recursos adicionales
Ahora que has configurado tu galería de lightbox, es posible que desees aprender más sobre cómo administrar imágenes en WordPress. Aquí tienes algunos artículos que pueden ayudarte:
- Cómo optimizar imágenes para el rendimiento web sin perder calidad
- Guía de SEO de imágenes: Cómo optimizar imágenes para motores de búsqueda
- Cómo solucionar problemas comunes de imágenes en WordPress
- Los mejores temas de WordPress para fotógrafos
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Jiří Vaněk
Gracias por recomendar Envira Gallery. Creo sitios web en Elementor, y aparte de Elementor, solo conocía NextGen gallery, que no cumple completamente mis requisitos. Definitivamente le daré una oportunidad al plugin y probablemente reemplazaré NextGen Gallery que he estado usando con él.
Muhammad Danial Emran
Hola, quiero preguntar si usar un efecto de lightbox afectará la velocidad de mi sitio web.
Soporte de WPBeginner
No debería hacer que tu sitio se ralentice.
Administrador
Ahmed Omar
gracias por la publicación, pero aquí hay una pregunta, ¿haría alguna diferencia si usara el Editor de Bloques de WordPress para agregar una galería de fotos en lugar de usar Envira?
Soporte de WPBeginner
Envira has more tools and customization options than the default gallery
Administrador
E
¡Estoy tan contenta de haber encontrado este artículo y este sitio web. ¡Los amo chicos ahora mismo!
Lynsey
¡Te amo! ¿Hay alguna forma de hacer las miniaturas más pequeñas?
Personal editorial
Sí. Ve a Configuración > Medios. Edita el tamaño de la miniatura. Luego descarga un plugin llamado Regenerate thumbnails. Ejecuta ese plugin, y eso es todo.
http://wordpress.org/extend/plugins/regenerate-thumbnails/
Administrador
Sandeep Singh
Estoy muy agradecido por la sugerencia de agregar el efecto Lightbox a la galería. Aprecio mucho este tipo de apoyo y espero lo mismo para el futuro.
Mike
Hola,
Esto es genial, una pregunta: ¿hay algún plugin o algo que sirva para convertir la galería en una presentación de diapositivas? Por ejemplo, que la primera imagen adjunta se muestre grande y debajo estén las miniaturas de todas las imágenes de la galería, y puedas hacer clic en una imagen para cambiar la imagen grande en lugar de un efecto de lightbox.
Gracias,
Mike
Personal editorial
No estoy seguro de que exista un plugin así.
Administrador
Renee
Estoy bastante seguro de que el plugin Fancybox hace eso. Puedes habilitar o deshabilitar el lightbox y las miniaturas.
Emma Beatty Howells
Gracias por una gran solución. Soy nuevo en todo esto y estoy tratando de encontrar la forma más fácil de administrar fotogalerías en línea. ¡Esto lo mantiene simple y elegante! Algo más que encontré útil fue una aplicación que agrega marcas de agua a las fotos con el mínimo esfuerzo... 'ImageBucket'.
Tiaan
¡Gracias, funciona de maravilla!
Michael
Parece bastante fácil. ¿Hay alguna forma de tener subtítulos debajo de cada imagen? Además, cuando se abre en un lightbox, ¿hay alguna forma de tener texto descriptivo en el lightbox con la imagen?
Personal editorial
Este plugin debería poder hacer lo que buscas: http://wordpress.org/extend/plugins/gallery-and-caption/
Administrador
Alex
Tengo un banner en la parte superior de mi sitio web que muestra una imagen. Cuando se abre el lightbox, el banner todavía aparece sobre él. ¿Hay alguna forma, un código o algo, que detenga esto?
Gracias
Alex
Personal editorial
Probablemente esté sucediendo porque tu banner tiene un valor z-index muy alto. Disminuye ese valor en tu CSS. Hay muchos tutoriales de CSS que cubren z-index en la web.
Administrador
JulieBozza
¡Esta es una solución genial, ¡gracias! Mucho más rápido y ordenado que lo que estaba haciendo…
Sin embargo, ¿hay alguna manera de elegir cuál de las imágenes aparece como la miniatura principal? Es decir, la miniatura que aparece en el ‘feed’ antes de abrir la publicación individual.
¡Gracias de antemano!
wpbeginner
@JulieBozza La miniatura de la publicación se selecciona usando la función de Imagen Destacada. En tu editor de publicaciones, mira en el lado derecho, debajo del botón de publicar, debería haber un cuadro en esa línea llamado Imagen destacada.
JulieBozza
@wpbeginner ¡Hola! Gracias por la respuesta. Desafortunadamente, cuando hago eso, cambia la imagen del banner, pero no tiene ningún efecto en la miniatura de la publicación. Estoy usando el tema Twenty Eleven de WordPress, así que tal vez le esté dando prioridad a la imagen del banner, por así decirlo.
wpbeginner
@JulieBozza ¿Te refieres a estas miniaturas de galería, verdad?
JulieBozza
@wpbeginner ¡LOL! Sí. Creé la publicación de la galería exactamente como se describe arriba.
No sé si ayudaría visitar la publicación en sí, pero aquí está la URL. ¡Ten en cuenta que el sitio está en progreso!
http://rupertfyoung.com/2011/09/pierrefonds-september-2011/
wpbeginner
@JulieBozza La galería funciona como debería.
http://rupertfyoung.com/category/gallery/ << Si te refieres a la imagen en miniatura aquí, entonces eso está controlado por tu Imagen destacada o el primer adjunto, creo. Sube una imagen destacada que tenga poco ancho (tamaño de miniatura o algo así)... Y no se apoderará de la imagen del encabezado.
wpbeginner
@ukdazza El problema está en tu sitio en lugar de en este plugin. Los problemas de jQuery como estos son muy comunes. Hay otro jQuery que está haciendo que este plugin no funcione. Tendrías que cambiar las posiciones del otro código jQuery.
Este es un juego de prueba y error cuando te encuentras con problemas como estos.
ukdazza
Tengo un problema en el que estamos usando el plugin slickr flickr para crear galerías de miniaturas con funciones de lightbox. Sin embargo, el lightbox no funciona en absoluto. Según las notas que encuentro en línea sobre este tipo de problema con este plugin, es probable que haya más de un lightbox o más de un jQuery ejecutándose, lo que provoca que no funcione correctamente.
El lightbox no funciona. Si haces clic en una miniatura, la imagen se abre en el navegador, lo cual es una basura.
¿Alguna idea? Esperaba que tú o alguien tuviera una idea porque intenté instalar este plugin y decía que el destino ya estaba ocupado.
TGA
Vaya. Muchas gracias. Estaba usando NextGEN gallery, pero no se me permitía que mi cliente tuviera galerías con miniaturas de varios tamaños. (Estúpido). Así que me di cuenta de que usando la galería nativa sería posible, pero luego Highslide no crearía un visor de miniaturas como lo haría con NextGEN. El punto es que esto fue un salvavidas. ¡Puede que no sea perfecto, pero es UNA solución y ahora puedo seguir adelante con el proyecto!
wpbeginner
@TejSanusi✔ Este plugin tiene una forma para que los usuarios vean la siguiente imagen como parte del mismo lightbox.
TejSanusi✔
¿Hay alguna manera de crear una galería lightbox que se active desde una sola miniatura? Cuando el usuario hace clic en la miniatura, se crea el lightbox, con una serie de imágenes de la galería.
cata
Es bastante interesante el plugin mencionado en el artículo. También he probado con buenos resultados este http://wordpress.org/extend/plugins/lightbox-gallery/
Chris
Gracias por el excelente artículo. Me pareció extremadamente útil. Sin embargo, tengo una pregunta. ¿Qué pasaría si tuviera una galería bastante grande de unas 40 o 50 fotos y solo quisiera que se mostrara una de ellas en la publicación y luego, cuando alguien hiciera clic en ella, pudiera desplazarse por toda la galería? ¿Es esto posible? Preferiría no tener las 40 fotos mostradas en mi publicación y creo que esto sería útil.
¡Gracias!
Keith Davis
Bien hecho, muchachos.
Nunca supe que Wordpress tuviera una función de galería… ¿lo saben todo?
Quizás lo use algún día.
jonathan perrodin
Gracias por esto, he estado queriendo poner esto en mi sitio, pero era demasiado perezoso para buscar un plugin que lo hiciera de forma sencilla. Esto fue perfecto.
Mike Roberts
Soy artista e ilustrador y sigo decepcionado por las opciones para mostrar una galería de imágenes en WordPress. ¡Vivo con la esperanza de que, en algún momento, algún programador brillante responda a mi súplica!
Gretchen
No me di cuenta de lo difícil que era encontrar un plugin de lightbox que usara la función de galería nativa de WordPress hasta que empecé a buscar uno. Terminé con http://wordpress.org/extend/plugins/lightbox-plus/ debido a su capacidad para especificar mediante un shortcode en cada publicación/página de galería si debía usar la configuración de lightbox o no. De hecho, a veces me gusta usar las páginas de adjuntos y necesitaba un plugin de lightbox que me permitiera elegir cuándo usarlo. Me interesaría saber si alguien más ha encontrado otro plugin de lightbox con esa característica.
Bronson
Gracias por la información.
Es genial poder aplicar el efecto lightbox a las galerías nativas en lugar de tener que recrearlas manualmente.
Sonu
¿Cómo funciona esto? ¿Y necesitamos una clase de lightbox para cada imagen de la galería?
Personal editorial
No, no necesitas agregar la clase lightbox a cada imagen de la galería. Automáticamente lo hace para todas las imágenes de la galería. La clase debe agregarse a cualquier otra imagen que tengas aparte de la galería.
Administrador
Binoy
El problema aquí es que todas las imágenes en la publicación aparecen en la galería. ¿Hay opciones para seleccionar imágenes?
Personal editorial
No, eso aún no es posible.
Administrador
Leo
¡Hola! Para seleccionar las imágenes que se mostrarán en la galería, prueba este plugin: Múltiples Galerías, puedes encontrarlo aquí > http://goo.gl/kNFer
¡Adiós!
Personal editorial
Thanks for sharing this plugin. Updating the article to add this
Preston
Cada imagen debe tener algún tipo de número de WordPress asociado. Excluyo las imágenes de la galería con este código, espero que te funcione:
[gallery link="file" exclude="Photo#, Photo#, Photo#"]