¿Quieres crear un fondo único e impresionante con máscaras y patrones de fondo de Divi ?
La nueva característica de patrones y máscaras de fondo de Divi se usa más comúnmente para las secciones de una página. ¡Pero también podemos agregarlos a los encabezados!
En este tutorial, le mostraremos cómo agregar máscaras y patrones de fondo a una plantilla de encabezado. Divi usando el constructor temas.
Es una excelente manera de crear diseños de encabezado completamente únicos para su Sitio web.
Vamos a empezar.
vista
Aquí hay un vistazo rápido al diseño que crearemos en este tutorial.
Vaya al generador de temas de Divi y comience a crear un encabezado global
Desde el tablero de WordPress, vaya a Divi > Creador de temas
Cliquez sur “Agregar encabezado global”
seleccionar "Crear encabezado global".
Después de eso, puede comenzar a diseñar un nuevo encabezado utilizando Divi Builder.
Cómo agregar máscaras y patrones de fondo a un encabezado Divi
Crear el fondo de la sección con un color de fondo y un patrón
Lea también: Divi: Cómo crear una sección de Testimonios en forma de cuadrícula
Para comenzar, abra la configuración de la sección existente.
En la pestaña Contenido, actualice las opciones de fondo con la siguiente configuración:
Color de fondo:
- Fondo: #262d3f
Patrón de fondo:
- Modelo: Pastillas
- Color del patrón: rgba(255,255,255,0.1)
- Tamaño del patrón: tamaño personalizado.
- Ancho del patrón: 1px
Relleno
En la pestaña Diseño, actualice el relleno de la sección de la siguiente manera:
- Relleno (superior e inferior): 0 px
Esto reducirá un poco el espacio vertical del encabezado.
Agregue una fila con el siguiente diseño de columna
Se agregó contenido de encabezado de marcador de posición (un menú y un botón)
En la columna izquierda de la fila, agregue un nuevo menú.
Seleccione un menú.
Luego agregue un logotipo y use la configuración para personalizar el menú y el logotipo como desee.
En la columna de la derecha, agrega un módulo de botones y también personalízalo a tu gusto.
Creando el fondo de la línea con degradado, máscara y patrón
el gradiente
Abra la configuración de la fila que contiene su menú y botón. Luego actualice las opciones de fondo con la siguiente configuración de fondo:
Gradiente de fondo:
- Paradas de gradiente 1 (50%): Claro
- Paradas de gradiente 2 (75 %): #ff4c00
- Dirección: 90 grados
Patrón de Costura
- Modelo: Pastillas
- Color del patrón: rgba(38,45,63,0.48)
- Tamaño del patrón: 1 píxel
- Desplazamiento vertical: 20px
Nota: El desplazamiento vertical del patrón se establece en 20 px porque hay un relleno superior de 20 px en la sección sobre la línea. Esto asegura que el patrón de la sección se alinee con el patrón de la fila.
Máscara de fondo
- Máscara: Espiga
- Color de la máscara: #262d3f
NOTA: Para los encabezados, es mejor mantener el tamaño de la máscara establecido en "Extender para rellenar" para que cubra el espacio horizontal sin comprometer el diseño de la máscara.
Toques finales a la línea.
Ver también: Divi: Cómo usar el "Generador de degradados" para embellecer tus imágenes
Para completar el diseño, agregaremos un radio de borde y algunas ediciones más a la línea.
El radio, el borde y el espacio entre bordes
En la pestaña Diseño, actualice el relleno de la siguiente manera:
- Relleno (superior e inferior): 5 px
Luego dale a la fila una bonita esquina redondeada para un elemento de diseño adicional.
- Esquinas redondeadas: 50px
- Ancho del borde izquierdo: 50px
- Color del borde izquierdo: #262d3f
Necesitamos dar un borde al lado izquierdo de la fila porque el borde cuadrado de la máscara desbordará la fila a pesar de las esquinas redondeadas.
Resultado final
Veamos el resultado final.
El degradado es un poco sutil, así que aquí hay un vistazo de cómo se ve.
Y aquí está el diseño del encabezado de escritorio y móvil.
¡¡¡Descarga DIVI ahora!!!
Conclusión
El diseño de fondo del encabezado es solo la punta del iceberg. Hay mucho que explorar con las opciones de fondo disponibles en Divi.
Esperamos que este tutorial lo haya ayudado a comprender cómo las máscaras y patrones de fondo de Divi pueden trabajar juntos para crear un diseño de fondo único para sus encabezados.
Siéntase libre de experimentar con más combinaciones de diseño de fondo para adaptarse a su propio diseño. Sitio web o su próximo proyecto.
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.
...
