Cómo usar las máscaras y patrones de fondo de Divi para una sección de héroe
Las nuevas máscaras y patrones de fondo de Divi son una de nuestras nuevas características de diseño más emocionantes 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 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 ajusten al diseño de una máscara. Esto debería ayudarlo a brindarle las herramientas que necesita para crear la sección principal perfecta para su sitio en minutos.
¡Vamos a divertirnos un poco!
Suscríbete a nuestro canal de Youtube
Vistazo
Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.
Aquí hay una sección de héroe de ejemplo con una máscara blanca y un patrón.
Aquí hay una versión oscura de la misma sección de héroe con una máscara y un patrón negros.
¡Con este diseño en su lugar, puede cambiar fácilmente las máscaras y las posiciones de las 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 las máscaras y patrones de fondo de Divi en la sección de tu héroe
1. Crear 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 diseño, nuestro diseño visual se creará utilizando las opciones de fondo de Divi. Pero antes de entrar en eso, necesitamos crear una fila de dos columnas para que podamos ahorrar espacio en el lado derecho de la página para mostrar el diseño de patrones y máscaras de fondo de nuestra sección.
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 sea grande y hermoso, debemos 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. 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 se apilan verticalmente.
Abra la configuración de la sección. En la pestaña de diseño, actualice el relleno de la siguiente manera:
- Acolchado: 20vw arriba, 20vw abajo
- Acolchado (tableta): 8vw arriba, 48vw abajo
- Acolchado (teléfono): 8vw arriba, 70vw abajo
4. Agregue una imagen de fondo y un 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 estéticamente más agradables, por lo que funciona muy bien.
En la pestaña de imagen, cargue la imagen en el fondo de la sección.
En Divi, puede agregar fácilmente un degradado de color sobre la imagen de fondo. En la pestaña de degradado, agregue el siguiente degradado al fondo de la sección:
- Color de degradado izquierdo: #3e22ff
- Color de degradado derecho: transparente
- Coloque el degradado sobre la imagen de fondo: SÍ
5. Crea un Patrón de Fondo para la Sección
Ahora que nuestra imagen de fondo y el degradado están listos, podemos agregar un patrón de fondo para complementar 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 de patrones, actualice lo siguiente:
- Patrón de fondo: copetudo
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.
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, vamos a utilizar la máscara de panal.
En la pestaña de máscaras, actualice lo siguiente:
- Máscara: Panal
- Color de la máscara: #ffffff
- Tamaño de la máscara: Cubierta
7. Ajustar la posición de la imagen de fondo
Dado que estamos usando una máscara de fondo, una parte de nuestra imagen de fondo está oculta (o «enmascarada»). Por lo tanto, es posible que deba ajustar la posición de la imagen de fondo en un lugar donde una parte particular de la imagen sea visible a través de la máscara. Para hacer esto, puede usar la posición de la imagen de fondo y las opciones de desplazamiento para empujar la imagen de fondo en el lugar correcto.
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 de la imagen, actualice lo siguiente:
- Posición de la imagen de fondo: Abajo a la derecha
- Desplazamiento horizontal de la imagen de fondo: -4vw
Observe cómo la imagen de fondo se puede mover hacia la derecha.
8. Usa un modo de fusión
Una forma en que podemos ser creativos 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 combinar varias capas de fondo (imagen, degradado, máscara, etc.) de forma creativa.
Para este ejemplo, vamos a combinar la imagen de fondo con el color degradado. Para hacer esto, haga clic en la pestaña de la imagen de fondo y agregue un modo de fusión para combinar el color degradado con la imagen de fondo de la siguiente manera:
NOTA: El modo de fusión multiplicar básicamente multiplica la capa actual (en este caso, la imagen de fondo) con el degradado de fondo. Una manera fácil de pensar en el efecto es imaginar dos diapositivas en un proyector de diapositivas apiladas una detrás de la otra. Si proyecta las dos imágenes en una pantalla, obtendrá una mezcla de las dos ligeramente más oscura.
Para obtener más información sobre los modos de fusión, consulte este
9. Ajusta la 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, ya agregamos 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 de máscara, active las opciones de respuesta y actualice lo siguiente:
en tableta…
- Transformación de máscara: voltear verticalmente, voltear horizontalmente, rotar
- Relación de aspecto de la máscara: cuadrado
En el teléfono…
- Transformación de máscara: voltear verticalmente, voltear horizontalmente, rotar
- Relación de aspecto de la máscara: Retrato
El resultado
Echa un vistazo al diseño que hemos creado hasta ahora.
Un escritorio…
Una tableta…
Un teléfono…
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).
Luego cambie el color del patrón a negro.
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.
Resultados finales
Aquí hay otro vistazo a nuestros resultados finales.
Pruebe diferentes máscaras y opciones de transformación
Con este diseño de fondo de sección de héroe en su lugar, podemos experimentar con otras máscaras de fondo (y patrones) seleccionando diferentes máscaras de la lista. Entonces puedes usar
¡Obtenga más máscaras de fondo y diseños de patrones!
Si quieres más diseños como este, echa un vistazo a estos 12 diseños de patrones y máscaras de fondo para descargar gratis.
Pensamientos finales
Diseñar una sección principal para tu sitio web es muy divertido con las máscaras y patrones de fondo de Divi. 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!
Espero escuchar de usted en los comentarios.
¡Salud!
