Cómo agregar zoom de magnificación para imágenes en WordPress

¿Quieres agregar un zoom de aumento tipo Amazon para imágenes en WordPress? Un zoom de aumento es más que una característica elegante, es una herramienta útil que permite a tus visitantes ver pequeños detalles en las imágenes que normalmente no pueden ver. 

Recomendamos encarecidamente agregar una función de zoom para tiendas en línea, donde los clientes quieren ver la textura y la calidad de los artículos. También es útil para sitios web de fotografía, donde los espectadores quieren ver cada detalle de una imagen.

Al agregar un zoom de aumento a tus imágenes, puedes mejorar la experiencia del usuario, mantener a los usuarios interesados por más tiempo e incluso aumentar las ventas.

En este artículo, te mostraremos cómo agregar fácilmente un zoom de aumento para imágenes en WordPress.

¿Por qué agregar un zoom de aumento para imágenes?

Agregar una función de zoom de aumento en tu sitio web de WordPress permitirá a los visitantes ver claramente los detalles intrincados de las imágenes.

Si tienes un sitio web de fotografía, entonces agregar una función de aumento permitirá a los usuarios acercar tus fotografías para ver los detalles más finos.

De manera similar, si administras una tienda en línea, tus clientes podrán acercar las imágenes de los productos.

Muchos sitios web de comercio electrónico grandes ya utilizan el zoom de aumento para las imágenes de productos. Permite a los clientes examinar el producto y crea una mejor experiencia de compra en tu tienda.

Dicho esto, te mostraremos cómo agregar fácilmente un zoom de aumento para imágenes en WordPress utilizando tres métodos diferentes. Puedes usar los enlaces a continuación para saltar al método que prefieras.

• Método 1: Agrega un zoom de aumento para imágenes en WordPress con Envira Gallery (Recomendado)
• Método 2: Agrega un zoom de aumento para imágenes de WordPress con WP Image Zoom
• Method 3: Add a Magnifying Zoom for Images in WordPress with WPCode

Método 1: Cómo agregar un zoom de aumento para imágenes en WordPress con Envira Gallery (Recomendado)

Envira Gallery es el mejor plugin de galería para WordPress. Puedes usarlo para crear fácilmente hermosas galerías de imágenes para tu sitio web de WordPress. También viene con un complemento de zoom, que te permite agregar funcionalidad de zoom a las imágenes de tu galería.

Otras potentes funciones de Envira incluyen un constructor de arrastrar y soltar, temas de galería prefabricados, ventanas emergentes tipo lightbox, compresión de imágenes, protección de imágenes y más.

Para comenzar, necesitas instalar y activar el plugin Envira Gallery. Para más detalles, puedes seguir nuestro tutorial sobre cómo instalar un plugin de WordPress.

Al activarlo, debes ir a la página Envira Gallery » Configuración e ingresar tu clave de licencia. Puedes encontrar la clave de licencia en el área de tu cuenta de Envira Gallery.

Después de eso, haz clic en el botón ‘Verificar clave’.

A continuación, debes ir a Envira Gallery » Complementos. Desde aquí, desplázate hacia abajo para encontrar el Complemento de Zoom y haz clic en el botón ‘Instalar’.

Una vez que el Complemento de Zoom esté instalado, también debes activarlo alternando el interruptor.

El siguiente paso es agregar una nueva galería. Para hacerlo, ve a Envira Gallery » Agregar Nueva desde el panel de WordPress.

Desde aquí, puedes ingresar un nombre para tu galería y hacer clic en el botón ‘Seleccionar archivos de tu computadora’ para subir imágenes a tu galería.

También puedes hacer clic en el botón ‘Seleccionar archivos de otras fuentes’ para agregar imágenes de la biblioteca de medios de WordPress a tu galería.

Una vez que hayas subido imágenes a tu galería, puedes reorganizarlas arrastrando y soltando las miniaturas en su lugar.

También hay otras opciones para personalizar tu galería de imágenes. Por ejemplo, puedes seleccionar un diseño de galería, agregar títulos de imagen y texto alternativo, habilitar el lightbox de la galería, mostrar subtítulos de imagen, editar las dimensiones de la imagen y más.

Para más detalles, consulta nuestra guía sobre cómo crear galerías de imágenes responsivas con Envira.

Configurar ajustes de zoom de imagen

Para agregar un zoom de aumento a las imágenes de tu galería, haz clic en la pestaña ‘Zoom’. Luego, marca la casilla para habilitar la funcionalidad de zoom.

Una vez que la funcionalidad de zoom esté habilitada, aparecerán los ajustes para agregar zoom a tus imágenes.

Puedes configurar ajustes como zoom al pasar el mouse, efecto de zoom, tipo de zoom, posición de la ventana de zoom, tamaño de la ventana de zoom, color de tinte y más.

Cuando estés satisfecho con los ajustes de zoom, haz clic en el botón ‘Publicar’ para guardar tus cambios y hacer que esta galería esté disponible.

Incrustar tu galería de imágenes con zoom de aumento

Ahora que tu galería está lista, puedes agregarla directamente a cualquier página o publicación en WordPress.

Desde el editor de contenido de WordPress, simplemente haz clic en el botón ‘+’ para agregar el bloque Envira Gallery. Luego, haz clic en el menú desplegable dentro del bloque Envira Gallery para elegir qué galería mostrar.

A continuación, verás una vista previa de tu galería de imágenes en el editor de bloques de WordPress. Si estás satisfecho con cómo se ve, puedes publicar la entrada o página.

Ahora puedes visitar tu sitio web para ver la función de zoom de lupa en acción.

Envira Gallery es un excelente plugin para agregar funcionalidad de zoom a sitios web de fotografía. Pero, también funciona perfectamente para tiendas en línea.

Para obtener más información, consulta nuestra guía sobre cómo crear una galería de imágenes de productos de WooCommerce.

Método 2: Cómo agregar un zoom de lupa para imágenes en WordPress con WP Image Zoom

WP Image Zoom es un plugin gratuito de WordPress que te permite crear fácilmente una lupa en tus imágenes.

Primero, necesitas instalar y activar el plugin WP Image Zoom. Para más detalles, por favor consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Usaremos la versión gratuita en este tutorial, pero si desea más opciones de personalización, puede consultar WP Image Zoom Pro. Puede obtener más información sobre el plugin en nuestra reseña de WP Image Zoom.

Tras la activación, debe dirigirse a la página WP Image Zoom » Zoom Settings desde la barra lateral de administración de WordPress.

A continuación, debe configurar los ajustes del efecto de zoom cambiando a la pestaña ‘Zoom Settings’ y eligiendo la forma de lente que desea utilizar.

Puede elegir entre las formas de lente de círculo, cuadrado y ventana de zoom. Incluso puede elegir la opción ‘No Lens’ (⨯) si no desea utilizar una forma para el efecto de magnificación.

Después de elegir su lente preferida, debe desplazarse hacia abajo al siguiente paso, donde puede previsualizar una imagen con la lente seleccionada para ver cómo funciona. El plugin tiene una imagen de vista previa que puede usar para probar sus cambios.

A continuación, debe cambiar a la pestaña ‘General’.

Desde aquí, puede seleccionar un tipo de cursor, establecer un efecto de animación, habilitar el zoom al pasar el ratón por encima o al hacer clic, y definir un nivel de zoom.

Si deseas aún más opciones, algunas de las funciones solo están disponibles para la versión pro del plugin WP Image Zoom.

Después de hacer tus elecciones correspondientemente, simplemente ve a la pestaña ‘Lens’ desde la parte superior.

Ahora puedes configurar ajustes como el tamaño de la lente, el color de la lente, las opciones del borde de la lente y más si seleccionaste la lente ‘círculo’ o ‘cuadrado’ en el Paso 1.

Si seleccionaste la lente de ventana de zoom, entonces necesitas cambiar a la pestaña de configuración ‘Zoom Window’.

Desde aquí, puedes cambiar el ancho y la altura de la ventana de zoom, el posicionamiento, la distancia de la imagen principal, los colores del borde y más.

A continuación, simplemente necesitas hacer clic en ‘Guardar Cambios’ para almacenar tu configuración.

Después de eso, todo lo que tienes que hacer es configurar algunas opciones generales.

Configurar Opciones Generales del Plugin

A continuación, necesitas cambiar a la pestaña de Configuración General dentro de la configuración del plugin.

Desde aquí, ahora puedes habilitar funciones como el zoom en las imágenes de productos de WooCommerce, miniaturas, dispositivos móviles, páginas de adjuntos, páginas de categorías de productos y más.

Todo lo que necesitas hacer es simplemente marcar las casillas junto a estas opciones.

También puedes eliminar el efecto Lightbox, para que los usuarios puedan hacer zoom en las imágenes sin problemas.

Sin embargo, necesitarías la versión Pro del plugin para esta función.

Si no vas a eliminar el lightbox para las imágenes, entonces necesitas desplazarte hacia abajo hasta la opción ‘Habilitar dentro de un Lightbox’ y marcar la casilla junto a ella.

Nota: Puedes ver los lightboxes compatibles para asegurarte de que el zoom funcione bien dentro de un lightbox en tu sitio.

Una vez que hayas terminado de ajustar la configuración, no olvides hacer clic en el botón 'Guardar Cambios' para almacenar tu configuración.

El zoom de aumento ahora estará habilitado para los productos de WooCommerce.

Puedes visitar tu tienda en línea para comprobar nuestra función de zoom.

Sin embargo, si deseas habilitar el zoom para las imágenes en las publicaciones y páginas de WordPress, debes seguir el paso a continuación.

Habilitar zoom de aumento para imágenes en el editor de bloques

Por defecto, el zoom de aumento no está habilitado para las imágenes en tus publicaciones y páginas. Necesitas hacerlo manualmente después de agregar una imagen a tu contenido.

Primero, necesitas abrir una publicación que quieras editar en el editor de bloques.

A continuación, necesitas subir una imagen a esa publicación desde la biblioteca de medios o tu computadora.

Una vez que lo hagas, simplemente haz clic en la imagen para abrir su panel de Configuración de Bloque en la esquina derecha de la pantalla.

Desde aquí, simplemente ve a la pestaña 'Estilos' y haz clic en el botón 'Con Zoom' para aplicar el zoom de aumento a tu imagen.

Después de eso, simplemente haz clic en el botón 'Actualizar' o 'Publicar' en la parte superior para almacenar tu configuración.

La función de zoom se verá así en tu sitio:

Nota: Necesitarás repetir este paso cada vez que quieras agregar el efecto de zoom a una imagen individual.

Método 3: Cómo agregar un zoom de aumento para imágenes en WordPress con WPCode

También puedes agregar una función de zoom de aumento a tus imágenes en WordPress usando el plugin gratuito WPCode.

WPCode es el mejor plugin de fragmentos de código del mercado, que te permite agregar código personalizado de forma segura y fácil a tu sitio web. Viene con más de 393 fragmentos de código listos para usar que puedes agregar en solo unos clics, incluyendo una lupa para imágenes.

Para empezar, necesitas instalar y activar el plugin gratuito WPCode. Si necesitas ayuda, consulta nuestro tutorial sobre cómo instalar un plugin de WordPress.

Después de la activación, ve a Fragmentos de código » Biblioteca desde tu panel de WordPress.

Esto te llevará a la Biblioteca de Fragmentos, donde puedes ver todos los fragmentos diferentes que puedes agregar a tu sitio.

Desde aquí, simplemente busca el fragmento 'Lupa para imágenes' en la biblioteca.

Una vez que lo encuentres, pasa el mouse sobre él y haz clic en el botón 'Usar fragmento'.

WPCode agregará automáticamente el código por ti, además de seleccionar el método de inserción adecuado.

Ahora, todo lo que necesitas hacer es cambiar el interruptor de 'Inactivo' a 'Activo' y luego hacer clic en el botón 'Actualizar'.

¡Eso es todo! Cuando visites tu sitio web de WordPress, verás que todas tus imágenes tendrán una lupa que aparece al pasar el cursor sobre ellas.

Nota: Recomendamos usar imágenes de alta calidad para que la función de zoom se vea genial. Las imágenes de alta calidad suelen ser más grandes en tamaño de archivo y tardan más en cargarse, lo que afectará la velocidad y el rendimiento de tu sitio web.

Para resolver este problema, necesitas optimizar tus imágenes para la web antes de subirlas a WordPress.

Tutorial en video

Si no eres fanático de los tutoriales escritos, puedes ver nuestro tutorial en video en su lugar:

Suscríbete a WPBeginner

Esperamos que este artículo te haya ayudado a aprender cómo agregar zoom de lupa para imágenes en WordPress. También te puede interesar nuestra guía sobre cómo optimizar imágenes para motores de búsqueda y nuestras mejores selecciones de los mejores plugins de compresión de imágenes.

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.