La creación de sitios web se trata de asegurarse de que cada detalle sea correcto. Prestar atención a los pequeños detalles en su diseño se sumará rápidamente y elevará la calidad de su sitio web. Con Divi y sus nuevas opciones de desplazamiento, puede agregar sin esfuerzo pequeñas interacciones en su sitio web. 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 libremente para cualquier tipo de sitio web que construya.
¡Hagámoslo!
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 en las ilustraciones gratuitas que se originan en el paquete de diseño de videojuegos , primero deberá descargarlas usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondades de Divi y un paquete de 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
¡Comencemos a crear!
Suscríbete a nuestro canal de Youtube
Añadir 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 un margen superior e inferior personalizado.
- Relleno superior: 100px
- Relleno inferior: 100px
Añadir Fila #1
Estructura de la 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
Color de fondo de la columna 1
Cambie este color de fondo al pasar el mouse.
- Color de fondo: #00020c
Fondo degradado de la columna 1
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 por encima.
- Color 1: rgba(255.255.255,0)
- Color 2: rgba(16,0,201,0.8)
- Columna 1 Tipo de gradiente: Lineal
- Dirección del gradiente de la columna 1: 50 grados
- Columna 1 Posición inicial: 20%
Color de fondo de la columna 2
Agregue también un color de fondo de 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ón: 1
Espaciado
Continúe agregando algunos valores de relleno personalizados en la configuración de espaciado.
- Relleno superior: 0px
- Relleno inferior: 0px
- Relleno superior de la columna 2: 6vw (escritorio), 120 px (tableta y teléfono)
- Relleno inferior de la columna 2: 6vw (escritorio), 120 px (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 dale a la fila una sutil sombra de caja también.
- Fuerza de desenfoque de sombra de cuadro: 100px
- Fuerza de propagación de la sombra del cuadro: -10px
Transiciones
Por último, pero no menos importante, vamos a crear una transición de fondo de 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 archivo ‘ divi-gradient-background-on-hover-illustration-1.png ‘ que puede encontrar en la carpeta comprimida que descargó al comienzo de esta publicación.
Fondo degradado
Vaya a la configuración de fondo de este módulo de imagen y agregue un fondo degradado. Nuevamente 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 gradiente: 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 por la segunda columna! El primer módulo que necesitaremos es un módulo de texto de título. Continúe y agregue el contenido de encabezado de su elección.
Ajustes de texto de encabezado
Luego, vaya a la configuración del texto del encabezado y realice algunos cambios.
- Fuente del encabezado: Abril Fatface
- Color del texto del encabezado: #000000
- Tamaño del texto del encabezado: 4vw (escritorio), 60 px (tableta), 40 px (teléfono)
Agregue el módulo de texto de descripción 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 copia
El tercer y último módulo que necesitaremos en la segunda columna es un módulo de botones. Agregue alguna copia de su elección.
Configuración de botones
Modifique la configuración del botón a continuació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 degradado 1: #9ea6ff
- Color 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: 30px
- Espaciado entre letras de botones: -1 px
- Peso de fuente: ultra negrita
- Estilo de fuente: Mayúsculas
Espaciado
Agregue también algunos valores de relleno personalizados.
- Relleno superior: 10px
- Relleno inferior: 10px
- Relleno izquierdo: 40px
- Relleno derecho: 40px
Sombra de la caja
Y aplica una sutil sombra de cuadro al botón.
- Fuerza de desenfoque de sombra de cuadro: 40px
Añadir Sección #2
Espaciado
Ahora que hemos terminado la primera sección, pasaremos a la siguiente. Agrega una nueva sección regular usando los siguientes valores de relleno personalizados:
- Relleno superior: 100px
- Relleno inferior: 100px
Añadir Fila #2
Estructura de la columna
Continúe agregando una nueva fila a la sección utilizando 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
Color de fondo de la columna 2
Y cambie este color de fondo al pasar el mouse.
- Color de fondo de la columna 2: #3d02ff
Fondo degradado de la columna 2
Agregue un fondo degradado a la columna también.
- Color 1: rgba(255.255.255,0)
- Color 2: #ff7700
- Columna 2 Posición inicial: 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ón: 1
Espaciado
Continúe agregando valores de relleno personalizados en la configuración de espaciado.
- Relleno superior: 0px
- Relleno inferior: 0px
- Relleno superior de la columna 1: 6vw (escritorio), 120 px (tableta y teléfono)
- Relleno inferior de la columna 1: 6vw (escritorio), 120 px (tableta y teléfono)
- Relleno izquierdo de la columna 1: 5vw (escritorio), 80px (tableta), 50px (teléfono)
- Columna 1 Relleno derecho: 5vw (Escritorio), 80px (Tableta), 50px (Teléfono)
Sombra de la caja
Y agregue una sombra de cuadro sutil a esta fila también.
- Fuerza de desenfoque de sombra de cuadro: 100px
- Fuerza de propagación de la sombra del cuadro: -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
Como ya tenemos todos los módulos que necesitamos en la sección anterior, vamos a ahorrar tiempo clonándolos.
Coloque duplicados en la columna 1 de la fila n.º 2
Y colocando los duplicados en la primera columna de la nueva fila.
Cambiar contenido
Asegúrate de cambiar el contenido de tus módulos.
Cambiar fondo de degradado de 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 clonada 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 n.º 2
Y coloque el duplicado en la segunda columna de la nueva fila.
Cambiar imagen
Cambie la imagen al archivo ‘ divi-gradient-background-on-hover-illustration-2.png ‘ que puede encontrar en la carpeta comprimida que descargó al comienzo 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 construyendo. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!