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
Flotar
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
Agregar fila n. ° 1
Estructura de columna
Continúe agregando una nueva fila usando la siguiente estructura de columnas:
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
Columna 1 Color de fondo flotante
Cambie este color de fondo al pasar el mouse.
- Color de fondo: # 00020c
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%
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
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
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)
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
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
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
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%
Espaciado
Luego, agregue un poco de relleno superior personalizado al módulo.
- Acolchado superior: 14vw
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.
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)
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.
Configuración de texto
Luego, vaya a la configuración de texto y cambie la orientación del texto.
- Orientación del texto: justificar
Dimensionamiento
Ajuste el ancho en la configuración de tamaño también.
- Ancho: 73% (escritorio), 100% (tableta y teléfono)
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)
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.
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
Espaciado
Agregue también algunos valores de relleno personalizados.
- Acolchado superior: 10px
- Acolchado inferior: 10px
- Relleno izquierdo: 40px
- Relleno derecho: 40px
Sombra de la caja
Y aplique una sombra de caja sutil al botón.
- Fuerza de desenfoque de sombra de caja: 40px
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
Agregar fila n. ° 2
Estructura de columna
Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:
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
Columna 2 Color de fondo predeterminado
Agregue el siguiente color de fondo a la columna 2.
- Color de fondo de la columna 2: #ffffff
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 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%
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
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)
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
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
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.
Coloque duplicados en la columna 1 de la fila 2
Y colocando los duplicados en la primera columna de la nueva fila.
Cambiar contenido
Asegúrese de cambiar el contenido de sus módulos.
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
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.
Coloque el duplicado en la columna 2 de la fila 2
Y coloque el duplicado en la segunda columna de la nueva fila.
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.
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%
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado final en diferentes tamaños de pantalla.
Estático
Flotar
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!