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.
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.
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.
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.
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.
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.
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.
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’.
En la siguiente pantalla, tendrá una variedad de opciones para personalizar su efecto de desplazamiento.
Sin embargo, dejaremos las opciones de animación predeterminadas.
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’.
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.
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’.
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.
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.
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».
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’.
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.
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.
.