Cómo hacer un Sitio Web o Blog en 2024 - Guía fácil y Gratuita para Crear un Sitio Web

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

¿Quiere agregar un zoom de ampliación similar al de Amazon para imágenes en WordPress?

Agregar una función de zoom permitirá a los usuarios ver detalles que no verían en una imagen de tamaño normal.

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

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

¿Por qué añadir un zoom de aumento a las imágenes?

Agregar una función de zoom a su sitio web de WordPress permitirá a los visitantes ver claramente los detalles intrincados de sus imágenes.

Si tiene un sitio web de fotografía, agregar una función de zoom permitirá a los usuarios acercar sus fotografías para ver los detalles más finos.

Asimismo, si tienes una tienda online, tus clientes podrán ampliar las imágenes de los productos.

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

Dicho esto, le mostraremos cómo agregar fácilmente un zoom para imágenes en WordPress usando dos métodos diferentes. Puede utilizar los enlaces siguientes para navegar hasta su método preferido.

Vídeotutorial

Regístrate en WPBeginner

Si prefieres instrucciones escritas, sigue leyendo.

Galería Envira es el mejor complemento de galería para WordPress. Puede usarlo para crear fácilmente hermosas galerías de imágenes para su sitio web de WordPress. También viene con un complemento Zoom, que le permite agregar funcionalidad de zoom a las imágenes de su galería.

Otras potentes funciones de Envira incluyen un generador de arrastrar y soltar, temas de galería prediseñados, ventanas emergentes de caja de luz, compresión de imágenes, protección de imágenes y más.

Para comenzar, necesita instalar y activar el archivo. Galería Envira conectar. Para obtener más detalles, puede seguir nuestro tutorial sobre cómo instalar un complemento de WordPress.

Después de la activación, debe ir al archivo. Galería Envira » Configuración página e introduzca la clave de licencia. Puede encontrar la clave de licencia en el área de su cuenta de Envira Gallery.

Agregue la clave de licencia de Envira Gallery

A continuación, haga clic en el botón «Verificar clave».

A continuación, debes ir a Galería Envira » Componentes adicionales. Desde aquí, desplácese hacia abajo para encontrar el complemento de Zoom y haga clic en el botón «Instalar».

🔥 Leer:  El mejor software de videoconferencia para PC con Windows o Mac
Instale el complemento Zoom para Envira Gallery

Una vez que el complemento Zoom esté instalado, también deberá activarlo alternando el interruptor.

Habilite el complemento Zoom

El siguiente paso es agregar una nueva galería. Para hacer esto, vaya a Galería Envira » Agregar nuevo desde su panel de WordPress.

Desde aquí puede ingresar un nombre para su galería y hacer clic en el botón «Seleccionar archivo de su computadora» para cargar imágenes a su galería.

Agregar una nueva galería

También puedes hacer clic en el botón «Seleccionar archivos de otras fuentes» para agregar imágenes de tu biblioteca multimedia de WordPress a tu galería.

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

Editar galería de imágenes en Envira

También hay otras opciones para personalizar tu galería de imágenes. Por ejemplo, puede seleccionar un diseño de galería, agregar títulos de imágenes y texto alternativo, habilitar la caja de luz de la galería, mostrar títulos de imágenes, cambiar las dimensiones de las imágenes y más.

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

Configurar los ajustes de zoom de la imagen

Para agregar un zoom de aumento a las imágenes de su galería, haga clic en la pestaña «Zoom». Luego, marque la casilla para habilitar la función de zoom.

Habilitar zoom en Envira

Una vez que la función de zoom esté habilitada, verá las configuraciones para agregar zoom a sus imágenes.

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

Configurar los ajustes de zoom

Cuando esté satisfecho con la configuración de zoom, haga clic en el botón «Publicar» para almacenar los cambios y hacer que esta galería esté disponible.

Publica tu galería de imágenes

Incrusta 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 haga clic en el botón “+” para agregar el bloque de la Galería Envira. Luego, haga clic en el menú desplegable dentro del bloque Galería Envira para elegir qué galería mostrar.

Agregue el bloque Galería Envira

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 el resultado, puedes publicar el post o la página.

Publique una galería de imágenes en su página o publicación de WordPress

Ahora puede visitar su sitio web para ver la función de zoom en acción.

Ejemplo de zoom de ampliación de la galería Envira

Envira Gallery es un excelente complemento para agregar funcionalidad de zoom a sitios web de fotografía. Pero también funciona perfectamente para tiendas online.

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

🔥 Leer:  Cómo las notificaciones atrevidas están revolucionando los anuncios

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

Primero necesitas instalar y activar el archivo. Zoom de imagen de WP conectar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Usaremos la versión gratuita en este tutorial, pero si deseas más opciones de personalización, quizás quieras consultar WP Image Zoom Pro.

Después de la activación, debe ir a Zoom de imagen de WP » Configuración de zoom página desde la barra lateral de administración de WordPress.

A continuación, debe configurar los ajustes del efecto de zoom yendo a la pestaña «Configuración de zoom» y eligiendo la forma de lente que desea utilizar.

Elige una forma de lente

Puede elegir entre formas de lente de ventana circular, cuadrada y con zoom. También puedes elegir la opción «Sin lente» (⨯) si no deseas utilizar una forma para el efecto de lupa.

Una vez que haya elegido su lente preferida, debe desplazarse al siguiente paso donde puede obtener una vista previa de una imagen con la lente seleccionada para ver cómo funciona. El complemento tiene una imagen de vista previa que puede utilizar para probar sus cambios.

Vea la vista previa de la lente en el paso dos

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 cursor o hacer clic con el mouse y definir un nivel de zoom.

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

Configure los ajustes de la pestaña General en el paso 3

Después de tomar las decisiones correspondientes, simplemente vaya a la pestaña «Objetivo» de arriba.

Ahora puede configurar ajustes como el tamaño y el color de la lente, las opciones de borde de la lente y más si seleccionó la lente «circular» o «cuadrada» en el Paso 1.

Configuración de lentes

Si ha seleccionado la lente de la ventana Zoom, debe cambiar a la pestaña de configuración «Ventana Zoom».

Desde aquí puede cambiar el ancho y alto de la ventana de zoom, la posición, la distancia desde la imagen principal, los colores del borde y más.

Configuración de la ventana de zoom

Después de eso, simplemente necesita hacer clic en «Guardar cambios» para almacenar su configuración.

A continuación, todo lo que necesitas hacer es configurar algunos ajustes generales.

Haga clic en Guardar cambios para el último paso.

Configurar los ajustes generales del complemento

A continuación, debe cambiar a la pestaña Configuración general en la configuración del complemento.

Desde aquí, ahora puede habilitar funciones como hacer zoom en imágenes de productos de WooCommerce, miniaturas, páginas móviles, páginas adjuntas, páginas de categorías de productos y más.

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

🔥 Leer:  Cómo desarchivar una lista en Trello
Vaya a la pestaña Configuración general y marque las casillas junto a las opciones que desea habilitar

También puede eliminar el efecto de caja de luz, para que los usuarios puedan ampliar las imágenes fácilmente.

Sin embargo, para esta funcionalidad necesitarás la versión Pro del complemento.

Elimine la opción de caja de luz marcando la casilla

Si no tiene intención de eliminar la caja de luz de las imágenes, debe desplazarse hacia abajo hasta la opción «Habilitar dentro de una caja de luz» y marcar la casilla junto a ella.

Nota: Puede ver las cajas de luz admitidas para asegurarse de que el zoom funcione correctamente dentro de una caja de luz en su sitio.

Seleccione la opción habilitar dentro de la caja de luz.

Una vez que haya terminado de ajustar su configuración, no olvide hacer clic en el botón «Guardar cambios» para almacenar su configuración.

El zoom de ampliación ahora estará habilitado para los productos WooCommerce.

Puede visitar su tienda en línea para ver nuestra función de zoom.

Funcionalidad de zoom habilitada en la tienda WooCommerce

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

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

De forma predeterminada, el zoom de ampliación no está habilitado para las imágenes de sus publicaciones y páginas. Tienes que hacer esto manualmente después de agregar una imagen a tu contenido.

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

A continuación, debe cargar una imagen en esa publicación desde su biblioteca multimedia o su computadora.

Una vez hecho esto, simplemente haga clic en la imagen para abrir el panel de Configuración de bloque en la esquina derecha de la pantalla.

Desde aquí, simplemente vaya a la pestaña «Estilos» y haga clic en el botón «Con zoom» para aplicar el zoom de aumento a su imagen.

Haga clic en el botón Zoom

A continuación, simplemente haga clic en el botón «Actualizar» o «Publicar» en la parte superior para almacenar su configuración.

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

Vista previa de la función de zoom

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

Recomendamos utilizar imágenes de alta calidad para que la función de zoom se vea bien. Las imágenes de alta calidad normalmente tienen tamaños de archivo más grandes y tardan más en cargarse, lo que afectará la velocidad y el rendimiento de su sitio web.

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

Esperamos que este artículo le haya ayudado a aprender cómo agregar zoom de ampliación para imágenes en WordPress. Es posible que también desee consultar nuestra guía sobre cómo optimizar imágenes para motores de búsqueda y nuestras mejores opciones para los mejores complementos de compresión de imágenes.