Besoin d’un moyen de créer un effet de défilement d’image dans Elementor ? Dans cet article, nous vous guiderons pour créer un effet de défilement d’images à l’aide d’Elementor sur vos pages web.
O efecto de desprazamento da imaxe permitirache revelar a imaxe completa cando o usuario pase o rato sobre as imaxes. Cando visitas un sitio web que vende modelos de sitios web, podes ver a vista previa completa dos modelos con funcións de efecto de desprazamento de imaxes.
Con estas funcións, pode mostrar facilmente aos seus usuarios a vista completa do sitio web nun espazo pequeno. Normalmente, se queres mostrar unha imaxe completa dun sitio web, ocupará moito espazo nas túas páxinas web. Ademais, afecta ao deseño do teu sitio web.
Pero co efecto de desprazamento de imaxes, podes engadir máis imaxes dun xeito atractivo que atrae facilmente a atención do público.
Crea un efecto de desprazamento de imaxe en Elementor
Elementor non ofrece un widget para engadir o efecto de desprazamento da imaxe. Polo tanto, cómpre engadir o efecto usando CSS personalizado. A función CSS personalizada só está dispoñible con Elementor Pro. Así que asegúrate de ter actualizado a Elementor Pro.
Maintenant, ouvrez une page avec l’éditeur Elementor et cliquez sur l’icône plus pour ajouter une section.
Agora cómpre seleccionar a columna da súa sección. Aquí seleccionamos a sección de columna única.
Agora fai clic na icona de edición da sección e na pestana de deseño establece a altura mínima en 500.
Agora, desde o widget de bloque, engade o bloque de sección interna á sección creada e elimina a columna predeterminada. Fai clic co botón dereito na icona de edición da columna e fai clic na opción Eliminar para eliminar a columna principal.
Vaia de novo á opción de edición da sección interna e na pestana de deseño establece a altura mínima en 500 como mostramos anteriormente.
Agora cambia á pestana de estilo da sección interna e configura o fondo como clásico desde a opción de fondo. A continuación, debes engadir a túa imaxe de fondo. Desde a opción de posición da imaxe, establece a posición da imaxe por Centro superior. Desde a opción de repetición, configure a opción sen repetir e o tamaño como cubrir.
Agora cambia á pestana avanzado para engadir CSS personalizado. No campo CSS personalizado, engade o seguinte código:
selector{ -webkit-transition: ease-in-out 3s !important; transición: facilidade de entrada e saída 3s !importante; } selector:hover{ background-position: center bottom !important; }
Pode cambiar o valor de transición para cambiar o efecto de desprazamento das imaxes. Se queres engadir varias imaxes co mesmo efecto, podes duplicar a columna e cambiar a imaxe de fondo.
Conclusión
Seguindo o proceso, poderás engadir un efecto de desprazamento de imaxe ao teu sitio web mediante o creador de páxinas Elementor. Podes consultar os nosos outros artigos para aprender:
- Como usar os bloques Elementor no editor Gutenberg?
- Elementor vs Divi vs SeedProd - Cal é mellor?
- Como usar o historial para desfacer e refacer accións en Elementor
- Como facer un sitio web de Elementor super rápido
- Como crear un círculo interactivo en Elementor
Agardamos que este artigo che sexa útil. Se che gusta este artigo, gústalle a nosa páxina de Facebook para estar conectado.
