¿Le gustaría tener un degradado de fondo en Divi que cambia al flotar?
La creación de sitios web se trata de asegurarse de que cada detalle sea correcto. Prestar atención a los pequeños detalles de su diseño aumentará rápidamente la calidad de su Sitio web.
Con las nuevas opciones de desplazamiento de Divi, puede agregar fácilmente pequeñas interacciones en su Sitio web. Las opciones de desplazamiento se aplican a casi todos los parámetros de diseño. Puede, por ejemplo, cambiar indirectamente un fondo degradado al pasar el mouse para crear una transición agradable.
Esto es exactamente lo que le mostraremos en este tutorial. Además de realizar la transición de degradado, también crearemos un impresionante ejemplo de diseño desde cero que podrás usar libremente para cualquier tipo de Sitio web que creas.
¡Vamos!
vista
Antes de sumergirnos en el tutorial, echemos un vistazo al resultado final.
Empecemos a diseñar con Divi
Ver también: Divi: cómo crear un control deslizante de acordeón receptivo
Agregar sección # 1
espaciamiento
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 márgenes superior e inferior personalizados.
- Relleno (superior e inferior): 100px
Añadir línea 1
Estructura de la columna
Continúe agregando una nueva fila usando la siguiente estructura de columnas:
Color de fondo predeterminado (Escritorio) 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 predeterminado a la columna 1:
- Fondo (Escritorio): #e7ffa0
Color de fondo de la columna 1 al pasar el mouse
Cambie este color de fondo al pasar el mouse.
- Fondo: #00020c
Gradiente de fondo de la columna 1
También agregue un color de fondo degradado a la columna 1. Observe 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 (20%): rgba(255,255,255,0)
- Color 2 (100%): rgba(16,0,201,0.8)
- Tipo de gradiente: lineal
- Dirección del gradiente: 50 grados
Color de fondo de la columna 2
También agregue un color de fondo a la columna 2.
- Fondo: #ffffff
apresto
Luego ve a la pestaña Diseño y cambie la configuración de tamaño en la opción Guía de Tallas.
- Usar ancho de canalón personalizado: SÍ
- Ancho del canalón: 1
- Ancho: 2000px
espaciamiento
Continúe agregando valores de relleno personalizados en la configuración de espaciado.
- Relleno (superior e inferior): 0px
Espaciado (Columna 2)
- Relleno (superior e inferior): 6vw (escritorio), 120 px (tableta y teléfono)
- Relleno (izquierda y derecha): 5vw (escritorio), 80 px (tableta), 50 px (teléfono)
Shadow Box
Y también dale a la fila una sutil sombra de caja.
- Fuerza de desenfoque de sombra de cuadro: 100px
- Fuerza de propagación de la sombra del cuadro: -10px
Transiciones
Finalmente, crearemos una transición de fondo degradado suave aumentando la duración de la transición en la pestaña Avanzado.
- Duración de la transición: 1100ms
Agregue un módulo de imagen a la columna 1
Sube una imagen
¡Es hora de comenzar a agregar módulos! Agregue un módulo de imagen a la primera columna.
Fondo degradado
Vaya a la configuración de fondo de este módulo Imagen y agregue un fondo degradado. Nuevamente estamos usando un color completamente transparente para permitir que los otros colores se vean.
- Color 1 (57%): rgba (50,217,255,0.66)
- Color 2 (100%): rgba (255,255,255,0)
- Tipo de degradado: Circular
- Posición del degradado: Superior
espaciamiento
A continuación, agregue un relleno superior personalizado al módulo.
- Acolchado (Superior): 14vw
Agregar módulo de texto a la columna 2
Agregar contenido
¡Pasemos a la segunda columna! El primer módulo que necesitaremos es un módulo de texto para el título. Continúe y agregue un contenido título de elección.
Configuración del texto del encabezado
A continuación, vaya a la configuración del texto del encabezado y realice algunos cambios.
- Fuente: Abril Fatface
- Color del texto: #000000
- Tamaño del texto: 4 vw (escritorio), 60 px (tableta), 40 px (teléfono)
Agregue un segundo módulo de texto a la columna 2
Agregar contenido
El segundo módulo que necesitaremos es otro módulo de Texto. Agrega algunos contenido de elección.
Configuraciones de texto
A continuación, vaya a la configuración de texto y cambie la alineación del texto.
- Alineación de texto: Justificado
apresto
También ajuste el ancho en la configuración de tamaño.
- Ancho: 73 % (escritorio), 100 % (tableta y teléfono)
espaciamiento
Finalmente, agregue márgenes superior e inferior personalizados al módulo para crear espacios.
- Margen (superior e inferior): 2,5 vw (escritorio), 50 px (tableta y teléfono)
Agregar módulo de botón a la columna 2
Añadir una descripción
El tercer y último módulo que necesitaremos en la segunda columna es un módulo Botón. Agregue una copia de su elección.
Configuraciones de botones
Luego cambie la configuración de los botones.
- Usar estilos personalizados para el botón: SÍ
- Tamaño del texto del botón: 1,2 vw (escritorio), 14 px (tableta y teléfono)
- Color del texto del botón: #ffffff
- Paradas de gradiente 1 (0%): #9ea6ff
- Paradas de gradiente 2 (100%): rgba(16,0,201,0.8)
- Dirección: 78 grados
- Ancho del borde del botón: 0 píxeles
- Radio del borde: 30px
- Espaciado entre letras: -1px
- Peso de fuente: ultra negrita
- Estilo de fuente: TT - (Mayúsculas)
espaciamiento
También agregue valores de relleno personalizados.
- Relleno (superior e inferior): 10px
- Relleno (izquierdo y derecho): 40px
Shadow Box
Y aplica una sutil sombra de cuadro al botón.
- Fuerza de desenfoque de sombra de cuadro: 40px
Lea también: Cómo personalizar el módulo "Temporizador de cuenta regresiva" con un GIF
Agregar sección # 2
espaciamiento
Ahora que hemos completado la primera sección, pasaremos a la siguiente. Agrega una nueva sección regular usando los siguientes valores de relleno personalizados:
- Relleno (superior e inferior): 100px
Agregar una fila a dos columnas
Estructura de la columna
Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:
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:
- Fondo: #ffffff
Fondo de la columna 2 (escritorio)
Agregue el siguiente color de fondo a la columna 2.
- Fondo (Escritorio): #ffffff
Color de fondo de la columna 2 al pasar el mouse
Y cambie este color de fondo al pasar el mouse.
- Fondo (pasar el cursor): #3d02ff
fondo degradado de 2 columnas
También agregue un fondo degradado a la columna.
- Paradas de gradiente 1 (20 %): rgba (255,255,255,0 XNUMX XNUMX)
- Paradas de gradiente 2 (100%): #ff7700
apresto
A continuación, vaya a la configuración de tamaño y realice algunos cambios.
- Usar ancho de canalón personalizado: SÍ
- Ancho del canalón: 1
- Ancho: 2000px
Espaciado (Línea)
Continúe agregando valores de relleno personalizados en la configuración de espaciado.
- Relleno (superior e inferior): 0px
Espaciado (Columna 1)
Cambiar la configuración de espaciado de la columna 1
- Relleno (superior e inferior): 6vw (escritorio), 120 px (tableta y teléfono)
- Relleno (izquierda y derecha): 5vw (escritorio), 80 px (tableta), 50 px (teléfono)
Shadow Box
Y también agregue una sombra de cuadro sutil a esta fila.
- Fuerza de desenfoque de sombra de cuadro: 100px
- Fuerza de propagación de la sombra del cuadro: -10px
Transiciones
Finalmente, cree una transición suave aumentando la duración de la transición en la pestaña Avanzado.
- Duración de la transición: 1100 ms
Duplicar los módulos de la línea 1
Como ya tenemos todos los módulos que necesitamos en la sección anterior, ahorraremos tiempo clonándolos.
Coloque duplicados en las columnas de la fila 2
Y coloque los duplicados en la nueva línea de la siguiente manera:
editar contenido
Asegúrate de cambiar el contenido de sus módulos.
Cambiar el fondo degradado del botón
También cambie el gradiente de fondo del botón.
- Paradas de gradiente 0%: #ff653f
- Gradiente se detiene 100%: #0066ff
- Dirección: 39 grados
Cambiar imagen
Reemplace la imagen.
Cambiar el degradado de fondo
Finalmente, modifique el degradado de fondo del módulo Imagen.
- Paradas de gradiente 0%: rgba(0,2,12,0.66)
- Paradas de gradiente 57%: rgba(255,255,255,0)
vista
Ahora que hemos seguido todos los pasos, echemos un último vistazo al resultado final.
¡¡¡Descarga DIVI ahora!!!
Conclusión
En este artículo, le mostramos cómo cambiar un fondo degradado al pasar el mouse usando Divi. También hemos creado un gran ejemplo desde cero que utiliza este enfoque.
Eres libre de usar el diseño y las ilustraciones para cualquier tipo de sitio web que crees.
Esperamos que este tutorial lo inspire para sus próximos proyectos Divi. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
