¿Quiere aprender cómo agregar efectos de desplazamiento de imágenes en WordPress?

Los efectos de desplazamiento de imágenes pueden hacer que su sitio sea más interactivo y atractivo. Esto crea una mejor primera impresión y mejora el tiempo que pasa en su sitio.

En este artículo, le mostraremos cómo agregar efectos de desplazamiento de imagen en WordPress, paso a paso.

¿Qué son los efectos de desplazamiento de imagen?

Los efectos de desplazamiento de imágenes le permiten agregar elementos interactivos a sus imágenes estáticas, como animaciones, efectos de zoom, ventanas emergentes y más.

Por ejemplo, podría tener imágenes que se voltean para revelar sus precios o enlaces a su cartera.

Las imágenes flotantes también le brindan una forma creativa de mostrar sus fotos, galerías y miniaturas.

Las imágenes interactivas y los elementos flotantes pueden ayudar a su sitio de muchas maneras:

  • Mejore el tiempo que sus visitantes pasan en su sitio
  • Brindarle formas creativas de presentar contenido a sus visitantes.
  • Deje que sus usuarios sepan que se puede hacer clic en un elemento del sitio.

Cómo crear efectos de desplazamiento de imagen en WordPress

La mejor manera de agregar efectos de desplazamiento de imagen a su sitio web de WordPress es utilizando un WordPress plugin.

Con un plugin, no tiene que perder tiempo editando, formateando y agregando CSS para crear efectos de imagen. Simplemente funciona.

Hay todo tipo de plugins que puede utilizar para crear animaciones y efectos de desplazamiento de imagen únicos.

En este tutorial, le mostraremos las cuatro formas diferentes de agregar los efectos de desplazamiento que necesita.

1. Agregar efectos Flipbox de desplazamiento de imagen en WordPress

Una caja plegable es una caja que se voltea cuando el mouse pasa sobre ella.

Puede agregar esta animación a sus imágenes para revelar texto o incluso cambiar la imagen al pasar el mouse.

Flipbox flotante de imagen

Puede controlar cómo se voltea la imagen, junto con el diseño de la imagen en ambos lados.

Si eres fotógrafo, puedes usar esto para mostrar tu trabajo y separar tus portafolios.

La forma más fácil de agregar efectos de flipbox de imagen es con WordPress plugin. A plugin le permite crear y personalizar estos efectos rápidamente.

Recomendamos utilizar el Flipbox: superposición de imágenes de cajas abatibles de Awesomes plugin. Es el mejor flipbox e imagen flotante. plugin para WordPress.

Esto plugin le permite simplemente agregar efectos de flipbox personalizados a sus imágenes de WordPress.

Flipbox flotante de imagen plugin ajustes

Viene con docenas de diferentes efectos de animación y plantillas prediseñadas. Incluso puede controlar los colores y agregar su propio CSS personalizado.

Para obtener más detalles, consulte nuestra guía sobre cómo crear superposiciones y desplazamientos de flipbox en WordPress.

2. Agregar efectos de ampliación y zoom de imagen en WordPress

Los efectos de zoom de imagen permiten a los usuarios ver detalles que no podrían ver en una imagen de tamaño normal.

Este es un gran efecto para tutoriales de productos e imágenes con altos niveles de detalle.

También puede usarlo en su tienda en línea para agregar un efecto de zoom como Amazon.

Ampliar el zoom de la imagen

La forma más fácil de agregar zoom de imagen y efectos de ampliación a sus imágenes es utilizando un WordPress plugin.

Recomendamos utilizar el Zoom de imagen WP plugin. Esto plugin le permite simplemente agregar efectos de zoom y ampliación a sus imágenes.

Zoom de imagen WP plugin ajustes

También está equipado con funciones que le permiten elegir la forma de la lente de zoom, el nivel de zoom y mucho más.

Para obtener más detalles, consulte nuestra guía sobre cómo agregar zoom de aumento para imágenes en WordPress.

3. Agregar efectos de animación de imágenes en WordPress

Hay todo tipo de efectos de desplazamiento adicionales que puede agregar a WordPress.

Por ejemplo, tiene galerías de imágenes animadas, imágenes de caja de luz, imágenes de comparación, superposiciones de texto y más.

Desplazamiento del efecto de animación de imagen

Para agregar efectos de desplazamiento como estos, recomendamos usar el Efectos de desplazamiento de imagen Ultimate plugin.

Esto plugin es muy liviano, por lo que no afectará el rendimiento de su sitio web y las velocidades de carga. También es muy fácil de usar. Puede agregar efectos de imagen únicos con un par de clics.

Lo primero que debe hacer es instalar y activar el Efectos de desplazamiento de imagen Ultimate plugin. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un WordPress. plugin.

Una vez que haya instalado y activado el plugin, debe hacer clic en ‘Image Hover’ en su administrador de WordPress. Esto mostrará ocho efectos de desplazamiento de imagen diferentes entre los que puede elegir.

Elija el efecto de desplazamiento de la imagen

Para este tutorial, usaremos el efecto ‘Efectos de subtítulos’. Esto agrega texto animado sobre su imagen al pasar el mouse.

Primero, haga clic en el cuadro ‘Efectos de subtítulos’. Esto abre un menú de diferentes opciones de animación para elegir.

Estilo de creación de animación de desplazamiento de imagen

Una vez que haya encontrado el efecto de imagen que le gusta, haga clic en ‘Crear estilo’.

En el cuadro emergente, asigne un nombre a su efecto de desplazamiento y elija el diseño. El número de diseño que seleccione coincide con la secuencia ordenada de imágenes.

Recuerde hacer clic en ‘Guardar’.

Colocar el nombre de la nueva imagen

En la siguiente pantalla, tendrá una variedad de opciones para personalizar su efecto de desplazamiento.

Sin embargo, dejaremos las opciones de animación predeterminadas.

Configuración de animación de desplazamiento

Si realiza cambios, los verá aparecer en el cuadro “Vista previa”.

Para cambiar la imagen predeterminada, coloque el cursor sobre la imagen y haga clic en la opción ‘Editar’.

Editar animación de desplazamiento

En esta ventana emergente, puede cambiar el título y la descripción que aparecerá al pasar el mouse.

Para cargar su imagen, haga clic en el cuadro debajo del título ‘Imagen’ y cargue o seleccione una imagen de su biblioteca de medios.

Cambiar la imagen al colocar el cursor sobre la imagen

También puede agregar un enlace y texto de botón si desea que su imagen lleve a los usuarios a otra página de su sitio web.

Una vez que haya terminado, haga clic en ‘Enviar’.

Código corto de desplazamiento de imagen

Para agregar la imagen a su sitio web, copie el código corto en el cuadro ‘Código corto’.

Luego, abra cualquier página, publicación o widget donde desee que aparezca su imagen y pegue el código corto.

Pegar código corto de animación de desplazamiento

Asegúrese de hacer clic en ‘Publicar’ o ‘Actualizar’ para guardar los cambios y hacer que el efecto de desplazamiento de la imagen se active.

4. Adición de efectos emergentes de desplazamiento de imagen en WordPress

La plugins anterior le ayudará a agregar funciones como flip boxes, efectos de desplazamiento, animaciones y más.

¿Qué sucede si desea agregar un efecto de desplazamiento de imagen diferente no cubierto por el plugins ¿sobre?

La mejor manera de hacer esto es con un CSS personalizado de WordPress plugin. Esto le permite realizar cambios visuales en sus imágenes sin tener que editar ningún código.

Puede editar sus archivos CSS manualmente o agregar CSS a través del personalizador de WordPress, sin embargo, usando un plugin es la opción más sencilla.

Recomendamos usar CSS Hero plugin. Esto plugin le permite editar casi todos los estilos CSS en su sitio de WordPress sin escribir una línea de código.

Efectos de desplazamiento CSS

Hay todo tipo de efectos CSS integrados específicamente para imágenes.

Para obtener más detalles sobre la instalación de un plugin, consulte nuestra guía sobre cómo instalar un WordPress plugin.

Una vez el plugin está instalado, deberá hacer clic en el botón “Continuar con la activación del producto”.

Activar CSS Hero

Esto te guiará a través de plugin proceso de activación.

Después de la plugin está activado puedes empezar a personalizar tus imágenes.

Abra una página o publicación que tenga la imagen o imágenes que desea animar y haga clic en ‘CSS Hero’ en la parte superior de la página.

Esto abrirá el menú del editor donde puede agregar todo tipo de efectos CSS diferentes.

Vamos a agregar una imagen emergente en el efecto de desplazamiento. Primero, deberá hacer clic en la imagen que desea editar y luego hacer clic en ‘Fragmentos’.

Después de eso, haga clic en ‘Efectos de desplazamiento’.

Efectos de desplazamiento de CSS Hero

Esto abrirá un menú de diferentes efectos CSS. A continuación, seleccione el efecto ‘.hvr-pop’ y haga clic en ‘Aplicar’.

Haga clic en ‘Guardar y publicar’ y el efecto CSS se aplicará automáticamente a sus imágenes.

Guardar cambios de desplazamiento de imagen

Esperamos que este artículo le haya ayudado a aprender cómo agregar efectos de desplazamiento de imágenes en WordPress. Es posible que también desee ver nuestra guía sobre cómo optimizar imágenes para la web y nuestra guía para principiantes sobre SEO de imágenes.

Si le gustó este artículo, suscríbase a nuestro Canal de Youtube . También puedes encontrarnos en Twitter y Facebook.

.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *