Necesita una forma de crear un efecto de desplazamiento de imagen en Elementor ? En este artículo, lo guiaremos para crear un efecto de desplazamiento de imágenes usando Elementor en sus páginas web.
El efecto de desplazamiento de imagen le permitirá revelar la imagen completa cuando el usuario pasa el cursor sobre las imágenes. Cuando visita un sitio web que vende plantillas de sitios web, puede ver la vista previa completa de las plantillas con funciones de efecto de desplazamiento de imagen.
Con estas funciones, puede mostrar fácilmente a sus usuarios la vista completa del sitio web en un espacio pequeño. Normalmente, si desea mostrar una imagen completa de un sitio web, ocupará mucho espacio en sus páginas web. Además, afecta el diseño de su sitio web.
Pero con el efecto de desplazamiento de imágenes, puede agregar más imágenes de una manera atractiva que puede captar fácilmente la atención de la audiencia.
Crear efecto de desplazamiento de imagen en Elementor
Elementor no proporciona un widget para agregar un efecto de desplazamiento de imagen. Por lo tanto, debe agregar el efecto utilizando CSS personalizado. La función de CSS personalizado solo está disponible con Elementor Pro. Así que asegúrese de haber actualizado a Elementor Pro.
Ahora, abra una página con el editor Elementor y haga clic en el ícono más para agregar una sección.
Ahora debe seleccionar la columna para su sección. Aquí seleccionamos la sección de una sola columna.
Ahora haga clic en el icono de edición de la sección y en la pestaña de diseño establezca la altura mínima en 500.
Ahora, desde el widget de bloque, agregue el bloque de la sección interna a su sección creada y elimine la columna predeterminada. Haga clic con el botón derecho en el icono de edición de la columna y haga clic en la opción Eliminar para eliminar la columna principal.
Vaya a la opción de edición de la sección interna nuevamente y en la pestaña de diseño establezca la altura mínima en 500 como mostramos anteriormente.
Ahora cambie a la pestaña de estilo de la sección interior y configure el fondo como clásico desde la opción de fondo. A continuación, debe agregar su imagen de fondo. Desde la opción de posición de la imagen, establezca la posición de la imagen Centro Superior. Desde la opción de repetir, establezca la opción no-repetir y el tamaño como Protectora.
Ahora cambia a la pestaña Avanzado para agregar CSS personalizado. En el campo CSS personalizado, agregue el siguiente código:
selector{ -webkit-transition: facilidad de entrada y salida 3s! importante; transición: facilidad de entrada y salida 3s !importante; } selector: hover { posición de fondo: centro inferior ! importante; }
Puede cambiar el valor de transición para cambiar el efecto de desplazamiento de las imágenes. Si desea agregar varias imágenes con el mismo efecto, puede duplicar la columna y luego cambiar la imagen de fondo.
Conclusión
Al seguir el proceso, podrá agregar un efecto de desplazamiento de imagen a su sitio web utilizando el creador de páginas. Elementor. Puede consultar nuestros otros artículos para aprender:
- ¿Cómo usar bloques de Elementor en el editor de Gutenberg?
- Elementor vs Divi vs SeedProd – ¿Cuál es mejor?
- Cómo usar el historial para deshacer y rehacer acciones en Elementor
- Cómo hacer que un sitio web de Elementor sea súper rápido
- Cómo crear un círculo interactivo en Elementor
Esperamos que este artículo le sea útil. Si te gusta este artículo, por favor dale me gusta a nuestra página de Facebook para mantenerte conectado.
