¿Cómo agregar efectos de desplazamiento de imagen en WordPress 2024? [4 mejores pasos a seguir]

¿Qué son los efectos de desplazamiento en WordPress? Su sitio web debe estar construido para ser único. Es difícil cuando todos los demás piensan lo mismo. La buena noticia es que la tecnología contemporánea simplifica el diseño del sitio.

Agregar efectos de desplazamiento a las fotos estáticas es un ejemplo. Sobre los beneficios de aplicar efectos de desplazamiento a una imagen en WordPress. Luego le mostraremos cómo incorporarlos en su sitio web. ¡Empecemos!

¿Cómo agregar efectos de desplazamiento de imagen en WordPress? 4 mejores pasos

Después de conocer los efectos de desplazamiento y sus ventajas, es posible que se pregunte cómo implementarlos. Afortunadamente, hemos publicado una guía completa sobre cómo hacer precisamente eso:

Los efectos de desplazamiento se pueden agregar mediante un código personalizado. Sin embargo, si no es un programador experimentado, esto puede ser un esfuerzo que requiere mucho tiempo y, a veces, es peligroso.

Sin embargo, cuando se emplea un complemento, las cosas se vuelven notablemente menos complicadas.

El Complemento gratuito de WordPress Beaver Builder simplifica el proceso de creación de sitios de WordPress completamente funcionales y estéticamente agradables.

Del CSS modular al intuitivo editor de páginas de arrastrar y soltar, todo está diseñado pensando en el desarrollador.

Como beneficio adicional, esta aplicación hace que sea sencillo para cualquiera aplicar efectos de desplazamiento a sus imágenes. No puede equivocarse con Beaver Builder para cualquier imagen que requiera un elemento interactivo adicional.

También se sugiere que utilice nuestro tema Beaver Builder. Use las plantillas de publicaciones de WordPress para crear rápidamente una variedad de tipos de publicaciones, incluidas las páginas.

De esa forma, en lugar de preocuparse por desarrollar diseños, puede concentrarse en crear características atractivas, como efectos de desplazamiento. Por otro lado, puede utilizar Beaver Builder con cualquier tema de WordPress que elija.

Paso 1: agregar un módulo de fotos

Antes de comenzar, active el complemento Beaver Builder. Luego ve a Páginas en el administrador de WordPress. Activa el editor creando una nueva página o seleccionando una existente.

Luego haga clic en el signo Más en la parte superior derecha. Agregará un módulo Foto. Arrastrar y soltar le permite posicionar este módulo rápidamente.

Paso 2: activa el módulo de fotos

Este módulo le permite publicar fotografías en su sitio. Seleccione una foto de su biblioteca o ingrese una URL. En la Biblioteca multimedia, recorta la imagen.

También puede dar forma a una foto. Las imágenes de paisaje, panorámicas, retratos o circulares pueden usar el efecto de desplazamiento. Ahora puede incluir un enlace de imagen. Los efectos de desplazamiento se pueden usar para dirigir el tráfico a ciertas URL.

Paso 3: Agregar una clase personalizada

Después de la configuración del módulo de imagen, seleccione Avanzado. Este es el Elemento HTML.

Desplácese hacia abajo hasta Clase. Introduzca aquí la información de la clase personalizada del efecto. Así que agregamos hover-unblur a la clase. Los efectos de desplazamiento le permiten cambiar el color y el movimiento de una imagen. Efectos de levantamiento en Beaver Builder. Según el impacto, se requiere una clase especial.

Paso 4: integra el efecto CSS

Finalmente, agregue CSS flotante a su sitio. Nuestra base de conocimiento tiene el CSS flotante. El tiempo entre los efectos de desplazamiento es de 0.3 segundos. O cuando envías el CSS. Puede acelerar o ralentizar la transición.

Seleccione Configuración global en la barra de título de la izquierda. Ahora agregue el código CSS a la etiqueta CSS.

En cada página de Beaver Builder, vaya a Herramientas > Configuración global y guárdela. Además, el contenido que no sea de Beaver Builder está sujeto a sus reglas de CSS.

Una sola página en LayoutCSS&Jscript. Guarde sus modificaciones de CSS. VER PRIMERO HOVER EFF Pase el mouse sobre la imagen para probar.

Aplica el efecto a una fila o columna de fotografías.

Quick Links:

• ¿Cómo crear una paleta de colores para su sitio de WordPress?
• ¿Cómo crear una página de modo de mantenimiento en WordPress?
• ¿Cómo crear una página de error 404 personalizada en WordPress?
• ¿Cómo gestionar la comunicación con el cliente de forma eficaz?

Conclusión: ¿Cómo agregar efectos de desplazamiento de imagen en WordPress?

Hay muchos métodos para personalizar un sitio web, pero uno de los más simples es usar un efecto de desplazamiento en las imágenes. Los efectos de desplazamiento son una forma divertida de atraer a los visitantes de su sitio web y mantenerlos allí por más tiempo.

¿Tiene un efecto de desplazamiento preferido que le gusta usar? ¡Ponlo en el área de comentarios a continuación!