¿Quieres saber cómo cambiar una imagen al pasar el mouse con DIVI?
Los efectos de desplazamiento son algunas de las micro interacciones más simples que un usuario puede tener con un sitio web. los Creador de temas Divi ofrece un conjunto de efectos de desplazamiento increíblemente simples que puede usar para crear una interacción atractiva para cada persona que visita su sitio web.
Uno de los efectos más llamativos y útiles de Divi es poder cambiar una imagen cuando un usuario pasa el cursor sobre ella.
Le mostramos en este tutorial cómo lograr un hermoso cambio de imagen al pasar el cursor del mouse sobre él.
vista
Antes de comenzar, echemos un vistazo al resultado que queremos lograr.
Crear una página con Divi Theme Builder
Comience agregando una nueva página a la Sitio web desde el Panel de WordPress.
Ver también: ¿Cómo crear un menú deslizante y push en DIVI?
Luego, asigne un título a su página y luego haga clic en " Utilice Divi Builder ".
Luego haga clic en " Elija el diseño«
Busca y elige " Página de inicio de peluquería canina »
Elija un diseño y haga clic en " Elija el diseño »
Encuentra tus imágenes
Cuando esté en Divi Builder, simplemente ubique las imágenes a las que desea agregar el efecto.
Tenga en cuenta que puede usarlo en cualquier elemento que contenga una imagen
Configuración del módulo abierto
Cuando haya tomado su decisión, haga clic en el ícono de ajustes e ingrese el parámetros del módulo que contiene la imagen.
Lea también: ¿Cómo hago flotar publicaciones de blog en DIVI?
En el caso de este paquete de diseño, la imagen a la que vamos a aplicar el efecto de desplazamiento es el fondo de la columna más a la derecha de la primera fila.
Introduzca la configuración de la columna.
Buscar imagen en la configuración
Una vez que esté en la configuración de columna correcto, asegúrese de seleccionar la pestaña Contenido. Desplázate hacia abajo hasta que encuentres la opción. aficionado.
Sous Fondo, Divi te da la opción de usar un color sólido, un degradado, una imagen o un video en formato .mp4.
Y aunque los efectos de desplazamiento se pueden aplicar a cualquiera de ellos, trabajamos en la pestaña Imagen, tercera desde la izquierda.
Habilitar efectos de desplazamiento
Mueve el mouse sobre la palabra Fondo (el subtítulo más pequeño) y busque elicono de flecha en las opciones que aparecen. Esta es la palanca para Efectos Divi Hover.
Cuando esta opción está activada, aparecen dos nuevas pestañas. La pestaña izquierda es la imagen base que aparece sin interacción.
Elige tu nueva imagen
Cuando mueva el cursor hacia abajo sobre la imagen, tendrá las opciones normales: para reemplazar la imagen ou para borrar la imagen.
Si eliges el icono de la papelera, activará el efecto de desplazamiento, pero hará que la imagen desaparezca.
ya que queremos cambiar la imagen al pasar el mouse, vamos a haga clic en la imagen en sí, ya sea en elicono de engranaje .
Elija la imagen flotante (reemplazo)
Esto abrirá su biblioteca de medios. A continuación, puede elegir la nueva imagen que desea que vean sus usuarios cuando se desplazan sobre la original. Haga clic en 'Subir una imagen"
Comprobar si hay errores con la imagen original
Siempre sugerimos que se asegure de que la imagen original también permanezca igual. Así que para comprobar, haga clic en el pestaña izquierda y asegúrese de que la imagen original todavía esté en su lugar.
Si todo está bien, puede guardar su configuración.
- Guardar la configuración de la columna
- Presiona de nuevo el garrapata verde para guardar la configuración de la línea.
Guarde la configuración general general y publique la página.
Resultado
Si siguió todos los pasos de este tutorial, debería obtener esto.
¡¡¡Descarga DIVI ahora!!!
Conclusión
Theme Builder de Divi está lleno de herramientas poderosas que cualquiera puede usar para crear un sitio web interesante e interactivo. El cambio de imagen flotante que le mostramos en esta guía es solo una herramienta entre muchas.
Si necesita más elementos para completar sus proyectos de creación de sitios web, consulte también nuestra guía sobre el Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para hablar de eso pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
