Cómo cambiar un fondo degradado al pasar el mouse con Divi


Crear sitios web se trata de asegurarse de que todos los detalles sean correctos. Prestar atención a los pequeños detalles de su diseño se sumará rápidamente y elevará la calidad de su sitio web. Con las nuevas opciones de desplazamiento del cursor de Divi, puede agregar pequeñas interacciones en su sitio web sin esfuerzo. Las opciones de desplazamiento se aplican a casi todas las configuraciones de diseño. Puede, por ejemplo, cambiar indirectamente un fondo degradado al pasar el mouse para crear una transición agradable. Eso es exactamente lo que le mostraremos en esta publicación de blog. Además de lograr la transición de degradado, también crearemos un impresionante ejemplo de diseño desde cero que puede usar para cualquier tipo de sitio web que cree.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado final en diferentes tamaños de pantalla.

Estático

fondo degradado al pasar el mouse

Flotar

fondo degradado al pasar el mouse

Descarga las ilustraciones GRATIS

Para poner sus manos sobre las ilustraciones gratuitas que se originan en el Paquete de diseño de videojuegos, primero deberá descargarlos usando el botón de abajo. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes y viernes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

¡Empecemos a crear!

(incrustar) https://www.youtube.com/watch?v=-O6w6MrZF-Q (/ incrustar)

Suscríbete a nuestro canal de Youtube

Agregar sección # 1

Espaciado

Lo primero que deberá hacer es crear una nueva página o abrir una existente y agregarle una nueva sección regular. Abra la configuración y agregue algunos márgenes superior e inferior personalizados.

  • Relleno superior: 100 px
  • Acolchado inferior: 100px

fondo degradado al pasar el mouse

Agregar fila n. ° 1

Estructura de columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

fondo degradado al pasar el mouse

Columna 1 Color de fondo predeterminado

Sin agregar ningún módulo todavía, abra la configuración de la fila y agregue el siguiente color de fondo predeterminado a la columna 1:

  • Color de fondo: # e7ffa0

fondo degradado al pasar el mouse

Columna 1 Color de fondo flotante

Cambie este color de fondo al pasar el mouse.

  • Color de fondo: # 00020c

fondo degradado al pasar el mouse

Columna 1 Fondo degradado

Agregue un color de fondo degradado a la columna 1 también. Notarás que estamos usando un color completamente transparente. Este color permitirá que se vea el color de fondo, que a su vez cambia al pasar el mouse.

  • Color 1: rgba (255,255,255,0)
  • Color 2: rgba (16,0,201,0.8)
  • Columna 1 Tipo de degradado: lineal
  • Columna 1 Dirección de gradiente: 50 grados
  • Posición inicial de la columna 1: 20%

fondo degradado al pasar el mouse

Color de fondo de la columna 2

Agrega también un color de fondo para la columna 2.

  • Color de fondo de la columna 2: #ffffff

fondo degradado al pasar el mouse

Dimensionamiento

Luego, vaya a la pestaña de diseño y cambie la configuración de tamaño.

  • Usar ancho personalizado: Sí
  • Unidad: PX
  • Ancho personalizado: 2000px
  • Usar ancho de canalón personalizado: Sí
  • Ancho del canal: 1

fondo degradado al pasar el mouse

Espaciado

Continúe agregando algunos valores de relleno personalizados en la configuración de espaciado.

  • Relleno superior: 0px
  • Acolchado inferior: 0px
  • Relleno superior de la columna 2: 6vw (escritorio), 120px (tableta y teléfono)
  • Acolchado inferior de la columna 2: 6vw (escritorio), 120px (tableta y teléfono)
  • Columna 2 Relleno izquierdo: 5vw (escritorio), 80px (tableta), 50px (teléfono)
  • Relleno derecho de la columna 2: 5vw (escritorio), 80px (tableta), 50px (teléfono)

fondo degradado al pasar el mouse

Sombra de la caja

Y también dale a la fila una sutil sombra de caja.

  • Fuerza de desenfoque de sombra de caja: 100px
  • Fuerza de propagación de la sombra de caja: -10px

fondo degradado al pasar el mouse

Transiciones

Por último, pero no menos importante, vamos a crear una transición de fondo degradado suave aumentando la duración de la transición en la pestaña avanzada.

  • Duración de la transición: 1100ms

fondo degradado al pasar el mouse

Agregar módulo de imagen a la columna 1

Cargar imagen

¡Es hora de comenzar a agregar módulos! Agregue un módulo de imagen a la primera columna y cargue el "divi-gradient-background-on-hover-illustration-1.png"Archivo que puedes encontrar en la carpeta comprimida que descargaste al principio de esta publicación.

fondo degradado al pasar el mouse

Fondo degradado

Vaya a la configuración de fondo de este módulo de imagen y agregue un fondo degradado. De nuevo estamos usando un color completamente transparente para permitir que los otros colores se vean.

  • Color 1: rgba (50,217,255,0.66)
  • Color 2: rgba (255,255,255,0)
  • Tipo de degradado: radial
  • Dirección radial: superior
  • Posición final: 57%

fondo degradado al pasar el mouse

Espaciado

Luego, agregue un poco de relleno superior personalizado al módulo.

  • Acolchado superior: 14vw

fondo degradado al pasar el mouse

Agregar módulo de texto de título a la columna 2

Agregar contenido

¡A la segunda columna! El primer módulo que necesitaremos es un título Módulo de texto. Continúe y agregue algún contenido de encabezado de su elección.

fondo degradado al pasar el mouse

Configuración del texto del encabezado

Luego, vaya a la configuración del texto del encabezado y realice algunos cambios.

  • Fuente de encabezado: Abril Fatface
  • Color del texto del título: # 000000
  • Tamaño del texto del encabezado: 4vw (escritorio), 60px (tableta), 40px (teléfono)

fondo degradado al pasar el mouse

Agregar módulo de texto descriptivo a la columna 2

Agregar contenido

El segundo módulo que necesitaremos es otro módulo de texto. Agregue algún contenido de su elección.

fondo degradado al pasar el mouse

Configuración de texto

Luego, vaya a la configuración de texto y cambie la orientación del texto.

  • Orientación del texto: justificar

fondo degradado al pasar el mouse

Dimensionamiento

Ajuste el ancho en la configuración de tamaño también.

  • Ancho: 73% (escritorio), 100% (tableta y teléfono)

fondo degradado al pasar el mouse

Espaciado

Por último, agregue un margen superior e inferior personalizado al módulo para crear espacios en blanco.

  • Margen superior: 2.5vw (escritorio), 50px (tableta y teléfono)
  • Margen inferior: 2.5vw (escritorio), 50px (tableta y teléfono)

fondo degradado al pasar el mouse

Agregar módulo de botones a la columna 2

Agregar copia

El tercer y último módulo que necesitaremos en la segunda columna es un módulo de botones. Agregue una copia de su elección.

fondo degradado al pasar el mouse

Configuración de botones

A continuación, modifique la configuración del botón.

  • Usar estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 1.2vw (escritorio), 14px (tableta y teléfono)
  • Color del texto del botón: #ffffff
  • Color de degradado 1: # 9ea6ff
  • Color de degradado 2: rgba (16,0,201,0.8)
  • Dirección del gradiente: 78 grados
  • Ancho del borde del botón: 0px
  • Radio del borde del botón: 30 px
  • Espacio entre letras del botón: -1px
  • Peso de fuente: Ultra Bold
  • Estilo de fuente: mayúsculas

fondo degradado al pasar el mouse

fondo degradado al pasar el mouse

Espaciado

Agregue también algunos valores de relleno personalizados.

  • Acolchado superior: 10px
  • Acolchado inferior: 10px
  • Relleno izquierdo: 40px
  • Relleno derecho: 40px

fondo degradado al pasar el mouse

Sombra de la caja

Y aplique una sombra de caja sutil al botón.

  • Fuerza de desenfoque de sombra de caja: 40px

fondo degradado al pasar el mouse

Agregar sección n. ° 2

Espaciado

Ahora que hemos terminado la primera sección, pasaremos a la siguiente. Agregue una nueva sección regular utilizando los siguientes valores de relleno personalizados:

  • Relleno superior: 100 px
  • Acolchado inferior: 100px

fondo degradado al pasar el mouse

Agregar fila n. ° 2

Estructura de columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

fondo degradado al pasar el mouse

Color de fondo de la columna 1

Sin agregar ningún módulo todavía, abra la configuración de la fila y agregue el siguiente color de fondo a la columna 1:

  • Color de fondo de la columna 1: #ffffff

fondo degradado al pasar el mouse

Columna 2 Color de fondo predeterminado

Agregue el siguiente color de fondo a la columna 2.

  • Color de fondo de la columna 2: #ffffff

fondo degradado al pasar el mouse

Columna 2 Color de fondo de desplazamiento

Y cambie este color de fondo al pasar el mouse.

  • Color de fondo de la columna 2: # 3d02ff

fondo degradado al pasar el mouse

Fondo degradado de la columna 2

Añade también un fondo degradado a la columna.

  • Color 1: rgba (255,255,255,0)
  • Color 2: # ff7700
  • Posición inicial de la columna 2: 20%

fondo degradado al pasar el mouse

Dimensionamiento

Luego, vaya a la configuración de tamaño y realice algunos cambios.

  • Usar ancho personalizado: Sí
  • Unidad: PX
  • Ancho personalizado: 2000px
  • Usar ancho de canalón personalizado: Sí
  • Ancho del canal: 1

fondo degradado al pasar el mouse

Espaciado

Continúe agregando valores de relleno personalizados en la configuración de espaciado.

  • Relleno superior: 0px
  • Acolchado inferior: 0px
  • Relleno superior de la columna 1: 6vw (escritorio), 120px (tableta y teléfono)
  • Acolchado inferior de la columna 1: 6vw (escritorio), 120px (tableta y teléfono)
  • Columna 1 Relleno izquierdo: 5vw (escritorio), 80px (tableta), 50px (teléfono)
  • Relleno derecho de la columna 1: 5vw (escritorio), 80px (tableta), 50px (teléfono)

fondo degradado al pasar el mouse

Sombra de la caja

Y agregue una sombra de caja sutil a esta fila también.

  • Fuerza de desenfoque de sombra de caja: 100px
  • Fuerza de propagación de la sombra de caja: -10px

fondo degradado al pasar el mouse

Transiciones

Por último, pero no menos importante, cree una transición suave aumentando la duración de la transición en la pestaña avanzada.

  • Duración de la transición: 1100ms

fondo degradado al pasar el mouse

Módulos de texto duplicados y módulo de botones de la fila n. ° 1

Como ya tenemos todos los módulos que necesitamos en la sección anterior, vamos a ahorrar tiempo al clonarlos.

fondo degradado al pasar el mouse

Coloque duplicados en la columna 1 de la fila 2

Y colocando los duplicados en la primera columna de la nueva fila.

fondo degradado al pasar el mouse

Cambiar contenido

Asegúrese de cambiar el contenido de sus módulos.

fondo degradado al pasar el mouse

Cambiar fondo degradado del botón

Cambie también el fondo degradado del botón.

  • Color 1: # ff653f
  • Color 2: # 0066ff
  • Dirección del gradiente: 39 grados

fondo degradado al pasar el mouse

Módulo de imagen de clonación de la fila n. ° 2

Clone el Módulo de imagen que también puede encontrar en la primera columna de la fila anterior.

fondo degradado al pasar el mouse

Coloque el duplicado en la columna 2 de la fila 2

Y coloque el duplicado en la segunda columna de la nueva fila.

fondo degradado al pasar el mouse

Cambiar imagen

Cambie la imagen a "divi-gradient-background-on-hover-illustration-2.png"Archivo que puede encontrar en la carpeta comprimida que ha descargado al principio de esta publicación.

fondo degradado al pasar el mouse

Cambiar fondo degradado

Por último, pero no menos importante, cambie el fondo degradado del Módulo de imagen.

  • Color 1: rgba (0,2,12,0.66)
  • Color 2: rgba (255,255,255,0)
  • Posición final: 57%

fondo degradado al pasar el mouse

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado final en diferentes tamaños de pantalla.

Estático

Flotar

fondo degradado al pasar el mouse

Pensamientos finales

En esta publicación, le mostramos cómo cambiar un fondo degradado al pasar el mouse usando Divi. También hemos creado un impresionante ejemplo de diseño desde cero que utiliza este enfoque. Eres libre de usar el diseño y las ilustraciones para cualquier tipo de sitio web que estés creando. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!