¿Te gustaría usar las máscaras y patrones para tu sección Hero en Divi ?

Nuevas máscaras y patrones de fondo de Divi son una de nuestras mejores características de diseño nuevas hasta el momento. Cada una de las máscaras y patrones se puede combinar con otros elementos de fondo (como colores, imágenes y degradados) para obtener innumerables combinaciones únicas con solo unos pocos clics.

Hoy te mostraremos cómo usar Divi y sus nuevas máscaras y patrones de fondo para diseñar una sección de héroe. 

En este tutorial, cubriremos los pasos importantes necesarios para crear máscaras y patrones de fondo. 

Incluso le mostraremos cómo colocar las imágenes de fondo para que se adapten al diseño de una máscara. Esto debería darle la outils necesita crear la sección Hero perfecta para su sitio en minutos.

vista

Aquí hay un vistazo rápido al diseño que crearemos en este tutorial.

Lea también: Divi: cómo crear una cuadrícula de imagen receptiva con enlaces y efectos de desplazamiento

Sección de ejemplo de Hero con una máscara blanca y un patrón.

usa máscaras y patrones para tu sección Hero en Divi

Aquí hay una versión oscura de la misma sección Hero con una máscara y un patrón negros.

usa máscaras y patrones para tu sección Hero en Divi

¡Con este diseño en su lugar, puede cambiar fácilmente las máscaras y las posiciones de las máscaras con solo unos pocos clics!

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.

Divi líneas convertidas en pestañas

Dale un título que tenga sentido para ti y haz clic en Uso Divi Astillero

#titulo de la imagen

A continuación, haga clic Empezar a construir (Construir desde cero)

Divi líneas convertidas en pestañas

Después de eso tendrás un lienzo en blanco para empezar a diseñar en Divi.

Cómo usar las máscaras y los patrones de fondo de Divi en la sección de tu héroe

1. Crea la estructura de diseño

Para esta sección principal, vamos con una estructura de diseño clásica con el título y la llamada a la acción a la izquierda y una imagen (o diseño visual) a la derecha. 

Para este ejemplo, nuestro diseño visual se creará utilizando las opciones de fondo de Divi. Pero antes de llegar al meollo del asunto, necesitamos crear una fila de dos columnas para ahorrar espacio en el lado derecho de la página para mostrar nuestra sección de máscaras de fondo y diseño de patrones.

máscaras y patrones de fondo sección divi hero

2. Añade el título y la llamada a la acción

En la columna izquierda (columna 1), agregue un módulo de texto para su título principal, un módulo de texto para el texto de su subtítulo y un módulo de botón para su botón.

máscaras y patrones de fondo sección divi hero
máscaras y patrones de fondo sección divi hero

3. Agregue espaciado vertical a la sección

Para que nuestro diseño de fondo se vea alto y hermoso, debemos agregar altura vertical a la sección. Una forma sencilla de hacer esto es agregar relleno en la parte superior e inferior de la sección. Tenga en cuenta que debemos ajustar el relleno en la pantalla de la tableta y el teléfono para dejar espacio para nuestro diseño de fondo una vez que las columnas estén apiladas verticalmente.

Configuración de la sección abierta. En la pestaña de diseño, actualice el relleno de la siguiente manera:

  • Relleno :
    • Escritorio: Superior 20vw, Inferior 20vw
    • Tableta: Superior 8vw, Inferior 48vw
    • Teléfono: Superior 8vw, Inferior 70vw
máscaras y patrones de fondo sección divi hero

4. Agregar imagen de fondo y degradado

A continuación, podemos agregar una imagen de fondo y un degradado a la sección. Tenga en cuenta que el punto focal principal de la imagen de fondo se revelará en el lado derecho de la sección, así que use una imagen que tenga lo que desea ver en el lado derecho. 

Para este ejemplo, estamos usando una imagen con el horizonte de una ciudad. El lado derecho de la imagen tiene edificios más cercanos y de mejor apariencia, por lo que funciona muy bien.

En la pestaña Imagen de fondo, sube la imagen en la sección de fondo.

máscaras y patrones de fondo sección divi hero

En Divi, puede agregar fácilmente un degradado de color en la imagen de fondo. Debajo de la pestaña Gradiente de fondo, agregue el siguiente degradado al fondo de la sección:

  • Paradas de gradiente:
    • 0%: #3e22ff
    • 100%: claro
  • Gradiente cuadrado sobre la imagen de fondo: SÍ
máscaras y patrones de fondo sección divi hero

5. Crea un patrón de fondo para la sección.

Ahora que tenemos nuestra imagen de fondo y el degradado listos, podemos agregar un patrón de fondo para completar el diseño. 

En este ejemplo, vamos a usar un patrón sutil que solo agrega un poco de textura para darle un aspecto más exclusivo.

En la pestaña Patrones de fondo, actualice lo siguiente:

  • Patrón de fondo: copetudo
máscaras y patrones de fondo sección divi hero

ASTUCO: Con patrones de fondo, por lo general es mejor mantenerlo sutil. Intente usar tamaños personalizados para diseños más pequeños, luego reduzca la opacidad del color.

6. Crea una máscara de fondo para la sección.

Con nuestro patrón de fondo en su lugar, finalmente estamos listos para probar una nueva máscara de fondo para nuestro diseño. Hay un montón de opciones y variaciones para elegir. Para este ejemplo, usaremos la máscara de panal.

En la pestaña Máscara de fondo, actualice lo siguiente:

  • Máscara: Panal
  • Color de la máscara: #ffffff
  • Tamaño: Cubierta
máscaras y patrones de fondo sección divi hero

7. Ajuste la posición de la imagen de fondo

Como estamos usando una máscara de fondo, parte de nuestra imagen de fondo está enmascarada (o "enmascarada").

En este ejemplo, nos aseguraremos de que la parte inferior derecha de la imagen sea más visible y la moveremos un poco hacia la derecha para mostrar más edificios.

En la pestaña Imagen, actualice lo siguiente:

  • Posición de la imagen de fondo: Abajo a la derecha
  • Desplazamiento horizontal de la imagen de fondo: -4vw

8. Usa un modo de fusión

Una forma de ser creativo con todos estos elementos de fondo es agregar un modo de fusión. Los modos de fusión se pueden agregar a cualquiera de las opciones de fondo y se pueden usar para mezclar varias capas de fondo (imagen, degradado, máscara, etc.) de forma creativa.

Para este ejemplo, combinaremos la imagen de fondo con el color degradado. Para hacer esto, haga clic en la pestaña Imagen de fondo y agregue un modo de fusión para combinar el color degradado con la imagen de fondo de la siguiente manera:

  • Mezcla de imagen de fondo: Multiplicar
máscaras y patrones de fondo sección divi hero

9. Ajustar máscara de fondo para móvil

Es importante asegurarse de que el diseño de la máscara de fondo también se vea bien en los dispositivos móviles. Afortunadamente, las opciones integradas facilitan este proceso. 

Recuerde que ya hemos agregado el relleno adicional en la tableta y el teléfono para hacer espacio para nuestro diseño de fondo. 

Ahora todo lo que tenemos que hacer es usar las opciones de transformación de fondo y relación de aspecto para ajustar la máscara para dispositivos móviles.

En la pestaña Máscara de fondo, habilite las opciones receptivas y actualice lo siguiente:

Versión para tableta

  • Transformación de máscara: voltear verticalmente, voltear horizontalmente, rotar
  • Relación de aspecto de la máscara: cuadrado
máscaras y patrones de fondo sección divi hero

Versión del teléfono

  • Transformación de máscara: voltear verticalmente, voltear horizontalmente, rotar
  • Relación de aspecto de la máscara: Retrato
máscaras y patrones de fondo sección divi hero

El resultado

Echa un vistazo al diseño que hemos creado hasta ahora.

Ordenador de oficina

usa máscaras y patrones para tu sección Hero en Divi

Versión de tableta

usa máscaras y patrones para tu sección Hero en Divi

Edición de teléfono

usa máscaras y patrones para tu sección Hero en Divi

10. Crea 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).

máscaras y patrones de fondo sección divi hero

Luego cambie el color del patrón a negro.

máscaras y patrones de fondo sección divi hero

Luego cambie el título y el texto del subtítulo a blanco. Y es posible que también desee actualizar el color del botón.

máscaras y patrones de fondo sección divi hero

Así es como se ve la versión oscura.

usa máscaras y patrones para tu sección Hero en Divi

Resultados finales

Ver también: Divi: Cómo personalizar el enlace "Leer más" de un Blog

Aquí hay otro vistazo a nuestros resultados finales.

usa máscaras y patrones para tu sección Hero en Divi
usa máscaras y patrones para tu sección Hero en Divi

¡¡¡Descarga DIVI ahora!!!

Conclusión

Diseñe una sección Hero para su Sitio web es muy divertido con máscaras y patrones de fondo por Divi. Las opciones de fondo son fáciles de cambiar para obtener el diseño perfecto. Y hay muchas otras opciones que puede usar (como los modos de fusión) para crear fondos 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!

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, consulte nuestra guía sobre 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.

...