Cómo cambiar un fondo de gradiente en el flotador con div

Crear sitios web se trata de asegurarse de que cada detalle sea correcto. Prestar atención a pequeños detalles en su diseño agregará rápidamente y aumentará la calidad de su sitio web. Con las nuevas opciones flotantes de la división, puede agregar interacciones pequeñas a su sitio web. Las opciones de viaje se aplican a casi todas las configuraciones de diseño. Puede, por ejemplo, cambiar indirectamente un fondo de gradiente en el flotador para crear una hermosa transición. Esto es exactamente lo que le mostraremos en esta publicación de blog. Además de la transición en el gradiente, también crearemos un ejemplo de un diseño sorprendente desde cero, que puede usar de forma gratuita para cualquier tipo de sitio web que cree.
¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado final en diferentes tamaños de pantalla. Estático

altísimo

Descargue ilustraciones gratuitas para obtener las ilustraciones gratuitas que provienen del paquete de videojuegos, primero deberá descargarlas usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá aún más división de bondades y un paquete Divaut gratuito todos los lunes y viernes! Si ya está en la lista, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
¡Empecemos a crear!
Suscríbase a nuestro canal de YouTube Agregar sección no. 1 Espacio de lo primero que tendrá que hacer es crear una nueva página o abrir una existente y agregar una nueva sección habitual. Abra la configuración y agregue algunos bordes personalizados en la parte superior e inferior.
Revestimiento superior: 100 px
Finamiento inferior: 100 PX
Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva fila utilizando la siguiente estructura de columna:

Columna 1 Color de fondo de pantalla predeterminado sin agregar módulos, abra la configuración de la fila y agregue el siguiente fondo predeterminado en la columna 1:

Color de fondo: # E7FFA0
Columna 1 Coloque el cursor en el fondo Cambie este color de fondo al cursor.

Color de fondo: # 00020C
Columna 1 Gradiente de fondo Agregue un color de fondo de gradiente y a la columna 1. Notará que usamos un color completamente transparente. Este color permitirá que se muestre el color de fondo, lo que a su vez cambia para una caminata.

Color 1: RGBA (255,255,255.0)
Color 2: RGBA (16,0201,0,8)
Columna 1 Tipo de gradiente: lineercoloana 1 Dirección de gradiente: 50 grados
Columna 1 Posición de inicio: 20%
Columna 2 Color de fondo Agregue un color de fondo de la columna 2.
Columna 2 Color de fondo: #ffffff

Dimensión Luego, acceda a la pestaña de diseño y cambie la configuración de tamaño.
Use ancho personalizado: sí

Unidad: PX
Ancho personalizado: 2000 PX
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
El espacio continúa agregando algunos valores de llenado personalizados a la configuración de espaciado.
SUS Lingo: 0 PX

Finamiento inferior: 0 PX
Columna 2 revestimiento superior: 6VW (escritorio), 120 px (tableta y teléfono)
Columna 2 Reinicio inferior: 6VW (escritorio), 120 px (tableta y teléfono)
Columna 2 relleno izquierdo: 5VW (escritorio), 80px (tableta), 50px (teléfono)
Columna 2 Reinicio derecho: 5VW (escritorio), 80 px (tableta), 50 px (teléfono)
Box Shadow y dale a la fila un tono de caja sutil.
Poder de poco claro de la sombra de la caja: 100 px

Poder de extender la sombra de la caja: -10px
Por último, pero no menos importante, las transiciones crearán un fondo de gradiente suave, aumentando la transición en la pestaña avanzada.
Duración de la transición: 1100 ms

Agregue el módulo de imagen a la columna 1 ¡Cargue la imagen es hora de comenzar a agregar módulos! Agregue un módulo de imagen a la primera columna y cargue el archivo “Diva-Gradient-Background-on-Illustration-1.png” que puede encontrar en la carpeta ZIP que descargó al comienzo de esta publicación.
Gradiente de fondo Acceda a la configuración de fondo de este módulo de imagen y agregue un fondo degradado. Usamos un color completamente transparente nuevamente para permitir que los otros colores se muestren.

Color 1: RGBA (50,217,255,0,66) Color 2: RGBA (255,255,255,0)

Tipo de gradiente: radial
Dirección radial: arriba
Posición final: 57%
Espacio entonces, agregue algunos rellenos personalizados al modo.
Revestimiento superior: 14VW
Agregue el módulo de texto de título en la columna 2 Agregar contenido ¡Vamos a la segunda columna! El primer módulo que necesitamos es un modo de texto. Continúe y agregue un encabezado a su elección.

Configuración Cabeza de texto Luego, acceda a la configuración de texto para el encabezado y realice algunos cambios.
Fuente del título: Abril Fatface

Text Pre -Text: # 000000

Encabezado de texto de tamaño: 4VW (escritorio), 60 px (tableta), 40 px (teléfono)
Agregue el módulo de descripción de texto en la columna 2 agrega contenido El segundo módulo que necesitamos es otro módulo de texto. Agregue un contenido a su elección.
Configuración de texto Entonces, acceda a la configuración del texto y cambie la orientación del texto.
Orientación de texto: justificar

Dimensión Ajuste el ancho y en la configuración del tamaño.


Ancho: 73% (escritorio), 100% (tableta y teléfono)
Finalmente, espaciado, agregue algunos bordes superiores e inferiores personalizados para crear espacio en blanco.

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

Agregue un módulo de botón a la columna 2 Agregue una tercera copia y el último módulo que necesitaremos en la segunda columna es un módulo de botón. Agregue una copia de su elección.
Botón de configuración y luego cambie la configuración del botón.
Use estilos personalizados para el botón: Sí

Tamaño de texto de texto: 1.2VW (escritorio), 14 px (tableta y teléfono)

El color del texto del botón: #ffffff
Color degradado 1: # 9ea6ff
Color de gradiente 2: RGBA (16,0201,0,8) Dirección de gradiente: 78 grados
El ancho del nudo del botón: 0 PX
Botón Raza: 30 PX
Distancia entre letras y botones: -1 PX
Peso de fuente: Ultra Bold
Estilo de fuente: mayúscula
Sparto Agregue algunos valores de llenado personalizados.
Revestimiento superior: 10 px
Finamiento inferior: 10 PX
Junta izquierda: 40 PX


Revestimiento derecho: 40 PX
Sombra de caja y aplique una sombra del botón sutil.
Poder de poco claro de la sombra de la caja: 40 px
Agregue el espacio de la Sección 2 ahora que hemos terminado la primera sección, iremos a la siguiente. Agregue una nueva sección habitual utilizando los siguientes valores de llenado personalizados:
Revestimiento superior: 100 px

Finamiento inferior: 100 PX
Agregue la estructura de la columna de la fila # 2 Continuar agregando una nueva línea a la sección utilizando la siguiente estructura de columnas:

Columna 1 Color de fondo sin agregar módulos, abra la configuración de la fila y agregue el siguiente color de fondo a la columna 1:
Columna 1 Color de fondo: #ffffff
Columna 2 Color de fondo predeterminado Agregue el siguiente color de fondo en la columna 2.

Columna 2 Color de fondo: #ffffff

Columna 2 Coloque el cursor en el fondo y cambie este color de fondo al cursor.
Columna 2 Color de fondo: # 3D02FFF

El fondo de gradiente de la columna 2 también agregue un fondo de gradiente a la columna.
Color 1: RGBA (255,255,255.0)

Color 2: # FF7700
Columna 2 Posición inicial: 20%

Dimensión Luego, acceda a la configuración del tamaño y realice algunos cambios.
Use ancho personalizado: sí
Unidad: PX
Ancho personalizado: 2000 PX

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Espaciado Continuar agregando valores de llenado personalizados en la configuración de espaciado. Ponente: 0 PX
Finamiento inferior: 0 PX
Columna 1 revestimiento más alto: 6VW (escritorio), 120 px (tableta y teléfono)
Columna 1 Con revestimiento inferior: 6VW (escritorio), 120 px (tableta y teléfono)

Columna 1 Roliendo izquierdo: 5VW (escritorio), 80px (tableta), 50px (teléfono)
Columna 1 Reinicio derecho: 5VW (escritorio), 80 px (tableta), 50 px (teléfono)
Box Sombra y agregue una sombra de caja sutil y esta fila.
Poder de poco claro de la sombra de la caja: 100 px
Poder de extender la sombra de la caja: -10px
Las transiciones por último, pero no menos importante, crean una transición suave al aumentar la duración de la transición en la pestaña avanzada.
Duración de la transición: 1100 ms

Duplicar los módulos de texto y el módulo de botón de fila # 1 porque ya tenemos todos los módulos que necesitamos en la sección anterior, ahorraremos tiempo clonándolos.
Coloque los duplicados en la columna 1 de la fila # 2 y coloque los duplicados en la primera columna de la nueva fila.
Cambie el contenido para asegurarse de cambiar el contenido de sus módulos.

Cambie el fondo del gradiente del botón y el fondo de gradiente del botón.
Color 1: # FF653F

Color 2: # 0066ff

Dirección de gradiente: 39 grados

Clon El módulo de imagen de la fila # 2 Clon El módulo de imagen que puede encontrar en la primera columna de la fila anterior.

Coloque los duplicados en la columna 2 de la fila # 2 y coloque el duplicado en la segunda columna de la nueva fila.
Cambie la imagen Cambie la imagen al archivo “Divi-Gradient-Background-on-Hover-ilustration-2.png” que puede encontrar en la carpeta ZIP que descargó al comienzo de esta publicación.
Cambie el fondo de gradiente No menos importante, cambie el fondo de gradiente del módulo de imagen. Color 1: RGBA (0.2,12,0,66)
Color 2: RGBA (255,255,255.0)

Posición final: 57%

Vista previa ahora, que hemos dado todos los pasos, para echar un vistazo final al resultado final en diferentes dimensiones de pantalla.Estático

altísimo

Pensamientos finales En esta publicación, le mostré cómo cambiar un fondo de gradiente sobre el flotador usando div.También creamos desde cero un ejemplo de un diseño sorprendente que utiliza este enfoque.Usted es libre de usar el diseño y las ilustraciones para cualquier tipo de sitio web que cree.Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.