Saltar al contenido

Cómo crear un efecto de zoom de imagen de WordPress

Cómo crear un efecto de zoom de imagen de WordPress

Probablemente haya visto sitios web con la lupa o zoom en imágenes en la web, por ejemplo, en páginas de productos de Amazon, y es posible que se haya preguntado cómo agregar esa característica genial a su sitio de WordPress. Si ese es el caso, tenemos buenas noticias para ti. Es bastante fácil crear un efecto de zoom de imagen de WordPress si lo hace con la ayuda de un plugin de WordPress.

Agregar este tipo de función a su sitio web puede ser extremadamente conveniente para sus visitantes, ya que podrán inspeccionar sus productos con todo detalle. Esto les permite notar ciertos aspectos que de otro modo no podrían ver si solo usara imágenes de tamaño normal para exhibir sus productos. Sin embargo, no se trata solo de imágenes de productos. Por ejemplo, es posible que desee que sus visitantes también puedan ver más de cerca las imágenes de su portafolio. La capacidad de hacer zoom en sus imágenes es, por lo tanto, una buena práctica de UX y, potencialmente, también un impulso de ventas.

Sin más preámbulos, aquí le mostramos cómo puede agregar un efecto de zoom de imagen de WordPress de aumento a su sitio de WordPress con el plugin WP Image Zoom.

Instalación y configuración del plugin WP Image Zoom

Zoom de imagen WP

En primer lugar, debe instalar el plugin. Una vez que haya terminado con su instalación y activación, diríjase al Zoom de imagen WP pestaña en su panel de administración de WordPress.

Abrir esta pestaña le permitirá establecer fácilmente la configuración de zoom de la imagen del plugin.

Configuración de zoom de imagen WP

En el Configuración general lengüeta, puede habilitar el zoom en productos de WooCommerce, páginas de categorías de WooCommerce y productos de variación. También puede configurar el efecto de zoom en dispositivos móviles, quitar la caja de luz para hacer zoom de sus imágenes sin esfuerzo, etc. Además, puede habilitar el zoom dentro de una caja de luz si desea mantenerlo, e incluso consultar una lista de cajas de luz compatibles.

Pestaña de configuración general de zoom de imagen WP

Asegúrese de hacer clic en el Guardar cambios una vez que configure todas las opciones de acuerdo con sus preferencias.

WP Image Zoom Guardar cambios

Luego, dirígete a los Configuración de zoom lengüeta.

Ficha Configuración de zoom

Como el Configuración general pestaña, la Configuración de zoom La pestaña es bastante intuitiva y viene con 4 sencillos pasos que te permitirán agregar un efecto de zoom a tus imágenes.

El paso 1 le permite elegir la forma de la lente. Algunas de las opciones disponibles incluyen forma de lente circular, cuadrado y ventana de zoom.

Forma de la lente

A continuación, puede verificar los cambios de configuración al obtener una vista previa de la imagen de prueba (la imagen viene junto con el plugin) utilizando la lente que eligió. Puede volver a esta opción y obtener una vista previa de los cambios adicionales que realice en los otros pasos.

Zoom de imagen gif

El tercer paso le permite configurar múltiples opciones en su General lengüeta. Puede elegir el tipo de cursor, definir el efecto de suavizado de la animación, elegir si desea habilitar el zoom al pasar el mouse o al hacer clic con el mouse, y establecer el nivel de zoom.

Varias opciones en su pestaña General

Luego, haga clic en los Lente lengüeta. Allí, podrá establecer algunas opciones adicionales, incluido el tamaño de la lente, el color de la lente, el grosor del borde, el color del borde, etc. Sin embargo, debe tener en cuenta que puede usar esta configuración solo si elige una lente circular o cuadrada en la primera paso.

Pestaña de la lente

Por otro lado, el Ventana de zoom La pestaña se puede usar si seleccionó la forma de lente de la ventana de zoom. Si lo hizo, podrá establecer el ancho de la ventana de zoom, la altura de la ventana de zoom, la distancia desde la imagen principal, etc.

Forma de la lente de la ventana de zoom

Una vez más, debe presionar el botón Guardar cambios para que la configuración surta efecto.

Guardar con zoom de imagen WP

Y eso es todo: las imágenes de sus productos ahora contarán con un efecto de zoom de aumento.

Agregar un efecto de zoom a sus imágenes

Una vez que haya configurado las funciones del plugin de acuerdo con sus preferencias, es hora de agregar el efecto de zoom a sus imágenes, lo que debe hacer manualmente para cada imagen.

Primero, acceda a la página o publicación donde se publica su imagen (yendo a Páginas> Todas las páginas / publicaciones> Todas las publicaciones), o, para agregar el efecto a una nueva imagen en una publicación o página, cree una nueva (Páginas / Publicaciones> Agregar nuevo).

Si está utilizando el editor de Gutenberg, después de agregar su imagen a su página o publicación (haciendo clic en el signo más y luego eligiendo el Imagen bloque), haga clic en la imagen en cuestión y luego seleccione el botón de imagen ubicado dentro del bloque de imagen en la esquina superior izquierda.

Agregar un efecto de zoom de imagen en su página o publicación

Esto abrirá un Estilos de bloque desplegable. Simplemente seleccione el estilo nombrado Con zoom.

Menú desplegable de estilos de bloque

Finalmente, presione el Publicar / Actualizar y vaya a su página o publicación para ver cómo se ve su imagen en vivo.

Zoom de imagen

En el editor clásico, el proceso es muy similar. Después de agregar su imagen a una página o publicación, haga clic en ella y seleccione el ícono de aumento que verá en la esquina derecha de la barra de herramientas de edición. Esto permitirá un efecto de aumento en su imagen.

Habilitar un efecto de aumento

Tenga en cuenta que el editor clásico le permite agregar la función de zoom solo a imágenes que no sean de tamaño completo, por lo que debe seleccionar su imagen y luego hacer clic en el icono de lápizEditar) para cambiar su tamaño.

Icono de lápiz

Aparecerá una nueva pantalla, mostrando los detalles de la imagen y permitiéndole cambiar ciertas configuraciones de imagen. También podrá cambiar el tamaño de la imagen aquí. Después de seleccionar el tamaño (cualquier otro tamaño excepto Tamaño completo), haga clic en el Actualizar botón.

Agrega el efecto de zoom

Después de publicar o actualizar su página / publicación, continúe y obtenga una vista previa de sus cambios una vez más.

Solo una nota final: esta opción solo se aplica a la imagen que seleccionó en esa página o publicación en particular, lo que significa que debe habilitar la misma opción nuevamente para cada imagen a la que desee agregar el efecto de zoom.

Conclusión

Un efecto de zoom de aumento en las imágenes puede ser una gran adición a una tienda de comercio electrónico o cualquier otro sitio web que quiera vender productos. Independientemente del tipo de productos que ofrezca, sus clientes potenciales seguramente estarán interesados ​​en examinarlos con el mayor detalle posible.

Si utiliza un plugin de WordPress como WP Image Zoom para agregar esta función a sus imágenes, podrá hacerlo de forma rápida y sencilla. Solo tenga cuidado de usar imágenes de alta calidad para asegurarse de que la función de zoom se vea impecable y haga bien su trabajo. Finalmente, dado que las imágenes de alta calidad pueden afectar la velocidad de su sitio web, también debe optimizar sus imágenes para la web a fin de reducir su tamaño sin poner en peligro su calidad.