Todavía recuerdo haber creado uno de mis primeros sitios de portafolio y haber pasado horas ajustando las fotos. Un amigo señaló que no podían hacer clic para ver los detalles de mi trabajo, y me di cuenta de que me había saltado un paso importante que estaba perjudicando la experiencia del usuario.
Es un pequeño detalle que marca una gran diferencia en lo profesional que se siente un sitio. Cuando los visitantes no pueden hacer zoom en las fotos de productos o en las piezas del portafolio, se crea una experiencia frustrante.
Ahora que he configurado esta función en varios sitios web, he descubierto que hacer que las imágenes se amplíen al hacer clic es una de las formas más rápidas de mejorar la participación de los visitantes. Es una solución simple que agrega un toque pulido y de alta calidad a cualquier sitio.
En esta guía, te mostraré tres métodos sencillos para hacer que tus imágenes sean clicables. Cubriremos todo, desde la simple función predeterminada hasta complementos de galería más avanzados, sin necesidad de codificación.
¿Por qué ampliar imágenes al hacer clic en WordPress?
Permitir que los visitantes hagan clic para ampliar imágenes en tu sitio web de WordPress les ayuda a ver detalles importantes de cerca.
Es una mejora simple que agrega un toque profesional y pulido, especialmente para portafolios, listados inmobiliarios y galerías de fotografía.
Además, puede ser útil para tiendas en línea donde los clientes quieren ver de cerca tus productos antes de decidir comprarlos.
WordPress incluye una función básica de "Ampliar al hacer clic" por defecto. Abre la imagen directamente en la página, sin atenuación de fondo ni efecto visual.
Esto funciona bien para blogs simples o páginas internas, pero se ve un poco simple y no ofrece mucho control.
Si quieres algo que se vea más moderno y pulido, entonces un plugin de lightbox de imágenes es una mejor opción.
En lugar de simplemente expandir la imagen, se abre en una superposición elegante que atenúa el fondo y mantiene al espectador enfocado. También obtienes más control sobre cómo se ve y funciona la imagen.
Antes de mostrarte estos diferentes métodos, hay una cosa más a tener en cuenta: la calidad de la imagen. Cuando alguien hace clic para ampliar una foto, espera una versión clara y de alta resolución. Pero los archivos de imagen grandes pueden ralentizar tu sitio.
Ahí es donde entra la optimización de imágenes. Al comprimir tus imágenes sin bajar su calidad visible, puedes mantener los tamaños de archivo pequeños y tu sitio rápido.
Esto significa que puedes usar imágenes con dimensiones grandes (como 1500px de ancho) que se ven geniales al ampliarse, sin afectar el rendimiento.
Para obtener ayuda con eso, consulta nuestra guía sobre cómo optimizar imágenes para la web.
En este artículo, compartiré 3 métodos diferentes que pueden ampliar tus imágenes de WordPress cuando se hace clic en ellas, incluyendo algunas opciones de lightbox.
Puedes usar los enlaces rápidos a continuación para saltar al método que deseas usar:
- Método 1: Usar la función predeterminada de WordPress (Simple)
- Método 2: Usar un plugin de Lightbox (Más personalización)
- Método 3: Usar un plugin de galería (Mejor para múltiples imágenes)
- Preguntas frecuentes sobre cómo ampliar imágenes en WordPress
- Recursos adicionales: Administra y mejora tus imágenes de WordPress
Método 1: Usar la función predeterminada de WordPress (Simple)
Después de probar diferentes formas de ampliar imágenes, he descubierto que la función integrada de WordPress es perfecta para necesidades sencillas.
He utilizado este método al crear documentación o escribir artículos técnicos. Es especialmente útil cuando necesitas que los lectores vean pequeños detalles en capturas de pantalla o examinen partes específicas de una imagen más de cerca.
La principal desventaja es que no es un verdadero lightbox. Simplemente amplía la imagen, y no puedes personalizar la apariencia ni agregar efectos geniales.
Paso 1: Agrega tu imagen en el editor de WordPress
Primero, necesitas crear o abrir la publicación donde deseas agregar la imagen en la que se puede hacer clic.
Luego, en el editor de bloques, haz clic en el ícono (+) para agregar un nuevo bloque y elige ‘Imagen’ de las opciones de bloque. Una vez que lo hagas, verás botones para agregar una imagen de 3 maneras diferentes: Subir, Biblioteca de medios o Insertar desde URL.
En WPBeginner, siempre usamos la opción ‘Biblioteca de medios’. Esto asegura que el título y el texto alternativo que agregamos a la imagen estén disponibles si la reutilizamos en otros artículos.
Sugiero evitar ‘Insertar desde URL’. Esto enlaza directamente (<a href="https://014.leahstevensyj.workers.dev/glossary/hotlinking/" title="Hotlinking">hotlinks</a>) a una imagen en otro sitio web, lo que significa que la imagen podría desaparecer de tu sitio si la original se elimina alguna vez.
Paso 2: Configurar la opción ‘Ampliar al hacer clic’
Después de agregar tu imagen a la publicación o página, puedes hacer clic en ella para revelar la configuración de la imagen.
Con la imagen seleccionada, haz clic en el ícono ‘Insertar enlace’ en la barra de herramientas del bloque. En la configuración que aparece, simplemente activa la opción etiquetada como ‘Ampliar al hacer clic’.
Paso 3: Configurar los ajustes de la imagen
Ahora que has habilitado la función de hacer clic para ampliar, es posible que desees personalizar la configuración de la imagen original para garantizar la mejor calidad de visualización dentro de tu publicación o página.
Selecciona tu imagen y luego revisa el panel de configuración del bloque en el lado derecho de tu pantalla.
Puedes controlar cómo se ve la imagen en la página ajustando las dimensiones de la imagen. Sin embargo, este es solo el tamaño de visualización.
Cuando un visitante hace clic en la imagen, verá la imagen original de alta resolución que subiste a tu Biblioteca de medios. Por lo tanto, asegúrate de subir una imagen de alta calidad de al menos 1500 píxeles de ancho. ¡Solo recuerda optimizarla primero, como discutimos anteriormente, para mantener tu página cargando rápido! 😉
Paso 4: Previsualiza tu imagen y publica tu contenido
Antes de publicar tu publicación o página con la opción de imagen ‘ampliar al hacer clic’ habilitada, querrás previsualizarla para asegurarte de que funcione.
Para hacer esto, haz clic en el botón Ver en la esquina superior derecha de tu editor y selecciona ‘Vista previa en una nueva pestaña’.
Te recomiendo que la pruebes en todas las opciones de vista, especialmente ‘Móvil’, ya que muchas personas usan teléfonos inteligentes hoy en día.
Con el efecto de imagen ‘ampliar al hacer clic’ aplicado, debería expandirse en la misma página, como se ve en el ejemplo a continuación. Cuánto se expande depende del tamaño de la imagen original que subiste.
Simplemente haz clic en la imagen para devolverla a su tamaño normal.
Si bien esta función integrada es rápida y fácil, carece de la elegante superposición que utilizan muchos sitios profesionales. Si buscas ese efecto pulido de 'lightbox' que atenúa el fondo y ayuda a que tus imágenes destaquen, nuestro próximo método es para ti.
Método 2: Usar un plugin de Lightbox (Más personalización)
A diferencia de la función básica de WordPress, un plugin de lightbox crea una experiencia mucho más profesional. Cuando un usuario hace clic en una imagen, esta se abre en una superposición elegante que atenúa el resto de la página, haciendo que tu imagen resalte.
Recomiendo el plugin gratuito Simple Lightbox porque te permite agregar animaciones fluidas, temas personalizables y funciones de presentación de diapositivas que hacen que tus imágenes destaquen. Es ligero y funciona automáticamente con todas tus imágenes una vez activado.
Paso 1: Instala y activa el plugin Simple Lightbox
Para empezar, necesitas instalar y activar el plugin Simple Lightbox.
Si necesitas ayuda con este proceso, por favor lee nuestra guía sobre cómo instalar plugins de WordPress.
Paso 2: Configura los ajustes de Simple Lightbox
Después de activar el plugin, es una buena idea ir a Apariencia » Lightbox y revisar sus ajustes para asegurarte de que todo esté configurado como deseas.
Aquí encontrarás los ajustes de Lightbox que te permiten ajustar dónde quieres habilitar la funcionalidad de lightbox. Esto puede ser en la página de inicio, publicaciones individuales, páginas y más.
Normalmente me quedo con los ajustes predeterminados, ya que funcionan muy bien para la mayoría de los sitios web.
A continuación, desplázate hacia abajo hasta los ajustes de 'UI'. Estos controlan cómo se ve y se siente el lightbox.
Por defecto, el plugin usará un tema claro, pero puedes cambiar a modo oscuro si lo prefieres. También puedes ajustar la 'Opacidad de superposición', que controla cuánto se atenúa la página de fondo cuando se abre una imagen, y habilitar animaciones para cambiar cómo se abre la imagen.
Siéntete libre de jugar con estas configuraciones y no olvides hacer clic en 'Guardar cambios' cuando hayas terminado.
Paso 3: Agrega tu imagen y habilita la Lightbox
Ahora, probemos la función de lightbox. Simplemente crea o abre una publicación y agrega una imagen.
Una vez que tu imagen esté en el editor, puedes agregar una leyenda escribiendo directamente en el campo 'Agregar leyenda' que aparece justo debajo de la imagen.
Si no agregas un pie de foto, el plugin usará automáticamente el título de la imagen de la Biblioteca de Medios en su lugar. Sin embargo, encuentro que usar el campo de pie de foto te da un control más directo.
A continuación, con la imagen aún seleccionada, debes hacer clic en el ícono ‘Enlace’ en la barra de herramientas y seleccionar la opción ‘Enlace al archivo de imagen’. Este es un paso clave que permite que el plugin Simple Lightbox funcione.
Una vez que hagas esto, el plugin detectará automáticamente el enlace y aplicará su efecto de lightbox cuando un visitante haga clic en la imagen.
💡 Nota: También puedes usar Simple Lightbox para toda una galería de imágenes. Simplemente crea una galería de imágenes usando el editor de bloques y luego sigue los pasos descritos en este método para agregar la función de lightbox a cada imagen.
Paso 4: Prueba tu Lightbox
Ahora, probemos la función de lightbox previsualizando la publicación. Simplemente haz clic en la opción Ver en la esquina superior derecha y luego selecciona ‘Vista previa en una nueva pestaña’.
Una vez que se abra la nueva pestaña, haz clic en la imagen. Deberías verla abrirse sin problemas en una superposición de lightbox con un fondo oscurecido.
Dependiendo de la configuración de tu diseño, verás el lightbox en un tema claro u oscuro. Así es como se ve el tema claro.
El tema claro rodea la foto con un marco blanco, lo que crea un buen contraste con el fondo oscurecido.
Ahora, así es como se ve el tema oscuro.
También deberías ver el pie de foto de tu imagen en la esquina inferior izquierda del lightbox.
También recomiendo previsualizar tu lightbox en otros tamaños de pantalla para asegurarte de que se vea bien en todos los dispositivos.
Puedes hacer esto volviendo a la opción Ver y seleccionando la opción ‘Escritorio’, ‘Tableta’ o ‘Móvil’. Después de eso, haz clic en ‘Previsualizar en una nueva pestaña’.
Método 3: Usar un plugin de galería (Mejor para múltiples imágenes)
Si alguna vez has querido destacar varias imágenes, los plugins de galería son, sin duda, la mejor solución. Ayudan a organizar y mostrar una serie de imágenes con funcionalidad de ampliación de imágenes sin ralentizar tu sitio.
Estos plugins pueden mejorar la interacción del usuario al hacer que tu contenido sea más atractivo y visualmente agradable, brindando a los visitantes una experiencia fluida al navegar por tus imágenes.
Recomiendo Envira Gallery porque te permite crear galerías hermosas y personalizables que se ven geniales en cualquier dispositivo. También es muy fácil de usar para principiantes.
Además, incluye funciones de rendimiento como la carga diferida (lazy loading) para asegurarte de que tus galerías no ralenticen tu sitio. Y su herramienta de IA puede ayudarte a crear imágenes personalizadas directamente en WordPress.
Lo más importante es que el plugin ofrece una configuración de lightbox con muchas opciones de personalización. De esta manera, puedes obtener todos los beneficios de la función de imagen que se amplía al hacer clic, además de algunas configuraciones geniales para diseños, transiciones de galería y mucho más.
¿Quieres aprender más sobre lo que el plugin puede hacer? Lo hemos probado exhaustivamente en el pasado, y puedes consultar nuestra reseña completa de Envira Gallery para obtener más información.
📝 Nota: Si bien existe una versión gratuita de Envira Gallery, recomiendo la versión Pro para funciones avanzadas como el lightbox SuperSize, Envira AI y herramientas para compartir en redes sociales. ¡La versión gratuita incluye toda la funcionalidad esencial de lightbox que necesitarás para empezar!
Ahora, repasemos los pasos para usar Envira Gallery y agregar una función de lightbox.
Paso 1: Instalar y Activar el Plugin Envira Gallery
Empecemos instalando el plugin en tu sitio. En este tutorial, usaré la versión gratuita, o puedes comprar una licencia Pro en el sitio web de Envira Gallery.
A continuación, instálalo y actívalo siguiendo nuestra guía sobre cómo instalar un plugin de WordPress. Una vez que hayas activado el plugin, el asistente de configuración de Envira debería iniciarse de inmediato.
Desde aquí, haz clic en el botón ‘Empezar’ para iniciar el proceso.
Hay 5 pasos en este asistente.
Durante la configuración, puedes elegir la categoría que describe tu negocio o sitio web (como fotógrafo o propietario de negocio) y seleccionar las funciones de galería que deseas agregar.
Recomiendo continuar con la configuración predeterminada sugerida porque generalmente ofrecen todo lo que necesitas. Sin embargo, si tienes un plan Pro, podrás activar funciones más avanzadas.
Ten en cuenta que la opción ‘Cajas de luz’ (Lightboxes) ya debería estar marcada, por lo que esta función se habilitará automáticamente.
Una vez que hayas terminado el asistente de configuración, aún necesitarás activar tu licencia pro si compraste una. Para hacerlo, ve a Envira Gallery » Ajustes y pega tu clave de licencia en el campo. Luego, presiona ‘Verificar clave’.
Paso 2: Crear una Nueva Galería
Para crear tu primera galería, ve a Envira Gallery » Añadir Nueva en tu panel de control.
Primero, agrega un título en la parte superior de la página. Recomiendo darle un nombre claro y descriptivo para que sea más fácil de rastrear más adelante.
A continuación, notarás 3 opciones para agregar imágenes: Galería Nativa de Envira, Galerías de Otras Fuentes y Crear con Envira AI.
Recomiendo empezar con Galería Nativa de Envira. Es la forma más sencilla de subir tus propias imágenes directamente.
💡 ¿Necesitas imágenes originales rápido? También puedes crear tus propias imágenes personalizadas con Envira AI. Esta función facilita la generación de imágenes únicas bajo demanda. Todo lo que tienes que hacer es crear una descripción rápida de la imagen, elegir entre los resultados y agregarla a tu galería con un solo clic.
Selecciona las imágenes que deseas incluir. Puedes agregar tantas como quieras, manteniendo el tamaño máximo de archivo de carga por debajo de 256 MB.
Paso 3: Configurar las opciones de galería y lightbox
En el menú a la izquierda de las imágenes de tu galería, encontrarás la configuración de Galería de Envira.
Hay pestañas para la configuración general, la función de lightbox, la configuración móvil y más. Vamos a revisarlas una por una.
Puedes elegir el diseño de tu galería en la parte superior de la sección 'Configuración'. El diseño de cuadrícula funciona muy bien para la mayoría de las galerías, pero siéntete libre de experimentar con otras opciones.
Desplazándote hacia abajo, puedes encontrar más opciones de configuración de galería.
Por ejemplo, puedes habilitar la carga diferida, establecer un diseño automático y agregar una descripción de la galería.
Por ejemplo, podrías querer configurar diseños automáticos para asegurar que tu galería se vea ordenada y organizada sin esfuerzo adicional.
💡 Pro Tip: Recomiendo habilitar la opción de carga diferida. Esta función ayuda a que tu galería cargue más rápido al cargar las imágenes solo cuando los visitantes se desplazan por la página. También ayuda a optimizar la velocidad de tu sitio.
A continuación, cambia a la pestaña 'Lightbox'. Recuerda que esta función debería estar habilitada por defecto, pero si no lo está, marca la casilla junto a '¿Habilitar Lightbox?'.
Luego, querrás seleccionar un 'Tema de Lightbox de Galería'. Esto determinará la apariencia general de tu lightbox.
Tus opciones dependerán de tu plan de Envira y de si tienes el complemento Gallery Themes. Pero deberías poder seleccionar entre un tema oscuro, claro o heredado.
Más abajo en la pestaña 'Lightbox', puedes elegir cómo aparecen tus imágenes ampliadas, seleccionar efectos de transición y decidir si mostrar los títulos de las imágenes.
Luego, puedes encontrar más configuraciones de lightbox en la segunda mitad de la página.
Por ejemplo, puedes habilitar flechas de navegación, bucle infinito de imágenes o modo supersize. Incluso puedes agregar efectos geniales para cuando las personas abran o cierren tu galería, y cuando hagan clic en ella.
Por ejemplo, para ‘Efecto de transición de Lightbox’, puedes elegir opciones divertidas como Fundido, Deslizamiento, Circular, Tubo, Rotar y más.
A continuación, te recomiendo ir a la pestaña ‘Móvil’ para configurar tanto los ajustes generales como los de lightbox.
Dado que es probable que muchos de tus visitantes vean tu galería en sus teléfonos, es importante asegurarte de que se vea bien en pantallas pequeñas.
Además de activar la función de lightbox para dispositivos móviles, puedes personalizar configuraciones específicas para móviles como las dimensiones del lightbox, la altura de las filas y la visualización de títulos o subtítulos.
A medida que te desplazas hacia abajo, descubrirás más opciones, incluyendo funciones como deslizar hacia arriba para cerrar, flechas de navegación de la galería, miniaturas y más.
Finalmente, las pestañas 'Standalone' y 'Misc' tienen algunas configuraciones adicionales que podrías encontrar útiles.
La pestaña 'Standalone' te permite darle a tu galería su propia URL única. Esta es una gran función si quieres compartir un enlace directo a un portafolio o álbum de fotos específico.
La pestaña 'Misc' incluye herramientas para importar y exportar galerías, pero probablemente no las necesitarás en este momento.
Para una inmersión más profunda en todas estas configuraciones, puedes consultar nuestra guía detallada sobre cómo crear una galería de imágenes.
Paso 4: Previsualiza y Publica Tu Galería
Para previsualizar la galería, haz clic en el botón 'Vista previa' en el lado derecho de la página de configuración de tu galería.
Una vez que estés en la página de vista previa, haz clic en diferentes imágenes para probar el efecto lightbox.
Aquí, puedes ver el nombre de la imagen y el resto de la galería.
Cuando pruebes la galería, las imágenes deberían abrirse sin problemas. Si elegiste un efecto de transición, debería ser visible aquí.
Por ejemplo, establecí el efecto de transición 'Slide' (Deslizamiento), y así es como se ve.
Para navegar entre imágenes, haz clic en las flechas de navegación a cada lado de la pantalla o usa las teclas de flecha de tu teclado.
En este punto, es posible que quieras asegurarte de que las flechas de navegación funcionen y que los títulos de tus imágenes aparezcan correctamente si los habilitaste.
Una vez que estés satisfecho con cómo funciona todo, puedes publicar la galería haciendo clic en el botón ‘Publicar’ en el lado derecho de la configuración de tu galería.
Después de publicar la galería, puedes pasar a agregarla a tu sitio web.
Paso 5: Agrega la Galería a tu Sitio Web
Ahora que tu galería funciona a la perfección, vamos a agregarla a una publicación.
Una vez que estés en el editor de WordPress, haz clic en el ícono (+) para agregar un nuevo bloque y busca ‘Envira Gallery’. Luego, arrastra el bloque a tu publicación.
A continuación, cuando hagas clic en el menú desplegable ‘Buscar una galería’, selecciona la galería que acabas de crear. Se insertará automáticamente en la publicación con todas las configuraciones que acabas de configurar.
Alternativamente, puedes agregar tu galería a páginas, widgets o tipos de publicaciones personalizadas usando un shortcode.
Puedes encontrar este shortcode en la barra lateral derecha de la configuración de la galería, justo debajo del botón ‘Publicar’.
Para más información, consulta nuestra guía sobre cómo agregar un shortcode en WordPress.
Antes de hacer clic en el botón ‘Publicar’, asegúrate de previsualizar tu publicación una última vez para verificar que la galería aparezca exactamente como deseas.
Tus imágenes ahora deberían mostrarse en un diseño de cuadrícula profesional con un efecto de lightbox suave al hacer clic.
Preguntas frecuentes sobre cómo ampliar imágenes en WordPress
Aquí tienes algunas preguntas frecuentes sobre cómo agrandar imágenes en WordPress.
¿Cómo agrando imágenes en WordPress?
Puedes usar la función predeterminada ‘Agrandar al hacer clic’ en WordPress para una funcionalidad básica. Para un mayor control, puedes usar plugins como Simple Lightbox o Envira Gallery.
¿Cómo redimensiono automáticamente las imágenes en WordPress?
WordPress crea automáticamente varias versiones más pequeñas de tus imágenes cuando las subes. Para tener más control sobre las dimensiones de las imágenes u optimizarlas para la velocidad, te recomiendo usar un plugin de optimización de imágenes como EWWW Image Optimizer.
Plugins como Envira Gallery también te dan un control preciso sobre las dimensiones de visualización de las imágenes dentro de tus galerías.
¿Cómo fuerzo el tamaño de las imágenes en WordPress?
Puedes establecer dimensiones de imagen personalizadas dentro de tu tema. Para una guía detallada, consulta nuestro tutorial sobre cómo crear tamaños de imagen adicionales en WordPress. Esta es una excelente manera de asegurar un diseño consistente en tus galerías y sitio.
Si prefieres usar un plugin, considera opciones como Envira Gallery. Te permite especificar dimensiones exactas de imagen de manera eficiente, brindando control sobre cómo se ven tus galerías. Esto puede ayudar a mantener una apariencia pulida en todo tu sitio.
Recursos adicionales: Administra y mejora tus imágenes de WordPress
Espero que este artículo te haya ayudado a agregar la función de 'ampliar imágenes al hacer clic' en WordPress. Aquí tienes algunas guías adicionales si estás interesado en administrar y mejorar tus imágenes de WordPress:
- Cómo optimizar imágenes para el rendimiento web sin perder calidad
- Cómo agregar múltiples galerías en publicaciones y páginas de WordPress
- Los mejores plugins de compresión de imágenes para WordPress comparados
- Cómo agregar una imagen principal en WordPress (funciona para todos los temas)
- Cómo crear tamaños de imagen adicionales en WordPress
- Cómo solucionar problemas comunes de imágenes en WordPress (Guía definitiva)
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.
¿Tienes alguna pregunta o sugerencia? Por favor, deja un comentario para iniciar la discusión.