¿Quiere aprender cómo agregar efectos de desplazamiento de imagen 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.
- Indique a sus usuarios 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 complemento de WordPress.
Con un complemento, no tiene que perder tiempo editando, formateando y agregando CSS para crear efectos de imagen.
Simplemente funciona.
Hay todo tipo de complementos 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.
- Agregar efectos Flipbox de desplazamiento de imagen en WordPress
- Agregar efectos de ampliación y zoom de imagen en WordPress
- Agregar efectos de animación de imágenes en WordPress
- Agregar efectos emergentes de desplazamiento de imagen en WordPress
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 un complemento de WordPress.
Un complemento le permite crear y personalizar estos efectos rápidamente.
Recomendamos utilizar el complemento Flipbox – Awesomes Flip Boxes Image Overlay.
Es el mejor complemento de desplazamiento de imágenes y flipbox para WordPress.
Este complemento 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 mediante el uso de un complemento de WordPress.
Recomendamos utilizar el complemento WP Image Zoom.
Este complemento 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 utilizar el complemento Image Hover Effects Ultimate.
Este complemento es muy liviano, por lo que no afectará el rendimiento y las velocidades de carga de su sitio web.
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 complemento Image Hover Effects Ultimate.
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 ‘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, nombre 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
Los complementos anteriores lo ayudarán a agregar funciones como cajas giratorias, 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 utilizar 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 integrados 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.
Una vez activado el complemento, puede comenzar a personalizar sus 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 para tutoriales en video de WordPress.
También puedes encontrarnos en Twitter y Facebook.
