¿Quieres combinar las máscaras de fondo y el separador de Divi tener fondos sublimes y únicos?
La combinación de máscaras de fondo con separadores de sección en Divi agrega otra capa de creatividad a un ya poderoso arsenal de opciones de diseño de fondo.
Además de las opciones de fondo, los divisores de sección también permiten a los usuarios mejorar sus diseños de fondo.
En este tutorial, le mostraremos cómo combinar máscaras de fondo con separadores de sección en Divi. Te daremos instrucciones paso a paso sobre cómo hacer un diseño de fondo para una sección Divi usando esta técnica.
Además, incluso explicaremos cómo crear diseños alternativos con solo unos pocos ajustes simples.
¡Empecemos!
vista
Aquí hay una vista previa de los dibujos en este tutorial.
El concepto
El concepto básico de este tutorial es combinar una máscara de fondo y divisores de sección para crear formas de máscara aún más únicas.
Primero, agregamos una máscara de fondo.
Luego, agregamos divisores de sección para completar creativamente la forma de la máscara.
Crear una nueva página con Divi Builder
Desde el tablero de WordPress, vaya a Páginas> Agregar nuevo para crear una nueva página.
Dale un título que tenga sentido para ti y haz clic en Utilice Divi Builder
A continuación, haga clic Empezar a construir (Construir desde cero)
Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.
Combina máscaras de fondo y divisores en Divi
Agregar tamaño de sección y espaciado
Para comenzar, agregaremos el tamaño y el espaciado a la sección existente en el constructor. Suspenderemos agregar una línea o todas contenido para que podamos centrarnos en diseñar el fondo de la sección.
Configuración de la sección abierta. Debajo de la pestaña Diseño, actualice el tamaño y el espaciado de la siguiente manera:
- Altura mínima: 50 vw
- Relleno (superior e inferior): 0 px
Crear el degradado de fondo
Una vez que la sección tiene cierta altura, estamos listos para agregar el degradado de fondo a la sección.
En la pestaña Contenido, haga clic en la pestaña Gradiente de fondo en opciones de fondo. Luego agregue un degradado de la siguiente manera:
- Paradas de gradiente
- 20%: #1a2a6c
- 60%: #b21f1f
- 100%: #fdbb2d
Crear la máscara de fondo
Ahora que tenemos un degradado de color, estamos listos para crear una máscara de fondo.
En la pestaña Máscara de fondo, actualice lo siguiente:
- Máscara: Espiga
- Color de la máscara: #000000
- Transformar: Invertido
- Relación de aspecto de la máscara: ver captura de pantalla
Añadir separadores de sección (Divisores)
Con nuestra máscara en su lugar, podemos modificar aún más la forma de la máscara usando divisores de sección.
En este ejemplo, agregaremos un divisor de sección de medio círculo en la parte superior e inferior. Esto comprimirá la máscara de fondo para que se parezca más a un elegante diseño de flecha.
Para hacer esto, haga clic en la pestaña Diseño y agregue los siguientes separadores:
Primero, agregue un separador superior debajo de la pestaña Notable .
- Estilo de divisor: Ver captura de pantalla
- Color: #000
- Altura del divisor: 10 vw
A continuación, agregue un separador inferior debajo de la pestaña Fondo.
- Estilo de divisor: Ver captura de pantalla
- Color: #000
- Altura del divisor: 10 vw
- Voltear divisor: Voltear verticalmente
El resultado
Aquí está el resultado hasta ahora.
Ajuste las opciones de fondo y los divisores para obtener más diseño
Ahora que tiene la idea básica en su lugar, podemos jugar fácilmente con los divisores de sección para crear más patrones.
Ver también: Divi: Cómo usar el "Generador de degradados" para embellecer tus imágenes
Diseño alternativo #1
Para nuestro primer diseño alternativo, rotaremos la máscara de fondo existente. A continuación, reemplazaremos los divisores de sección semicircular con triángulos.
Para hacer esto, abra la configuración de la sección existente, haga clic en la pestaña Máscara de fondo y actualiza lo siguiente:
- Transformación de máscara: volteo vertical, rotación
- Relación de aspecto de la máscara: ver captura de pantalla
A continuación, actualice los separadores de sección de la siguiente manera:
Divisor superior
- Estilo de divisor: Ver captura de pantalla
- Altura del divisor: 13 vw
Divisor inferior
- Estilo de divisor: Ver captura de pantalla
- Altura: 13 vw
- Voltear el divisor: désactiver
El resultado
Aquí está el resultado.
Diseño alternativo #2
Para nuestro segundo y último diseño alternativo, vamos a reemplazar la máscara vigas por la mascara Barras diagonales 2 y también darle un nuevo divisor de sección superior.
Para hacer esto, abra la configuración de la sección existente, haga clic en la pestaña Máscara de fondo y actualiza lo siguiente:
- Máscara: Barras diagonales 2
- Transformación de máscara: giro horizontal
- Relación de aspecto: ver captura de pantalla
A continuación, actualice los separadores de sección de la siguiente manera:
Divisor superior
- Estilo de divisor: Ver captura de pantalla
- Voltear divisor: Voltear horizontalmente
Divisor inferior
- Estilo divisor: Ninguno
El resultado
Aquí está el resultado.
Resultados finales
Para darle una mejor idea de cómo se verán estos fondos contenido, agregamos una fila a una columna con un título.
Lea también: Divi: Cómo crear una máscara de fondo pegajosa
Descarga DIVI ahora!!!
Conclusión
La combinación de máscaras y separadores de secciones para diseños de fondo abre más posibilidades para crear formas únicas para estas máscaras integradas.
Siéntete libre de explorar diferentes combinaciones por tu cuenta.
Esperamos que este tutorial lo inspire para sus próximos proyectos Divi. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet.
No dudes en consultar también nuestra guía sobre la Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
