Cómo agregar efectos de cruce de imágenes en WordPress (paso a paso)

¿Le gustaría averiguar cómo agregar efectos de pasaje de imagen en WordPress? Los efectos de paso de imágenes pueden hacer que su sitio sea más interactivo y cautivador. Esto crea una mejor primera impresión y mejora el tiempo dedicado a su sitio en este artículo, le mostraremos cómo agregar los efectos del pasaje de la imagen en WordPress, paso a paso.

¿Qué son los efectos de la imagen flotante? Los efectos de pasaje de la imagen le permiten agregar elementos interactivos a imágenes estáticas, como animaciones, efecto zoom, ventanas emergentes y muchas más. Por ejemplo, es posible que tenga imágenes que vuelvan para revelar sus precios o enlaces a su cartera.
Colocar imágenes también le brinda una forma creativa de mostrar sus fotos, galerías y miniaturas. Las imágenes interactivas y los elementos de desplazamiento pueden ayudar a su sitio de varias maneras:
Mejore el tiempo dedicado a sus visitantes en su sitio.
Date formas creativas de presentar contenido a tus visitantes.
Anuncie a sus usuarios que se puede hacer clic en un elemento de sitio.
Cómo crear efectos de pasaje de imagen en WordPress La mejor manera de agregar efectos de paso de imágenes en su sitio de WordPress es usar un complemento de WordPress. Con un complemento, no tiene que pasar tiempo editando, formatear y agregar CSS para crear efectos de imagen. Solo funciona.
Hay todo tipo de complementos que puede usar para crear efectos y animaciones únicas de pasaje de imagen. En este tutorial, le mostraremos las cuatro formas diferentes de agregar los efectos del flotador que necesita.
Agregar efectos de flipbox Image Hover a WordPress
Agregar ampliación de imágenes y efectos de ampliación en WordPress
Agregar efectos de animación de imagen en los efectos emergentes de WordPressading se desplaza en WordPress
1. Agregar los efectos de la imagen Flipbox se desplaza en WordPress Un cuadro de flip es una caja que volca cuando el mouse pasa sobre él. Puede agregar esta animación a sus imágenes para revelar el texto o incluso para cambiar la imagen en la carrera.
Puede controlar cómo gira la imagen, junto con el diseño de la imagen en ambos lados. Si es un fotógrafo, puede usarlo para presentar su trabajo y separar sus carteras. La forma más fácil de agregar efectos Flipbox es con un complemento de WordPress. Un complemento le permite crear y personalizar estos efectos rápidamente. Recomendamos usar el complemento Flipbox – Awesomes Flip Cajas Superposición de imagen. Es el mejor complemento de Flipbox e imagen para flotar. 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 preconstruidas. 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 planes de Flipbox en WordPress. 2. Agregar ampliación de imágenes y efectos de ampliación en los efectos de zoom de imagen de WordPress permiten a los usuarios ver detalles que no pudieron ver en una imagen normal. Este es un excelente efecto para los tutoriales de productos y los altos niveles de detalles. También puede usarlo en su tienda en línea para agregar un efecto de zoom como Amazon.

La forma más liviana de agregar imágenes de zoom y aumentar sus imágenes. Está utilizando un complemento de WordPress. Recomendamos usar el complemento WP Image Zoom. Este complemento le permite simplemente agregar y aumentar las imágenes. También está equipado con funciones que le permiten elegir la forma de la lente de zoom, el nivel de zoom y más. Para obtener más detalles, consulte nuestra guía sobre cómo agregar a las imágenes en WordPress. 3. Agregar efectos de animación de imagen en WordPress Hay todo tipo de efectos de desplazamiento adicional 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 complemento Ultimate de los efectos de desplazamiento de la imagen. Este complemento es muy fácil, por lo que no tendrá un impacto en el rendimiento de su sitio web y la velocidad de carga. También es muy fácil de usar. Puede agregar efectos de imagen únicos con unos pocos clics. Lo primero que debe hacer es instalar y activar los efectos de la imagen del complemento Ultimate. Para obtener más detalles, consulte nuestra guía paso por paso sobre cómo instalar un complemento de WordPress.
Después de instalar y activar el complemento, debe hacer clic en “Hover de imagen” en su administrador de WordPress. Esto mostrará ocho efectos diferentes de pasaje de imagen a partir de los cuales puede elegir.

Para este tutorial, utilizaremos el efecto “Efectos de subtitulación”. Esto agrega texto animado sobre su imagen con el mouse. Primero, haga clic en el cuadro “Efectos del subtítulo”. Muestra un menú con diferentes opciones de animación para elegir. Después de haber encontrado el efecto de imagen que le gusta, haga clic en “Crear estilo”. En el cuadro emergente, llame al efecto de flotar y elija el look. El número de aspectos que selecciona corresponde a 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á en el cuadro “Vista previa”. Para cambiar la imagen predeterminada, pase el mouse a través de 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á en Hover. Para cargar la imagen, haga clic en el cuadro debajo del título “Imagen” y cargue o seleccione una imagen desde su biblioteca de medios.

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

Después de haber 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 crear el efecto de pasaje de imagen en vivo. 4. Agregar los efectos de la imagen emergente se desplaza en WordPress Los complementos anteriores lo ayudarán a agregar funciones como cajas de flip, efectos de desplazamiento, animaciones y más. ¿Qué sucede si desea agregar otro efecto de pasaje de imagen que no está cubierto por los complementos anteriores? La mejor manera de hacerlo es con un complemento CSS de WordPress. Esto le permite realizar cambios visuales en sus imágenes sin tener que editar ningún código. Puede editar los archivos manuales CSS o puede agregar CSS a través de WordPress Customizer, sin embargo, el uso de un complemento es la opción más fácil. Recomendamos usar el complemento CSS Hero. Este complemento le permite editar casi todos los estilo CSS en su sitio de WordPress sin escribir una línea de código.
Hay todo tipo de efectos CSS incorporados especialmente 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. Después de instalar el complemento, deberá hacer clic en “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. Agregaremos una ventana de imagen emergente al efecto flotante. 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 mostrará un menú con diferentes efectos CSS. Luego seleccione el efecto “.HVR-Pop” y haga clic en “Aplicación”. Haga clic en “Guardar y publicar” y el efecto CSS se aplicará automáticamente a sus imágenes.

Esperamos que este artículo lo ayude a descubrir cómo agregar efectos de pasaje de imagen en WordPress. También le recomendamos que vea nuestra guía sobre cómo optimizar las imágenes web y nuestra guía para principiantes de SEO. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para los tutoriales de video de WordPress. También puede encontrarnos en Twitter y Facebook.