¿Te gustaría usar la máscara de Divi y la superposición de patrones de fondo?
con el ultimo versión de máscara de fondo y función de patrón de fondo de Divi, puedes crear secciones de héroe únicas para tu Sitio web. Una sección de héroe es la primera sección de tu Sitio web y eso es lo primero que tu visitantes ver antes de desplazarse por su Sitio web, ¡así que es importante llamar la atención!
Este artículo le mostrará cómo crear cinco máscaras de fondo únicas y superposiciones de patrones que puede aplicar a una imagen de fondo para crear secciones de héroe verdaderamente impresionantes.
Este tutorial cubrirá los pasos esenciales necesarios para crear cada sección Hero y le brindará las herramientas que necesita para crear una sección Hero llamativa para su sitio web en minutos.
¡Empecemos!
vista
Aquí hay una descripción general rápida de las cinco secciones de héroe que crearemos en este artículo hoy.
Descarga DIVI ahora!!!
Los diseños son sutiles, simples y, sin embargo, impactantes.
Lea también: Divi: Cómo usar el "Generador de degradados" para embellecer tus imágenes
Crear una nueva página con Divi Builder
Para comenzar, deberá hacer lo siguiente:
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.
Cinco ejemplos de máscaras de fondo y superposiciones de patrones para aplicar a una imagen de fondo
Primero, creemos la sección Héroe
Todos nuestros diseños de muestra usan la misma estructura de sección, fila y columna, así que vamos a configurarlos ahora.
1. Crea una estructura de diseño
Agregue una fila a su página, luego haga clic en el ícono verde "+" para mostrar la estructura de la columna y seleccione la primera columna, la columna de ancho completo.
2. Agregar espaciado de sección
Ahora que hemos definido nuestra fila y columna, es hora de agregar algo de espacio a la sección.
En la pestaña Espaciado, actualice lo siguiente:
- Escritorio: 400 píxeles (superior e inferior)
- Tableta: 200 píxeles (superior e inferior); 25px (izquierda y derecha)
- Teléfono: 50 píxeles (superior e inferior); 25px (izquierda y derecha)
Diseño de sección de héroe # 1
Diseñemos la primera sección del héroe.
Descarga DIVI ahora!!!
1. Agregar texto de encabezado
Haga clic en el icono gris "+" para abrir la biblioteca de módulos. Desplácese hasta el texto y haga clic para cargar.
Ingrese el texto del título, luego debajo de la pestaña Texto de encabezado, configure estos ajustes:
- Fuente del título: Work Sans
- Color del texto: Blanco #ffffff
- Tamaño del texto del encabezado:
- Escritorio: 3 em
- Tableta: 2,2 em
- Teléfono: 1.4em
2. Agregar módulo de botones
Agregue un botón y configure estos ajustes:
- En la pestaña ContenES: Saber más
- En la pestaña Alineación, elija: Centro
- Cliquez sur Usar estilos personalizados para el botón luego configurar:
- Tamaño del texto del botón:
- Escritorio: 20px
- Tableta: 16px
- Teléfono: 14px
- Color del texto del botón: #ffffff
- Fondo: #1d1d1d
- Ancho del borde del botón: 0
- Radio del borde: 0
- Espaciado entre letras: 3 puntos
- Fuente del botón: Work Sans
- Estilo de fuente: TT
- Tamaño del texto del botón:
3. Agrega una imagen de fondo
Ahora que nuestro contenido está configurado, es hora de comenzar a diseñar el fondo de la sección.
- Vaya a la palanca de fondo y haga clic en la tercera pestaña, la pestaña de imagen, luego haga clic en "Agregar imagen de fondo".
- Esto abrirá su biblioteca de medios, donde puede seleccionar una foto o cargar una nueva.
- Una vez que haya seleccionado su foto, haga clic en el botón "Cargar una imagen" en la esquina inferior derecha.
4. Agrega un patrón de fondo
Ahora que hemos configurado nuestra imagen de fondo, agreguemos un patrón.
- En la pestaña Antecedentes, navegue hasta la quinta pestaña, la pestaña Patrón de fondo, luego haga clic en "Agregar patrón de fondo".
- seleccionar Tufted en el menú desplegable y configure estos ajustes:
- Color del patrón: rgba (255,255,255,0.31)
- Transformación de patrón: ninguno
- Tamaño: tamaño real
- Origen de la repetición del patrón: Superior Inferior
- Repetición de patrón: Repetir
- Modo de fusión: Normal
5. Añadir máscara de fondo
Ahora que hemos configurado nuestra imagen y patrón de fondo, agreguemos una máscara de fondo.
- En la pestaña Antecedentes, navegue a la sexta pestaña, la pestaña Máscara de fondo, luego haga clic en "Agregar una máscara de fondo".
- seleccionar Frijol en el menú desplegable y configure estos ajustes:
- Color de máscara: rgba (0,0,0,0.36)
- Relación de aspecto de la máscara: rectángulo horizontal
- Tamaño: estirar para llenar
Listo ! Ahora tiene una sección de Héroe bellamente diseñada.
Diseño de la sección Héroe n.º 2
Ahora diseñemos la segunda sección del héroe.
1. Agregue una imagen de fondo y establezca el modo de fusión en Superposición
Seleccione su imagen de fondo, configure el modo de fusión en Superposición y agregue un color de superposición de rgba (10,10,10,0.64).
2. Agrega un patrón de fondo
Ahora que hemos configurado la imagen de fondo, agreguemos un patrón de fondo.
- En la pestaña Fondo, vaya a la quinta pestaña, la pestaña Patrón de fondo, luego haga clic en "Agregar patrón de fondo".
- seleccionar Tufted en el menú desplegable y configure estos ajustes:
- Color del patrón: rgba (255,255,255,0.09)
- Transformación de patrón: ninguno
- Tamaño: Cubierta
- Origen de la repetición del patrón: arriba a la izquierda
- Repetición de patrón: Repetir
- Modo de fusión: Normal
3. Añadir máscara de fondo
Ahora que hemos configurado nuestra imagen y patrón de fondo, agreguemos una máscara de fondo.
- En la pestaña Antecedentes, navegue a la sexta pestaña, la pestaña Máscara de fondo, luego haga clic en "Agregar máscara de fondo".
- seleccionar Signo de intercalación en el menú desplegable y configure estos ajustes:
- Color de máscara: rgba (0,0,0,0.36)
- Transformación de máscara: ninguna
- Relación de aspecto: rectángulo horizontal
- Tamaño de la máscara: Estirar para llenar
- Modo de fusión de máscara: Normal
Diseño de la sección Héroe n.º 3
Ahora diseñemos la tercera sección del héroe.
1. Agregue una imagen de fondo y establezca el modo de fusión en Superposición
Seleccione su imagen de fondo, configure el modo de fusión en Superposición y agregue un color de superposición de rgba (10,10,10,0.39).
2. Agrega un patrón de fondo
Ahora que hemos configurado nuestra imagen de fondo, agreguemos un patrón de fondo.
- En la pestaña Antecedentes, navegue a la sexta pestaña, la pestaña Patrón de fondo, luego haga clic en "Agregar patrón de fondo".
- seleccionar Rayas diagonales 2 en el menú desplegable y configure estos ajustes:
- Color del patrón: rgba (0,0,0,0.06)
- Transformación de patrón: ninguno
- Tamaño: tamaño real
- Origen de la repetición del patrón: arriba a la izquierda
- Repetición de patrón: Repetir
- Modo de fusión: Normal
3. Añadir máscara de fondo
Ahora que hemos agregado una imagen de fondo y un patrón, agreguemos una máscara de fondo.
- En la pestaña Antecedentes, navegue a la sexta pestaña, la pestaña Máscara de fondo, luego haga clic en "Agregar máscara de fondo".
- seleccionar Triángulos en el menú desplegable y configure estos ajustes:
- Color de la máscara: rgba (10, 10, 10, 0,61)
- Transformación de máscara: ninguno
- Relación de aspecto: rectángulo horizontal
- Tamaño de la máscara: Estirar para llenar
- Modo de fusión de máscara: Normal
Diseño de la sección Héroe n.º 4
Ahora diseñemos la cuarta sección de Hero.
1. Agrega una imagen de fondo
Seleccione su imagen de fondo.
2. Agrega un patrón de fondo
Ahora que hemos agregado nuestra imagen de fondo, agreguemos un patrón de fondo.
- En la pestaña Antecedentes, navegue a la sexta pestaña, la pestaña Patrón de fondo, luego haga clic en "Agregar patrón de fondo".
- seleccionar Sonrisas en el menú desplegable y configure estos ajustes:
- Color del patrón: rgba (0,0,0,0.2)
- Transformación de patrón: ninguno
- Tamaño: Cubierta
- Repetir Origen: arriba a la izquierda
- Repetición de patrón: Repetir
- Modo de fusión de patrón: Normal
3. Añadir máscara de fondo
Ahora que tenemos nuestra imagen de fondo y patrón aplicados, agreguemos una máscara de fondo.
- En la pestaña Antecedentes, navegue a la sexta pestaña, la pestaña Máscara de fondo, luego haga clic en "Agregar máscara de fondo".
- seleccionar Lago de la esquina en el menú desplegable y configure estos ajustes:
- Color de la máscara: rgba (10, 10, 10, 0,61)
- Transformación de máscara: horizontal
- Relación de aspecto: rectángulo horizontal
- Tamaño: Cubierta
- Posición de la máscara: centro izquierda
- Modo de mezcla de máscaras: Normal
3. Configurar parámetros de línea
Antes de irnos, esta sección de Héroes tiene estilos de línea únicos. Configuremos esto.
- Dimensionamiento:
- Ancho: 80%
- Ancho máximo: 800px
- Alineación de filas:
- Escritorio: Predeterminado
- Tableta: Centro
- Teléfono: Centro
- Márgenes:
- Izquierda: 20vw
Diseño de la sección Héroe #5
Ahora diseñemos la quinta sección del héroe.
Descarga DIVI ahora!!!
1. Agrega una imagen de fondo
Seleccione su imagen de fondo.
2. Agrega un patrón
Ahora que hemos configurado nuestra imagen de fondo, apliquemos un patrón de fondo.
- En la pestaña Antecedentes, navegue a la sexta pestaña, la pestaña Patrón de fondo, luego haga clic en "Agregar patrón de fondo".
- seleccionar Cruces en el menú desplegable y configure estos ajustes:
- Color del patrón: #ffffff
- Transformación de patrón: ninguno
- Tamaño: Tamaño personalizado
- Ancho del patrón: 10px
- Altura del patrón: 10px
- Repetir origen: superior inferior
- Repetición de patrón: Repetir
- Modo de fusión de patrón: Normal
3. Añadir máscara de fondo
Ahora que tenemos una imagen de fondo y un patrón aplicados, agreguemos una máscara de fondo.
- En la pestaña Antecedentes, navegue a la sexta pestaña, la pestaña Máscara de fondo, luego haga clic en "Agregar máscara de fondo".
- seleccionar Pastillas diagonales en el menú desplegable y configure estos ajustes:
- Color de la máscara: rgba (10, 10, 10, 0,61)
- Transformación de máscara: horizontal
- Relación de aspecto: rectángulo horizontal
- Tamaño: Cubierta
- Posición de la máscara: centro izquierda
- Modo de fusión de máscara: Normal
3. Configurar parámetros de línea
Antes de irnos, esta sección de Héroes también tiene estilos de línea únicos. Configuremos esto.
- Dimensionamiento:
- Ancho: 80%
- Ancho máximo: 800px
- Alineación de filas:
- Escritorio: Predeterminado
- Tableta: Centro
- Teléfono: Centro
- Espaciado:
- Margen (Derecho): 18vw
Ver también: Divi: Cómo agregar máscaras y patrones de fondo a un encabezado
Conclusión
Diseñar una sección Hero única y llamativa para su sitio web es fácil con las nuevas opciones máscara de fondo y patrón de Diví. Cada característica tiene muchas opciones que le permiten crear fondos verdaderamente creativos.
¡Además, puede agregar patrones de fondo y máscaras a cualquier elemento de Divi Builder! Las opciones de diseño son infinitas.
Con suerte, esta técnica agregará otra habilidad de diseño útil para proyectos futuros.
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.
...
