Cómo combinar el creador de degradados de fondo, las máscaras y los patrones de Divi
Divi y sus nuevas opciones de fondo han desbloqueado un nuevo y emocionante mundo de posibilidades para los usuarios de Divi. El nuevo generador de degradados facilita la creación de cualquier tipo de degradado que queramos con tantos colores como queramos. Pero eso es solo una capa de creatividad. Podemos combinar el diseño Gradient Builder con máscaras y patrones de fondo para crear innumerables diseños de fondo únicos e impresionantes para su sitio web.
Hoy le mostraremos cómo combinar Background Gradient Builder de Divi con máscaras y patrones de fondo para crear un hermoso diseño de fondo. Le mostraremos cómo agregar cada uno de los elementos de diseño de fondo (gradiente de fondo, máscaras y patrones) a una sección. 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
Vistazo
Aquí hay algunos diseños de ejemplo que podemos construir usando este tutorial.
¡Con este diseño en su lugar, puede cambiar fácilmente patrones y máscaras con unos pocos clics!
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.
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 usar Combinar gradientes de fondo, máscaras y patrones en Divi
1. Crear la estructura de diseño
Para este diseño, vamos a crear una sección con un título y una llamada a la acción a la izquierda. Nuestro diseño visual se creará mediante una combinación de las opciones de fondo de Divi. Pero antes de entrar en eso, necesitamos crear una fila de dos columnas.
2. Agregue el título y la llamada a la acción
En la columna de la izquierda (columna 1), agregue un módulo de texto para su encabezado principal, un módulo de texto para el texto de su subtítulo y un módulo de botón para su botón.
Si desea conocer la configuración de diseño específica para estos, siéntase libre de descargar el diseño y compruébelo usted mismo en otro momento. Por hoy, nos vamos a concentrar en el diseño de fondo.
3. 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 relleno en la parte superior e inferior de la sección.
Abra la configuración de la sección. En la pestaña de diseño, actualice el relleno de la siguiente manera:
- Acolchado: 10vw arriba, 30vw abajo
Tenga en cuenta que es posible que deba ajustar el relleno en la pantalla de la tableta y el teléfono si desea ajustar el diseño de fondo una vez que las columnas se apilan verticalmente.
4. Agrega un Degradado de Fondo Usando el Generador de Degradados
A continuación, podemos agregar un degradado de fondo personalizado a la sección. Para este degradado, vamos a agregar 5 paradas de degradado que están espaciadas de manera bastante uniforme. Las primeras y últimas paradas de degradado tendrán el mismo color rosa. Las paradas de gradiente segunda y cuarta tendrán el mismo color azul. Y la tercera parada de gradiente (central) tendrá un color verde. Estos 5 colores crearán un hermoso degradado multicolor para nuestro diseño de fondo.
Parada de gradiente #1
Para agregar la primera parada de gradiente, 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. Haga clic en el primer degradado a la izquierda y actualice el color y la posición de la siguiente manera:
- Color de parada de degradado: #fa8bff
- Posición de parada de gradiente: 10%
Parada de gradiente #2
Para agregar la segunda parada de degradado, haga clic en la línea de color del degradado para agregar una nueva parada de degradado. Luego actualice el color y arrástrelo a su posición de la siguiente manera:
- Color de parada de degradado: #2bd2ff
- Posición de parada de gradiente: 30%
Parada de gradiente #3
Para agregar la tercera parada de degradado, haga clic en la línea de color de degradado para agregar una nueva parada de degradado (alrededor de la mitad de la línea). Luego actualice el color y arrástrelo a su posición de la siguiente manera:
- Color de parada de degradado: #2bff88
- Posición de parada de gradiente: 55%
Parada de gradiente #4
Para agregar la segunda parada de degradado, haga clic en la línea de color del degradado para agregar una nueva parada de degradado. Luego actualice el color y arrástrelo a su posición de la siguiente manera:
- Color de parada de degradado: #2bd2ff
- Posición de parada de gradiente: 80%
Debería tener la parada de degradado predeterminada original a la izquierda en el extremo derecho de la línea de color de degradado. Para hacer que la última parada de degradado, haga clic en la parada de color de degradado y actualice el color de la siguiente manera (puede dejarlo en la posición predeterminada de 100%):
- Color de parada de degradado: #fa8bff
- Posición de parada de gradiente: 100%
Actualizar la dirección del degradado
Para este diseño, mantenemos el tipo de degradado lineal predeterminado. Para cambiar la dirección del patrón de color lineal, actualice lo siguiente:
- Dirección del gradiente: 90 grados
Ahora el gradiente fluirá de izquierda a derecha.
5. Crea 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 Diamonds de una manera única.
En la pestaña de patrones, actualice lo siguiente:
- Patrón de fondo: Diamantes
- Color del patrón: rgba(255,255,255,0.52)
- Tamaño del patrón: Tamaño personalizado
- Ancho del patrón: 8px
- Altura del patrón: 15vw
Esto debería darle una idea de cuán creativo puede ser con el patrón incorporado. Aquí usamos un patrón de diamantes. Pero, debido a que le dimos al patrón un ancho y una altura personalizados, los diamantes se estiran verticalmente para darle un diseño único que se asemeja a las ondas de sonido.
Pero hay muchos más patrones para elegir que se verían geniales con este diseño y están a solo un clic de distancia.
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 como en este ejemplo.
6. Crea una Máscara de Fondo para la Sección
Con nuestro patrón de fondo en su lugar, finalmente estamos listos para agregar una máscara de fondo para completar nuestro diseño de combinación de fondo. Hay un montón de opciones y variaciones para elegir. Para este ejemplo, vamos a usar la máscara Paint (al menos para empezar).
En la pestaña de máscaras, actualice lo siguiente:
- Máscara: Pintura
- Color de la máscara: #ffffff
- Transformación de máscara: Rotar
- Tamaño de la máscara: Cubierta
Aquí está el resultado hasta ahora…
Y, al igual que con los patrones, hay muchas más máscaras para elegir que se verían geniales con este diseño y están a solo un clic de distancia.
Más posibilidades
Invertir la máscara
Para una apariencia diferente, puede invertir la máscara en la opción de transformación de máscara. Esto mostrará más degradado en el fondo y hará que el texto se destaque un poco más.
Aquí hay algunos ejemplos de máscaras invertidas…
Crear una versión oscura
Si desea una versión oscura de este diseño, simplemente cambie el color de la máscara de fondo a un color oscuro (como el negro). Dale el color del patrón a un color más oscuro. A continuación, cambie el texto del título y del subtítulo a blanco. Y es posible que también desee actualizar el color del botón.
Así es como se ve la versión oscura usando algunas máscaras diferentes.
Y aquí hay un ejemplo de una versión oscura con una máscara invertida.
¡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.
Resultados finales
Aquí hay otro vistazo a los diseños que podemos crear fácilmente siguiendo los pasos anteriores.
¡Y no olvide que con este diseño en su lugar, puede cambiar fácilmente los patrones y las máscaras con unos pocos clics!
Pensamientos finales
Combinar las opciones de fondo avanzadas de Divi es muy divertido. Y es sorprendente lo fácil que es crear diseños de fondo tan hermosos sin tener que usar software de terceros como Photoshop o Illustrator. Las opciones de fondo son fáciles de modificar para obtener el diseño perfecto. Y hay tantas otras opciones que puede usar (como los modos de fusión) para crear diseños de fondo aún más únicos. Además, puede agregar máscaras y patrones a cualquier elemento Divi, no solo a las secciones. ¡Así que diviértete experimentando!
Para obtener más información, consulte nuestras publicaciones de lanzamiento de funciones 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 de héroe.
Espero escuchar de usted en los comentarios.
¡Salud!
