Cómo crear hermosos fondos de gradiente Coloca las transiciones con la división

Recientemente, se han agregado algunas opciones adicionales de desplazamiento al Divin, lo que le permite crear efectos aún más interesantes sin tener que alcanzar una sola línea de código. Ahora, por ejemplo, puede crear transiciones sorprendentes en segundo plano. Al combinar gradientes de columna, fila y sección, puede hacer modelos únicos. En este tutorial, le mostraremos exactamente cómo hacer esto. Comenzaremos a través de pasos generales. Una vez que haya terminado, nos centraremos en tres ejemplos de diseño individual. ¡También podrá descargar el archivo JSON de forma gratuita! Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido a los tres ejemplos diferentes que recrearemos durante este tutorial.
Ejemplo no. 1

Ejemplo no. 2

Ejemplo no. 3

Descargue las secciones gratuitas de héroe suscribirse a nuestro canal de YouTube para poner su mano en estos héroes gratuitos, 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á más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de 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!
Pasos generales Agregue una nueva sección para comenzar pasando por pasos generales. Agregue una nueva sección a la página donde trabaja y elimine todos los rellenos predeterminados. Eliminar todo el revestimiento superior e inferior nos ayudará a combinar fondos de gradiente para columnas, filas y secciones.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:

Dimensión sin agregar módulos, abra la configuración de la fila y permita que la fila ocupe todo el ancho del contenedor de sección.

Ancho: 100%
Ancho máximo: 100%
Cambio de espaciado a la configuración de espaciado y elimine todos los rellenos predeterminados e inferiores.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Agregue el módulo de texto no. 1 En la columna, agregue el contenido H1, comencemos a agregar módulos! El primero que necesitamos es un módulo de texto con un contenido H1.

Configuración de texto H1 Cambiar a la pestaña Diseño y cambiar la configuración de texto H1 en consecuencia:

Título de la fuente: Montserrat
Alineación del texto del encabezado: Centrucare Text Header: # 000000
Encabezado de texto de tamaño: 3VW (escritorio), 6VW (tableta y teléfono)
Distancia entre letras: 0.7VW
Dimensión luego abra la configuración de tamaño y cambie el ancho junto con la alineación del módulo.
Ancho: 48% (escritorio), 60% (tableta y teléfono)

Alineación del módulo: centro
El espacio completa el diseño del módulo agregando un margen más alto.
Margen superior: 10 VW

¡Agregue el módulo Divisor al módulo de visibilidad de la columna al siguiente módulo! Agregue un módulo divisor y asegúrese de que la opción “Pantalla” esté activada.
Divisor del espectáculo: si

La línea cambia el color de la línea aún más.
Color de línea: # 000000

Dimension Switch a la configuración del tamaño y aplique la siguiente configuración:
Peso del divisor: 0.1VW

Ancho: 10% (escritorio), 16% (tableta), 25% (teléfono)
Alineación del módulo: centro
Espaciado Agregue algunos valores de llenado personalizados en diferentes tamaños de pantalla.
Revelaje superior: 2VW (escritorio), 4VW (tableta), 6VW (teléfono)

Bajo forro: 2VW (escritorio), 4VW (tableta), 6VW (teléfono)
Agregue el módulo de texto no. 2 En la columna, agregue el contenido, moverse al siguiente módulo, que es otro módulo de texto. Agregue un contenido de párrafo de su elección.
Configuración de texto Vaya a la pestaña Diseño y cambie la configuración de texto en consecuencia:

Texto de fuente: Abrir sans

Alineación de texto: justificar
La altura de la línea de texto: 2.3em
Dimensión Cambiar el ancho y la alineación del módulo en la configuración de tamaño a continuación:
Ancho: 30% (escritorio), 54% (tableta), 70% (teléfono)

Alineación del módulo: centro
Agregue un módulo de botón a la columna Agregue una copia a continuación y el último módulo que necesitamos en la columna es un módulo de botón. Agregue una copia de su elección. Alineación Vaya a la pestaña Diseño y cambie la alineación del botón.
Alineación de botones: centro

Configuración Modificar la configuración del botón y el botón.

Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 0.8VW (escritorio), 2VW (tableta), 2.8VW (teléfono)

El color del texto del botón: # 000000
El ancho del nudo del botón: 1 PX
Botón Raza: 1 PX
Botón de fuente: Montserrat
Espacio y agregue algunos valores de espaciado personalizados en diferentes tamaños de pantalla.
Margen superior: 2VW (escritorio), 8VW (tableta y teléfono)
Margen inferior: 10 VW



Revelaje superior: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)
Bajo forro: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)
ENLIZACIÓN IZQUIERDA: 3VW (escritorio), 6VW (tableta), 8VW (teléfono)
Revestimiento derecho: 3VW (escritorio), 6VW (tableta), 8VW (teléfono)
Clonar la sección dos veces Después de haber completado la sección, puede clonar dos veces; uno para cada ejemplo.
Recree la transición a los antecedentes del gradiente no. 1
¡Sección de fondo de gradiente predeterminada para comenzar a crear la primera transición de vuelo! Abra la configuración de la sección y agregue el siguiente fondo de gradiente predeterminado:

Color 1: # d1d1ff

Color 2: # F7F7F7

Dirección de gradiente: 90 grados
Posición inicial: 50%
Posición final: 50%
Coloque el cursor contra el fondo del jardín Cambie el fondo de gradiente al cursor.
Color 1: # F7F7F7
Color 2: # FFC1C7

Dirección de gradiente: 90 grados
Posición inicial: 50%
Posición final: 50%
Fondo de gradiente predeterminado luego abra la configuración de la fila y aplique la siguiente configuración de fondo de gradiente predeterminada: Color 1: # 7032FF
Color 2: RGBA (255,255,255.0)
Dirección de gradiente: 90 grados

Posición inicial: 10%
Posición final: 10%
Coloque el cursor contra el fondo del jardín Cambie el fondo de gradiente al cursor.
Color 1: RGBA (255,255,255.0)
Color 2: # FF324A
Dirección de gradiente: 90 grados

Posición inicial: 90%
Posición final: 90%
Recree la transición del fondo de gradiente no. 2
¡Fondo de gradiente predeterminado, pasamos al segundo ejemplo! Abra la configuración de la sección y agregue el siguiente fondo de gradiente:
Color 1: # F7F7F7
Color 2: #ECEAFF

Dirección de gradiente: 156 grados

Posición inicial: 50%
Posición final: 50%
Coloque el cursor en el fondo del jardín Agregue un fondo de gradiente diferente al cursor:
Color 1: #ffeaec
Color 2: # F7F7F7
Dirección de gradiente: 204 grados

Posición inicial: 50%
Posición final: 50%
Fondo de gradiente predeterminado luego abra la configuración de línea y aplique la siguiente configuración de fondo de gradiente:
Color 1: # A932FFF
Color 2: RGBA (255,255,255.0)
Tipo de gradiente: radial

Dirección radial: abajo a la izquierda
Posición inicial: 14%
Posición final: 14%
Coloque el cursor contra el fondo del jardín Cambie el fondo de gradiente en la carrera de la manera adecuada:
Color 1: # FF324A
Color 2: RGBA (255,255,255.0)
Tipo de gradiente: radial

Dirección radial: superior izquierda
Posición inicial: 14%
Posición final: 14%
Enfundación de gradiente predeterminada interruptor de columna de columna a la configuración de la columna y agregue el siguiente fondo de gradiente:
Color 1: # A932FFF
Color 2: RGBA (255,255,255.0)
Tipo de gradiente: radial radial: derecha a la derecha

Posición inicial: 14%
Posición final: 14%
Coloque el cursor contra el fondo del jardín Cambie el fondo de gradiente al cursor:
Color 1: # FF324A
Color 2: RGBA (255,255,255.0)
Tipo de gradiente: radial
Dirección radial: hacia abajo a la derecha

Posición inicial: 14%
Posición final: 14%
Recrea la transición del cursor de fondo de gradiente # 3
Antecedentes de gradiente predeterminados pasamos al siguiente y último ejemplo! Abra la configuración de la sección y aplique el siguiente fondo de gradiente:
Color 1: # FFC1C7
Color 2: #ffffff
Tipo de gradiente: radial

Dirección radial: arriba

Posición inicial: 45%
Posición final: 45%
Coloque el cursor contra el fondo del jardín Cambie el fondo de gradiente de la sección al cursor.
Color 1: # FFC1C7
Color 2: #ffffff
Tipo de gradiente: radial
Dirección radial: izquierda

Posición inicial: 20%
Posición final: 20%
Fondo de gradiente predeterminado Abra la configuración de la fila y agregue el siguiente fondo de gradiente:
Color 1: # d3dfff
Color 2: RGBA (255,255,255.0)
Tipo de gradiente: radial
Dirección radial: abajo

Posición inicial: 45%
Posición final: 45%
Coloque el cursor contra el fondo del jardín Cambie el fondo de gradiente en consecuencia:
Color 1: # d3dfff
Color 2: RGBA (255,255,255.0)
Tipo de gradiente: radial
Dirección radial: derecha

Posición inicial: 20%
Posición final: 20%
La columna de fondo de gradiente predeterminada por último, pero no menos importante, agregue un fondo de gradiente de columna y ¡termine!
Color 1: # F7F7F7
Color 2: RGBA (255,255,255.0)
Tipo de gradiente: radial
Dirección radial: centro

Posición inicial: 41%
Posición final: 41%
Vista previa ahora, que hemos dado todos los pasos, para echar un vistazo final al resultado de los tres ejemplos que hemos recreado en este tutorial. Ejemplo no. 1exemplul no. 2
Ejemplo no. 3
Pensamientos finales En esta publicación, le he mostrado cómo usar las opciones de fondo adicionales para el gradiente de la división para crear hermosas transiciones de cruce solo con las opciones de división incorporadas. Comencé con algunos pasos generales y seguí recreando cada uno de los tres ejemplos. Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación. Si está ansioso por obtener más información sobre Divi y obtener más regalos de la Divicidad, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.