Cómo diseñar un fondo con dos capas de degradación, máscaras y patrones en la división

Si desea crear un fondo creativo para su sitio, Div tiene algunas opciones de diseño fuertes para explorar. Ya le hemos mostrado cómo combinar las degradaciones de fondo, las máscaras y los patrones de DIV utilizando opciones de fondo para una sola sección. Pero hoy vamos más allá de los límites del diseño de fondo. En este tutorial, le mostraremos cómo diseñar fondos con dos capas de degrades, máscaras y modelos en el Div. Esto duplica el número de opciones de fondo para un solo diseño de fondo. Y con todas esas capas de diseño opcionales, las posibles combinaciones de diseño crecen exponencialmente.
En esta publicación le mostraremos cómo diseñar un fondo con: – Dos máscaras (una en cada lado) – Dos gradientes avanzados superpuestos – Dos modelos que se combinan con el diseño adicional, demostraremos lo fácil y divertido que puede ser cambiar El diseño de las combinaciones con unos pocos clics simples. ¡Vamos a divertirnos! Suscríbase a nuestro canal de YouTube que mira el adelanto aquí hay algunos ejemplos de modelos que podemos construir usando este tutorial.


El concepto

El concepto de este diseño es bastante simple. Comenzamos con una sección que tiene las opciones de diseño de fondo construidas de la división (gradiente, máscaras, modelos, etc.). Luego creamos una fila que se coloca para cubrir completamente la sección (como una superposición). Debido a que una fila de división también tiene las mismas opciones de diseño de fondo construidas, ahora tenemos dos capas (sección y fila) de opciones de fondo para diseñar un fondo para nuestro contenido.
Descargue el aspecto gratuito para poner su mano en el diseño del aspecto de este tutorial, primero tendrá que descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico diaria utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá aún más división de amabilidad y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar. No será “read” y no recibirá correos electrónicos adicionales. Determine los archivos
Descargue gratis únase al boletín de Divin y le enviaremos una copia del paquete de diseño de la página de buceo, además de muchos otros recursos, consejos y consejos de forma gratuita. Sigue a ti mismo y te convertirás en una división maestra en el menor tiempo. Si ya está suscrito, ingrese su correo electrónico a continuación y haga clic en Descargar para acceder al paquete de diseño.

Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a Div Free Weekly Layout Div!
Para importar la aparición de la sección en la Biblioteca de la Divica, proceda de la siguiente manera:
Navegue a la biblioteca de la Divic.
Haga clic en el botón Importar en la parte superior de la página.
En la ventana de portabilidad emergente, seleccione la pestaña Importar
Elija el archivo descargado de su computadora (asegúrese de interrumpir primero el archivo y use el archivo JSON).
Luego haga clic en el botón Importar.
Una vez terminado, el aspecto de la sección estará disponible en Divi Builder.

Pasemos al tutorial, ¿sí? ¿Qué necesita para comenzar a comenzar? Deberá hacer lo siguiente:
Si aún no lo ha hecho, instale y active el tema de Div.
Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (generador visual).
Elija la opción “Construir desde cero”.
¡Ahora tienes un lienzo vacío para comenzar a diseñar en la división!
Cómo diseñar un fondo con dos capas de degrades, máscaras y modelos agregan filas a la sección para iniciar cosas, agregue una sola columna a la sección existente en el generador. Esta fila eventualmente se convertirá en la segunda capa de diseño de fondo.

Luego duplique el giro que acaba de crear. Este segundo (duplicado) se utilizará para nuestro contenido, como lo haría normalmente. Ahora debe tener una fila superior para la capa de fondo adicional y una fila para el contenido habitual.

Volveremos en línea más tarde. Por ahora, comenzaremos a diseñar la primera capa de nuestro diseño de fondo utilizando la sección. Agregue espaciado vertical a la sección para nuestro diseño de fondo para llenar el navegador, debemos agregar una altura vertical a la sección. Una manera fácil de hacerlo es agregar un valor mínimo de la altura de la sección.

Abra la configuración de la sección. En la pestaña de diseño, actualice la altura y el relleno de la siguiente manera:
Altura mínima: 70 VH
Llenado: 0px arriba, 0px abajo
Cree el diseño de fondo de la sección (la primera capa) ahora que tenemos la altura de la sección en su lugar, tenemos nuestro lienzo para crear nuestra primera capa de fondo. Div tiene muchas opciones disponibles para el diseño de fondo. Para este tutorial, nos centraremos en el fondo degradados, máscaras y modelos. Diseñe un gradiente de fondo para la sección Para nuestro primer elemento de diseño de fondo, podemos agregar un gradiente de fondo personalizado a la sección. Para este gradiente, agregaremos 4 paradas de gradiente que son bastante uniformes. Estos 4 colores crearán un hermoso gradiente multicolor para la primera capa de nuestro diseño de fondo. Para agregar las primeras paradas de gradiente, asegúrese de abrir la configuración de sección en la pestaña de contenido. Luego seleccione la pestaña de gradiente y haga clic para agregar un nuevo gradiente. Esto agregará dos colores de gradiente predeterminados. Comenzando con la primera parada de gradiente a la izquierda, actualice/agregue las siguientes paradas de gradiente con un color y posición de la siguiente manera: Gradiente Stop #1

Color Gradiente de parada: #Bae9ff
Posición de parada de gradiente: 0%
Parada de gradiente #2
Color de parada de gradiente: #ADFFF1
Posición de parada de gradiente: 32%
Parada de gradiente #3
Gradiente de parada de color: #ffffff
Posición de parada de gradiente: 64%
Parada de gradiente #4
Color de parada de gradiente: #F9B8DD
Posición de parada de gradiente: 100%
Luego actualice el tipo y la posición del gradiente:
Tipo de gradiente: circular
Posición de gradiente: Centro
Cree un modelo de fondo para la sección Ahora que nuestro gradiente de fondo está listo, podemos agregar un modelo de fondo para completar el diseño. En este ejemplo, crearemos un modelo sutil utilizando el modelo de ondas. En la pestaña Modelos, actualice lo siguiente: Modelo de papel tapiz: Waves
Color del modelo: RGBA (127,206,255,0.59)

Tamaño del modelo: tamaño personalizado
Ancho del modelo: 30 VW
Altura del modelo: 10px
Consejo: en el caso de los modelos de fondo, generalmente es mejor mantenerlos sutiles. Intente usar dimensiones personalizadas para modelos que sean más pequeños y luego renuncie a la opacidad del color. Dicho esto, no tengas miedo de pensar fuera de la caja.
Cree una máscara de fondo para la sección con nuestro modelo de fondo en su lugar, estamos listos para agregar un fondo para completar nuestro diseño de fondo para la primera capa. Hay muchas opciones y variaciones para elegir. Para este ejemplo, usaremos la máscara de píldoras diagonales. En la pestaña Masks, actualice lo siguiente:
Masca: píldoras diagonales


Mason Color: #ffffff
Transformación de la máscara: inversión vertical, inversión
El tamaño de la máscara: estiras para llenar
Aquí está el resultado hasta ahora …
Coloque la fila como la segunda capa ahora que el diseño de fondo de nuestra sección está listo para el funcionamiento, podemos agregar la segunda capa utilizando la fila creada anteriormente. Para editar el giro, haga clic en el icono de la rueda en la fila superior en la sección.
Es importante usar la fila superior para que el diseño de fondo no se superponga en la otra línea designada para nuestro contenido (una manera fácil de evitar el índice z). En la pestaña avanzada, actualice lo siguiente:

Posición: Absoluto

Esto permitirá que la fila se sienta arriba (o se superponga) la sección sin ocupar espacio real en el documento.Ahora, todo lo que tenemos que hacer es actualizar la altura y el ancho, para que se extienda por todo el ancho y la altura de la sección.Esto creará la superposición que necesitamos y la segunda capa de diseño de fondo.En la pestaña de diseño, actualice las opciones de dimensionamiento de la siguiente manera: Alturas de columna de ecualización: Sí

Ancho: 100%
Ancho máximo: 100%

Altura: 100%
Asegúrese de obtener el forro en una fila.
Llenado: 0px arriba, 0px abajo
Cree el diseño de fondo de la fila (la segunda capa de diseño) Ahora es posible que no pueda ver el giro, pero ahora se superpone perfectamente en toda la sección de la sección. Esto nos da la segunda capa y otro lienzo vacío para completar nuestro diseño. Diseñe un gradiente de fondo de fila porque esta es nuestra segunda capa de gradiente, es importante usar paradas transparentes (o semitransparentes), de modo que los colores de la primera capa permanecen visibles en ciertas áreas. Esto le permite crear una combinación de color más única, lo que no es posible con una sola capa de degrades. Para este gradiente, agregaremos 3 paradas de gradiente que son bastante uniformes. Detener el gradiente medio es transparente para revelar el diseño del gradiente de la primera capa. Juntos, estos colores sutiles completan el gradiente en la primera capa. Para agregar las primeras paradas de gradiente, asegúrese de abrir la configuración de la sección en la pestaña de contenido. Luego seleccione la pestaña de gradiente y haga clic para agregar un nuevo gradiente. Esto agregará dos colores de gradiente predeterminados. Comenzando con la primera parada de gradiente a la izquierda, actualice/agregue las siguientes paradas de gradiente con un color y posición de la siguiente manera: parada de gradiente #1 parada de gradiente: #7fceff
Posición de parada de gradiente: 0%

Parada de gradiente #2
Parada de gradiente de color: transparente

Posición de parada de gradiente: 40%
Parada de gradiente #3
Color Stop Gradiente: #F1DDFF
Posición de parada de gradiente: 100%
Luego actualice el tipo y la posición del gradiente:
Tipo de gradiente: elíptico
Posición de gradiente: derecho a la derecha
Cree un modelo de fondo para la sección ahora, que se instala la segunda capa de gradiente, podemos agregar un modelo de fondo para completar el diseño. Para nuestro modelo de segunda capa, utilizaremos el modelo de confeti. En la pestaña Modelos, actualice lo siguiente: Modelo de fondo: confeti
Color del modelo: #00FF4C
Tamaño del modelo: tamaño personalizado
Ancho del modelo: 45VW
Modo de modelado: pantalla

Este modelo utiliza cómo mezclar la pantalla en una versión ligera del color del modelo mezclado con los colores de gradiente detrás de él. Mejora el diseño y hace que el modelo sea más sutil. Cree un fondo de fila con el modelo de segunda capa en su lugar, estamos listos para agregar una segunda capa para completar nuestro diseño de fondo de dos capas. Para la segunda máscara de capa, usaremos la misma máscara de píldoras diagonales invertidas e invertidas horizontalmente, de modo que aparezca en el lado izquierdo de la sección, adyacente a la primera capa. En la pestaña Masks, actualice lo siguiente:
Masca: píldoras diagonales
Mason Color: #ffffff
Transformación de Mason: inversión horizontal, inversión
Aquí está el resultado hasta ahora …
Las dos capas (antes y después) aquí son una ilustración rápida de cómo se ve la primera capa antes de aplicar la segunda capa. Agregue el título a la fila que guardamos para nuestro contenido, agregue un módulo de texto para el título principal.

Luego abra la configuración del módulo de texto y actualice lo siguiente:
Texto del cuerpo: [Agregue el título con la etiqueta H1] Fuente del título: Inter
El peso de la fuente del título: Bold

Color de texto del título: #000000

Título Tamaño del texto: 8VW (escritorio), 62px (tableta), 32px (teléfono)

Marja: 30 VH desde arriba, 30 VH del recurso final final para echar un vistazo al resultado final de nuestro diseño en dispositivos de escritorio y móviles.
¡Cambialo! Para un aspecto diferente, puede probar diferentes máscaras y modelos en cada capa. Aquí hay unos ejemplos.
¡Prueba más degrades!
Gradiente Builder puede crear tantos colores y tipos de gradiente que puede usar para resaltar estos modelos de fondo estratificados. Puede consultar nuestras demostraciones en vivo con múltiples posibilidades de diseño de gradiente de fondo. ¡Obtenga más modelos y modelos de máscara de fondo!
Si desea más inspiración para el uso de máscaras y modelos de fondo, consulte estos 12 modelos de máscaras de fondo y modelos de descarga gratuita. Los pensamientos finales son sorprendentes lo fácil que es crear modelos de fondo tan hermosos con las opciones de fondo de la divicidad. Y, agregar otra capa de diseño de fondo aumenta las posibilidades de diseño. Además, ni siquiera mencioné la tercera capa que también está disponible en el diseño en este tutorial. ¿Puedes adivinar qué es? Para obtener más información, consulte nuestras características sobre las características sobre el generador de gradiente y las máscaras y modelos de fondo. Además, puede ser útil para saber cómo usar máscaras y modelos para crear una sección de héroe. Espero con ansias las noticias tuyas en los comentarios. ¡Suerte!