¿Quiere aprender a agregar efectos de desplazamiento de imagen en WordPress?
Los efectos de desplazamiento de la imagen 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 imagen 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 su precio 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.
- Permita 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 mediante el uso de un complemento de WordPress.
Con un complemento, no tiene que dedicar tiempo a editar, formatear y agregar CSS para crear efectos de imagen. Simplemente funciona.
Hay todo tipo de complementos que puede usar 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
Un flip box es un cuadro que se voltea cuando se pasa el mouse sobre él.
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 imagen flipbox es con un complemento de WordPress. Un complemento le permite crear y personalizar estos efectos rápidamente.
Recomendamos utilizar el Flipbox: superposición de imágenes de Awesomes Flip Boxes enchufar. Es el mejor complemento de flipbox y desplazamiento de imágenes para WordPress.
Este complemento le permite simplemente agregar efectos 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 de flipbox y hovers en WordPress.
2. Adición de Zoom de Imagen y Efectos de Ampliación 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 mediante el uso de un complemento de WordPress.
Recomendamos utilizar el Zoom de imagen WP enchufar. Este complemento le permite simplemente agregar efectos de zoom y magnificación a sus imágenes.
También está equipado con funciones que le permiten elegir la forma de la lente del zoom, el nivel del 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 enchufar.
Este complemento es muy liviano, por lo que no afectará el rendimiento de su sitio web ni 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 enchufar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
Una vez que haya instalado y activado el complemento, debe hacer clic en ‘Imagen Hover’ en su administrador de WordPress. Aparecerán 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án 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 un botón de texto 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 abreviado.
Asegúrese de hacer clic en ‘Publicar’ o ‘Actualizar’ para guardar los cambios y activar el efecto de desplazamiento de la imagen.
Los complementos anteriores lo ayudarán 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 que no está cubierto por los complementos anteriores?
La mejor manera de hacerlo es con un complemento CSS personalizado de WordPress. 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, usar un complemento es la opción más fácil.
Recomendamos usar el complemento CSS Hero. Este complemento 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 incorporados específicamente para imágenes.
Para obtener más detalles sobre la instalación de un complemento, consulte nuestra guía sobre cómo instalar un complemento de WordPress.
Una vez que el complemento esté instalado, deberá hacer clic en el botón ‘Continuar con la activación del producto’.
Esto lo guiará a través del proceso de activación del complemento.
Después de activar el complemento, puede comenzar a personalizar sus imágenes.
Abra una página o publicación que tenga la imagen o las 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, luego haga 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 imagen en WordPress. También puede consultar nuestra guía sobre cómo optimizar imágenes para la web y nuestra guía para principiantes sobre SEO de imágenes.
.