Puedes jugar fácilmente opciones de sobrevuelo ofrecidas por Divi. Se llama "Hover" Webdesign... Por ejemplo, uno puede hacer un zoom sobre la imagen como habíamos visto en un tutorial anterior. Puedes cambiar el color de un texto o fondo... Pero hoy te mostraré cómo cambiar una imagen sobre el ratón.
- Dificultad: cero!
Duración: tiempo para un café!
1 – ¿Qué es "hover" o "mice fly"?
¿Es realmente necesario explicar lo que es HOVER? Si usted es un rediseño, usted sabe y maestro ... Pero si vienes directamente de la edad del hielo, aquí tienes una pequeña definición:
El "Hover" o "Mouse Overflight" es el acto de mostrar un estado o estado diferente a un elemento cuando el usuario de Internet pasa el ratón sobre él.
Es muy común crear diseños originales: cambiar el color, cambiar el tamaño, cambiar la posición, etc.
¿Lo sabías? Puedes probar Divi gratis visitando en esta página y haciendo clic en "Pruébalo GRATIS"
2 - Cambiar una imagen en el flyover en 3 clics
La ventaja es que Divi ofrece opciones de sobrevuelo en cada módulo y el Módulo de imagen ¡No te apartes de la regla, por supuesto!
Entonces, ¿alguna vez has pensado en cambiar una imagen cuadrada cuando pasas el ratón? Es posible y es muy fácil:
- Añade un módulo de imagen dentro de tu diseño con Visual Builder
- Importe su primera imagen, se llamará imagen "A"
- Activar la opción de arrastre haciendo clic en el icono de flecha.
- Seleccione Tapa de palanca (Flotter tab), Traducción errónea) e importar su segunda imagen, imagen "B".
¡Eso es!
Nada más simple, ¿no?
No dude en comprobar ambas pestañas (pista de tinta y pestaña de flicker) para comprobar que ambas imágenes están en los lugares correctos.
3 – Consejos para un efecto exitoso
Usted notará que para que el efecto sea exitoso, es mejor utilizar dos imágenes que se superponen perfectamente.
Por mi ejemplo, dupliqué la misma imagen dos veces y luego cambié el color y añadí elementos gráficos. Hice esto usando dos programas de software:
- Affinity Photo para convertir la imagen y cambiar el color
- Affinity Designer añadir elementos gráficos
Como explico en el siguiente video, tomó más tiempo hacer estas imágenes que integrarlas en Divi.
Esto nos recuerda que un buen diseño y buen diseño del sitio no confía exclusivamente en la técnica para crear el sitio... Por el contrario: su contenido – sus textos y sus imágenes – hará toda la diferencia! Entonces, Divi te permitirá integrarlos fácilmente...
4 - Cambiar imagen sobre el ratón: el tutorial en vídeo
Aquí está el pequeño video recap... Como es un tutorial muy corto de Divi, tomé la oportunidad de añadir, como un bono, el diseño de estas dos imágenes al final del vídeo... Así que si tienes curiosidad, ¡mira todo el video!
¡No te demores! Descubre el tema Divi aquí. !
5 - Opciones de sobrevuelo disponibles en todos los módulos Divi
Como recordatorio, Las opciones de sobrevuelo están disponibles en cada módulo Divi! Simplemente pase el ratón junto al título del módulo para ver el iconos de buceadores y otras opciones... Así que no dudes en usarlo!
Además, también está en este lugar que puede activar el icono del teléfono que le permite mango pixel cerca de respuesta de cada módulo. Nunca lo repetiré lo suficiente: mira bien, todas las opciones están ahí, delante de tus ojos,
Quieres personalizar ¿Divi como profesional? Descubre todos los tutoriales!
6 - Para ir más lejos
Para ir más lejos con la función Hover de Divi, aquí hay una pequeña lista de tutoriales:
- Otra forma de cambiar imagen sobrevuelo
- Cómo desplazar una imagen sobre el ratón
- Cómo añadir un efecto inclinado a la escala de vuelo (Wow, me encanta!)
- Cómo mostrar el resumen de un artículo sobre el volante
- ¿Cómo crear un efecto zoom sobre una imagen con un texto clicable arriba?
- ¿Cómo sustituyo el logotipo de un cliente con el testimonio de un cliente en el ratón?
12 Comentarios