Si está buscando diseñar un fondo creativo para su sitio web, Divi tiene algunas potentes opciones de diseño integradas para que las explore. Ya le mostramos cómo combinar los gradientes, máscaras y patrones de fondo de Divi usando las opciones de fondo para una sola sección. Pero, hoy, estamos empujando los límites del diseño de fondo. En este tutorial, le mostraremos cómo diseñar fondos con dos capas de degradados, máscaras y patrones en Divi. 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 aumentan exponencialmente.
En esta publicación, le mostraremos cómo diseñar un fondo con:
– dos máscaras (una en cada lado)
– dos degradados avanzados superpuestos
– dos patrones que se fusionan con el diseño
Además, demostraremos lo fácil y divertido que puede ser cambiar las combinaciones de diseño con unos pocos clics.
¡Vamos a divertirnos un poco!
Suscríbete a nuestro canal de Youtube
Aquí hay algunos diseños de ejemplo 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 integradas de Divi (degradado, máscaras, patrones, etc.). Luego creamos una fila que se coloca de modo que cubra completamente la sección (como una superposición). Dado que una fila Divi también tiene las mismas opciones de diseño de fondo integradas, ahora tenemos dos capas (la sección y la fila) de opciones de fondo para diseñar un fondo para nuestro contenido.
Descarga el diseño GRATIS
Para poner sus manos en el diseño de diseño de este tutorial, primero deberá descargarlo 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 bondad Divi y un paquete Divi Layout gratis todos los lunes! 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!
Para importar el diseño de la sección a su Biblioteca Divi, haga lo siguiente:
- Navega a la Biblioteca Divi.
- Haga clic en el botón Importar en la parte superior de la página.
- En la ventana emergente de portabilidad, seleccione la pestaña de importación
- Elija el archivo de descarga desde su computadora (asegúrese de descomprimir el archivo primero y use el archivo JSON).
- Luego haga clic en el botón importar.
Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo has hecho, instala y activa el tema Divi .
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
- Elija la opción «Construir desde cero».
- ¡Ahora ten un lienzo en blanco para empezar a diseñar en Divi!
Cómo diseñar un fondo con dos capas de degradados, máscaras y patrones
Agregar filas a la sección
Para comenzar, agregue una fila de una columna a la sección existente en el generador. Esta fila eventualmente se convertirá en la segunda capa del diseño de fondo.
A continuación, duplique la fila que acaba de crear. Esta segunda fila (duplicada) se usará para nuestro contenido como lo haría normalmente. Ahora debería tener una fila superior para la capa de fondo adicional y una fila para el contenido normal.
Regresaremos a las filas más tarde. Por ahora, vamos a comenzar a diseñar la primera capa de nuestro diseño de fondo usando la sección.
Agregar espaciado vertical a la sección
Para que nuestro diseño de fondo llene el navegador, necesitamos agregar algo de altura vertical a la sección. Una manera fácil de hacerlo es agregar un valor de altura mínimo a 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: 70vh
- Relleno: 0px arriba, 0px abajo
Crear el diseño de fondo de la sección (la primera capa)
Ahora que tenemos la altura de nuestra sección en su lugar, tenemos nuestro lienzo para crear nuestra primera capa de diseño de fondo. Divi tiene muchas opciones disponibles para diseñar fondos. Para este tutorial, nos concentraremos en los gradientes, máscaras y patrones de fondo.
Diseñe un degradado de fondo para la sección
Para nuestro primer elemento de diseño de fondo, podemos agregar un degradado de fondo personalizado a la sección. Para este degradado, vamos a agregar 4 paradas de degradado que están espaciadas de manera bastante uniforme. Estos 4 colores crearán un hermoso degradado multicolor para la primera capa de nuestro diseño de fondo.
Para agregar las primeras paradas de degradado, asegúrese de tener la configuración de la sección abierta en la pestaña de contenido. Luego seleccione la pestaña de degradado y haga clic para agregar un nuevo degradado. Esto agregará dos colores degradados predeterminados. Comenzando con la primera parada de degradado a la izquierda, actualice/agregue las siguientes paradas de degradado con un color y una posición de la siguiente manera:
Parada de gradiente #1
- Color de parada de degradado: #bae9ff
- Posición de parada de gradiente: 0%
Parada de gradiente #2
- Color de parada de degradado: #adfff1
- Posición de parada de gradiente: 32%
Parada de gradiente #3
- Color de parada de degradado: #ffffff
- Posición de parada de gradiente: 64%
Parada de gradiente #4
- Color de parada de degradado: #f9b8dd
- Posición de parada de gradiente: 100%
Luego actualice el Tipo de degradado y la Posición:
- Tipo de degradado: Circular
- Posición del degradado: Centro
Crear un patrón de fondo para la sección
Ahora que nuestro degradado de fondo está listo, podemos agregar un patrón de fondo para complementar el diseño. En este ejemplo, vamos a crear un patrón sutil utilizando el patrón Waves.
En la pestaña de patrones, actualice lo siguiente:
- Patrón de fondo: Ondas
- Color del patrón: rgba(127,206,255,0.59)
- Tamaño del patrón: Tamaño personalizado
- Ancho del patrón: 30vw
- Altura del patrón: 10px
CONSEJO: Con patrones de fondo, generalmente es mejor mantenerlo sutil. Intente usar tamaños personalizados para patrones que son más pequeños y luego suelte la opacidad del color. Dicho esto, no tengas miedo de pensar fuera de la caja.
Crear una máscara de fondo para la sección
Con nuestro patrón de fondo en su lugar, estamos listos para agregar una máscara de fondo para completar nuestro diseño de fondo para la primera capa. Hay un montón de opciones y variaciones para elegir. Para este ejemplo, vamos a utilizar la máscara Diagonal Pills .
En la pestaña de máscaras, actualice lo siguiente:
- Mascarilla: Píldoras Diagonales
- Color de la máscara: #ffffff
- Transformación de máscara: volteo vertical, invertir
- Tamaño de la máscara: Estirar para rellenar
Aquí está el resultado hasta ahora…
Coloque la fila como una segunda capa
Ahora que nuestro diseño de fondo de sección está listo, podemos agregar la segunda capa usando la fila que creamos anteriormente. Para editar la fila, haga clic en el icono de engranaje de la fila superior de la sección.
Es importante usar la fila superior para que el diseño de fondo no se superponga a la otra fila designada para nuestro contenido (una manera fácil de evitar lidiar con el índice Z).
En la pestaña Avanzado, actualice lo siguiente:
- Posición: Absoluta
Esto permitirá que la fila quede encima (o superpuesta) de 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 abarque todo el ancho y la altura de la sección. Esto creará la superposición que necesitamos y nuestra segunda capa de diseño de fondo.
En la pestaña de diseño, actualice las opciones de tamaño de la siguiente manera:
- Igualar alturas de columna: SÍ
- Ancho: 100%
- Ancho máximo: 100%
- Altura: 100%
Asegúrese de sacar el relleno de la fila también.
- Relleno: 0px arriba, 0px abajo
Crear el diseño de fondo de fila (la segunda capa de diseño)
Ahora es posible que no pueda ver la fila, pero ahora se superpone perfectamente a todo el fondo de la sección. Esto nos da nuestra segunda capa y otro lienzo en blanco para completar nuestro diseño.
Diseñe un degradado de fondo para la fila
Debido a que este es nuestro degradado de la segunda capa, es importante que usemos paradas de color transparentes (o semitransparentes) para que los colores del degradado de la primera capa permanezcan visibles en ciertas áreas. Esto le permite crear una mezcla de colores más exclusiva que no es posible con una sola capa de degradados.
Para este degradado, vamos a agregar 3 paradas de degradado que están espaciadas de manera bastante uniforme. La parada de degradado central es transparente para revelar el diseño de degradado de la primera capa. Juntos, estos colores sutiles complementan muy bien el degradado en la primera capa.
Para agregar las primeras paradas de degradado, asegúrese de tener la configuración de la sección abierta en la pestaña de contenido. Luego seleccione la pestaña de degradado y haga clic para agregar un nuevo degradado. Esto agregará dos colores degradados predeterminados. Comenzando con la primera parada de degradado a la izquierda, actualice/agregue las siguientes paradas de degradado con un color y una posición de la siguiente manera:
Parada de gradiente #1
- Color de parada de degradado: #7fceff
- Posición de parada de gradiente: 0%
Parada de gradiente #2
- Color de parada de degradado: transparente
- Posición de parada de gradiente: 40%
Parada de gradiente #3
- Color de parada de degradado: #f1ddff
- Posición de parada de gradiente: 100%
Luego actualice el Tipo de degradado y la Posición:
- Tipo de gradiente: Elíptico
- Posición del degradado: abajo a la derecha
Crear un patrón de fondo para la sección
Ahora que nuestro segundo gradiente de capa está en su lugar, podemos agregar un patrón de fondo para complementar el diseño. Para nuestro patrón de la segunda capa, vamos a usar el patrón Confeti.
En la pestaña de patrones, actualice lo siguiente:
- Patrón de fondo: confeti
- Color del patrón: #00ff4c
- Tamaño del patrón: Tamaño personalizado
- Ancho del patrón: 45vw
- Modo de fusión de patrón: Pantalla
Este patrón usa el modo de fusión de pantalla para una versión clara del color del patrón mezclado con los colores degradados detrás de él. Realza el diseño y hace que el patrón sea más sutil.
Crear una máscara de fondo para la fila
Con nuestro patrón de segunda capa en su lugar, estamos listos para agregar una máscara de segunda capa para completar nuestro diseño de fondo de dos capas. Para la máscara de la segunda capa, vamos a utilizar la misma máscara de píldoras diagonales invertida y volteada horizontalmente para que aparezca en el lado izquierdo de la sección, junto a la máscara de la primera capa.
En la pestaña de máscaras, actualice lo siguiente:
- Mascarilla: Píldoras Diagonales
- Color de la máscara: #ffffff
- Transformación de máscara: Voltear horizontalmente, Invertir
Aquí está el resultado hasta ahora…
Las dos capas (antes y después)
Aquí hay una ilustración rápida de cómo se ve la primera capa antes de aplicar la segunda capa.
Añadir el título
En la fila que guardamos para nuestro contenido, agregue un módulo de texto para su encabezado principal.
Luego abra la configuración del módulo de texto y actualice lo siguiente:
- Texto del cuerpo: [agregar encabezado con etiqueta H1]
- Fuente del encabezado: Inter
- Peso de la fuente del encabezado: Negrita
- Color del texto del encabezado: #000000
- Tamaño del texto del encabezado: 8vw (escritorio), 62 px (tableta), 32 px (teléfono)
- Margen: 30vh arriba, 30vh abajo
Resultado final
Echemos un vistazo al resultado final de nuestro diseño en dispositivos móviles y de escritorio.
¡Cambialo!
Para una apariencia diferente, puede probar diferentes máscaras y patrones en cada capa.
Aquí están algunos ejemplos.
¡Prueba más degradados!
Gradient Builder puede crear muchos más colores y tipos de degradados que puede usar para hacer que estos diseños de fondo en capas se destaquen. Puede ver nuestras demostraciones en vivo de más posibilidades de diseño de degradado de fondo.
¡Obtenga más máscaras de fondo y diseños de patrones!
Si desea obtener más inspiración sobre cómo usar máscaras y patrones de fondo , consulte estos 12 diseños de máscaras y patrones de fondo para descargar gratis .
Pensamientos finales
Es sorprendente lo fácil que es crear diseños de fondo tan hermosos con las opciones de fondo de Divi. Y, agregar otra capa de diseño de fondo aumenta exponencialmente las posibilidades de diseño. Además, ni siquiera mencionamos la tercera capa que también está disponible en el diseño de este tutorial. ¿Puedes adivinar qué es?
Para obtener más información, consulte nuestras publicaciones de lanzamiento de características sobre el generador de gradientes y las máscaras y patrones de fondo . También puede resultarle útil saber cómo usar máscaras y patrones para diseñar una sección principal .
Espero escuchar de usted en los comentarios.
¡Salud!