Cómo agregar efectos de pasaje de imagen en WordPress (en 4 pasos)

¿Se pregunta cómo agregar efectos de pasaje de imagen en WordPress? Cuando diseñe su sitio web, querrá que se destaque tanto como sea posible. Esto puede ser difícil porque cualquier otro desarrollador web piensa lo mismo. Sin embargo, muchas herramientas innovadoras le permiten crear un diseño web atractivo fácilmente. Por ejemplo, agregar los efectos de movimiento con el mouse a las imágenes puede ser una forma creativa e interactiva de mejorar las imágenes estáticas en su sitio en esta publicación, discutiremos los beneficios de agregar efectos de desplazamiento a una imagen en WordPress. Luego le daremos una guía paso a paso sobre cómo implementarlos en su sitio web. ¡Vamos a empezar!
¿Cuáles son los efectos del pasaje de la imagen en WordPress? Debido a que WordPress es muy personalizable, puede diseñar un sitio web con mucha atracción visual. Puede tomar tiempo y planificar crear un sitio único, pero es muy posible al usar las técnicas correctas. Una forma de ser innovadora con el diseño de su web es agregar un efecto flotante a una imagen. Los efectos de desplazamiento pueden ser una manera perfecta de construir un sitio web estético y memorable. Estos pueden ayudar a las imágenes estáticas simples a destacarse y sentirse más interactivas:

Un efecto de cruce del mouse es una animación que se desencadena cuando un usuario pasa con el mouse sobre un elemento en la página. Algunos efectos flotantes son tan simples como la ampliación de una imagen. Otros pueden cambiar de color o hacer que la imagen se reduzca o gire. Los efectos de cruce del mouse se pueden agregar a muchos otros elementos, como enlaces en sus páginas de destino, pero en esta publicación nos centraremos exclusivamente en las imágenes. ¿Por qué podría agregar efectos de desplazamiento a las imágenes en WordPress si desea desarrollar su negocio? , es esencial tener un sitio web bien diseñado. Agregar imágenes es una técnica inteligente para romper pasajes de texto largos y hacer que su sitio se sienta personal. Aunque las imágenes estáticas pueden ser efectivas, el uso de los efectos del desplazamiento puede ser más atractivo y único. Hay muchos beneficios en el uso de efectos de ciervo. Ellos pueden:
Agregue un elemento interactivo a la imagen
Ser más cautivador que una imagen estática
Requiere menos recursos que los gifs o los videos
Informar a los usuarios que se puede hacer clic en una imagen
Lo mejor, con nuestro complemento de Beaver Builder, los efectos del flotador son fáciles de usar. Descubrirá que Beaver Builder ofrece muchas opciones de animación diferentes para los efectos de desplazamiento. Usando una clase personalizada y un CSS personalizado, puede mejorar instantáneamente las imágenes en su sitio web.
Cómo agregar los efectos de desplazamiento a las imágenes en WordPress (en 4 pasos) Ahora que he explorado los beneficios de los efectos de desplazamiento, es posible que se pregunte cómo usarlas. Afortunadamente, compilé un tutorial paso a paso sobre este proceso: puede agregar efectos de floso por codificación manual. Sin embargo, esto puede ser arriesgado y de tiempo, especialmente si no es un desarrollador experimentado. La buena noticia es que esta tarea se vuelve mucho más simple cuando se usa un complemento. El complemento gratuito de Beaver Builder WordPress le ayuda a construir fácilmente sitios web visuales funcionales y atractivos. Cada elemento es amigable para los desarrolladores, desde el generador de página de arrastrar y soltar hasta el CSS personalizable. Además, esta herramienta permite a cualquiera usar fácilmente los efectos del paso. Para cualquier foto que necesite una característica más interactiva, no puede cometer errores con Beaver Builder.
También recomendamos que instale nuestro tema de Beaver Builder. Al diseñar publicaciones y páginas en WordPress, es mejor usar publicaciones de WordPress que ahorren tiempo. De esta manera, puede concentrarse en crear características interesantes, como efectos flotantes, en lugar de diseñar modelos. Sin embargo, es libre de usar Beaver Builder junto con cualquier tema de WordPress que prefiera. Paso 1: Agregue un módulo de foto en su página antes de comenzar, asegúrese de instalar y activar el complemento Beaver Builder. Después de eso, en la parte posterior de su sitio de WordPress, vaya a la pestaña Páginas. Cree una página nueva o seleccione la página que desea editar y haga clic en Iniciar Beaver Builder para abrir el editor. Luego haga clic en el icono de esquina + derecho. Allí, agregará un módulo de fotos a su página:
Puede usar la función de deslizamiento y colocación para colocar este módulo de manera rápida y fácil donde sea necesario. Paso 2: Configure el módulo de foto y luego configure el módulo de foto como lo haría para cualquier imagen que agregue a su sitio para iniciar, ya sea seleccione una foto desde su biblioteca de medios o use una URL. Cuando use la biblioteca de medios, seleccione el tamaño de la foto que desee:
También puede cortar la imagen en diferentes formas geométricas. Un efecto flotante continuará siendo efectivo incluso si la imagen se modela en un paisaje, panorama, retrato o círculo.


En este momento, puede agregar un enlace a la foto si es necesario. Debido a que los efectos de moverse con el mouse llaman la atención sobre una imagen, esta puede ser una forma efectiva de alentar a los visitantes a visitar cierta URL. Paso 3: ingrese la clase personalizada después de configurar el módulo de foto como desee, haga clic en la pestaña Avanzada. Aquí encontrará la sección del elemento HTML. Desplácese en la parte inferior de esa sección, hasta que vea el campo de clase. En este cuadro, ingresará la información de clase personalizada para cualquier efecto que use. En este tutorial, utilizamos el efecto flotante Unblur, por lo que hemos introducido “Hover-Ablur” en la sección de clase: con los efectos del mouse, no solo puede insertar animaciones, sino también cambiar el color de una imagen. Beaver Builder ofrece muchos efectos de flujo diferentes para elegir. Dependiendo del efecto que desee agregar, deberá usar una determinada clase personalizada. Estas son las opciones que tiene a su disposición:

Hover zoom en: Hover-Zoom-In
Hover Zoom Out: Hover-Zoom-Out

Encogerse y girar con el mouse: pase con el mouse, se encoge, gracias
Hover Unblur: Hover-a-inblur
Grises en color: gris-flashes-wem
Sepia en color: Sepia-IMG
Siempre puede obtener una vista previa de diferentes efectos antes de elegir uno, para ver qué opción es la más efectiva.
Paso 4: Agregue CSS para obtener efecto en su sitio web Finalmente, deberá agregar en su sitio web de CSS para el efecto de desplazamiento elegido. Para hacer esto, puede visitar nuestra base de conocimiento para encontrar la copia de CSS para ese efecto flotante:
Es importante tener en cuenta que las velocidades de transición para los efectos de desplazamiento se sujetan a 0.3 segundos. Sin embargo, puede cambiar esto cuando carga el CSS a su sitio. Simplemente crece o reduzca los valores para acelerar o ralentizar la transición. Para agregar el código CSS a su sitio, haga clic en la barra de título en la esquina superior izquierda y explore la configuración global: luego acceda a la etiqueta CSS e inserte el código CSS para el efecto deseado. Después de guardar los cambios, este código aparecerá en Herramientas> Configuración global en cada página de Beaver Builder. Además, sus reglas CSS se aplicarán a todo el contenido de su sitio, incluso a las partes que no se crean con Beaver Builder. Si desea aplicar CSS solo a una página en particular, acceda a CSS y JavaScript. Ingrese el código en la pestaña CSS y guarde los cambios. ¡Ahora puedes ver el primer efecto flotante! Asegúrese de pasar el mouse sobre la imagen para asegurarse de que funcione correctamente:
También puede agregar el mismo efecto de conmutación a varias imágenes desde una fila o columna. Para obtener más detalles sobre esto, consulte nuestra documentación sobre el trabajo con filas y columnas. Conclusión Aunque hay muchas maneras de personalizar su sitio, agregar un efecto flotante es una manera rápida y fácil de hacer que cualquier imagen se vea única y atractiva. Los efectos del pasaje del ratón también proporcionan un elemento interactivo que puede mantener a las personas en su sitio durante un período de tiempo más largo. Como hemos visto, puede agregar fácilmente cualquier efecto de desplazamiento utilizando nuestro complemento Beaver Builder, siguiendo estos pasos:
Agregue un módulo de foto a su página Configure el módulo de fotos.

Ingrese la clase personalizada.

Agregue CSS para efecto en su sitio.

¿Cuál es tu efecto de desplazamiento favorito para usar?¡Háganos saber en la sección de comentarios!