Lo más destacado del complemento Divi: máscara Divi

Divi Mask es un complemento de terceros para Divi que agrega un nuevo módulo a Divi Builder con algunos estilos únicos para imágenes y fondos. Coloca una máscara sobre la imagen para que la imagen tome la forma de la máscara. Todo lo que esté fuera de la máscara puede ser del color que desee, incluido un degradado o incluso un fondo diferente.

Incluye 54 máscaras preestablecidas que funcionan como recortes y revelan la imagen que hay detrás. También puede agregar los suyos usando SVG. Incluye encabezados, contenido y una herramienta de fondo. Cada uno de los elementos se puede ajustar y diseñar.

En este complemento destacado, echaremos un vistazo a Divi Mask, veremos lo que puede hacer y lo fácil que es usar. Puedes comprar Divi Mask desde el sitio web del desarrollador .

Módulo de máscara Divi

Cargue y active el complemento de forma normal. No hay nada que configurar. Está listo para usar tan pronto como se activa. El módulo Divi Mask se agrega al Divi Builder.

La pestaña Contenido le permite agregar una imagen, máscara y texto. Otros ajustes le permiten personalizar el color de fondo de la imagen, reflejar la imagen y establecer la opacidad de la imagen. También puede agregar un enlace y un fondo. Esta imagen muestra la pestaña Máscara en la Configuración de máscara. Agregué una imagen del paquete de diseño de eSports.

Esta es la pestaña Máscara en la Configuración de máscara. Agrega un cuadro desplegable donde puede elegir entre 54 máscaras integradas o cargar su propia máscara personalizada usando un complemento gratuito llamado Guardar SVG .

Esta pestaña también agrega opciones para llenar el módulo, seleccionar entre tres versiones de la máscara, escalar al tamaño que desee, rotarla y ajustar la posición horizontal y vertical. He ajustado cada uno de ellos en este ejemplo. Esta es la opción 1 de la máscara Splodge.

Esta es la opción 1 con el módulo de llenado habilitado. Se estira y llena el espacio asignado para el módulo.

Esta es la opción 2 de la máscara Splodge. Crea algunos patrones de manchas interesantes.

Esta es la opción 3 de la máscara Splodge.

La pestaña Texto de la Configuración de máscara agrega áreas para el encabezado y el contenido, con personalizaciones independientes para cada una.

Elija la etiqueta de encabezado, ajuste el color de fondo, el ancho del fondo, la posición horizontal y vertical y la rotación. Los ajustes de texto se manejan en la pestaña Diseño.

El área de contenido agrega un editor completo donde puede agregar texto, imágenes, medios, etc. También incluye ajustes de fondo para el color, el ancho y la posición horizontal y vertical. Este no incluye rotación. Los ajustes para el texto están en la pestaña Diseño.

La pestaña Diseño incluye todas las configuraciones esperadas para encabezados, cuerpo de texto, tamaño, espaciado, borde, sombra de cuadro, filtros, transformación y animación.

La pestaña Avanzado incluye áreas CSS para el encabezado y el texto.

Ejemplos de máscaras Divi

En este ejemplo, estoy usando un conjunto de máscaras de paralelogramo para llenar el módulo. He escalado la máscara y ajustado su rotación y alineación. También agregué un fondo y un degradado de exactamente la misma imagen que usé en la pestaña Imagen de la Configuración de máscara. La máscara revela parte de la imagen y permite que la imagen de fondo se vea en el fondo. Usaré uno que es más obvio más adelante.

Para este, agregué una máscara circular. Coloqué el encabezado sobre la imagen con un fondo blanco. Reduje el ancho y la opacidad del fondo y agregué efectos de sombra al texto. Moví el contenido debajo de la imagen y agregué un conjunto de fotos en las que se puede hacer clic. Dado que utiliza el editor de contenido, cada elemento puede tener una URL diferente, separada del enlace del módulo. Por supuesto, podría colocar el contenido sobre la imagen si quisiera. Esto sería un CTA interesante.

Para este, cambié el fondo a oscuro y moví el texto para superponerlo a la imagen. Aumenté el tamaño del encabezado y el texto del contenido y les di un fondo blanco. Eliminé las imágenes en miniatura del ejemplo anterior para que el foco estuviera en la imagen central.

Para este ejemplo, reemplacé el módulo de imagen central en el paquete de diseño de la agencia de viajes y agregué la misma imagen en el módulo Divi Mask. Reduje la opacidad de la imagen, agregué un texto de encabezado, lo configuré en una posición vertical del 50%, cambié el color del fondo del encabezado y bajé la opacidad. Esta es una manera fácil de crear enlaces a páginas, proyectos, publicaciones o simplemente mostrar información.

Para este ejemplo, estoy creando una sección de ancho completo y agregaré una máscara que se combinará con la separación de la sección. Agregué el encabezado y el texto del contenido, cambié sus colores y tamaños, hice su fondo transparente y los coloqué donde quiero en la imagen.

Agregué una máscara Triángulo y seleccioné la opción 2. La escalé y ajusté la configuración horizontal. También agregué un fondo degradado al módulo. Este mismo degradado se puede reflejar y agregar a la siguiente sección para que se mezclen entre sí.

Esta es la opción 3. Voltea la máscara hacia el otro lado. Moví la posición horizontal para mostrar más de la imagen y ajusté la posición vertical del encabezado y el texto para superponer la máscara. El texto se superpone automáticamente.

Este muestra una máscara de flecha en la opción 1.

Esta es la opción de flecha 4. La coloqué en una fila más pequeña para que se muestre más en mi pantalla.

Esta es la máscara de arranque que usa la configuración predeterminada con mi degradado de fondo.

Aquí hay una bonita máscara de mariposa.

Aquí está la máscara del corazón. Cambié el gradiente de fondo solo para que coincida con el tema del corazón.

Ahora, agregué la misma imagen que el fondo y configuré el degradado para que se muestre sobre la imagen de fondo. Esto le da el efecto de que la máscara corta parte del degradado.

Por supuesto, cualquier imagen se puede utilizar como fondo. En este ejemplo, he reemplazado la imagen de fondo para que la imagen de la máscara se muestre sobre ella. También reduje la opacidad del fondo para que se vea más, haciendo que el efecto sea más prominente.

Para este, giré la máscara y la moví hacia la derecha. He ajustado la opacidad del degradado del fondo. Todavía muestra una imagen de fondo diferente de la imagen de la máscara. También agregué texto de contenido y ajusté el tamaño del texto y la posición vertical y el ancho del contenido. Esto crearía algunos CTA o anuncios publicitarios interesantes para obtener información.

Este usa la máscara de voz. Ajusté su posición horizontal y moví el contenido al centro dentro de él.

Esta es la máscara de borde. Crea un marco de imagen. Lo he centrado, escalado para que se ajuste a las imágenes y centrado el contenido.

Para este, volví a configurar la escala por defecto y seleccioné Módulo de relleno. El borde todavía existe, pero está fuera del área de visualización.

Para este, ajusté la escala para mostrar el borde.

Este usa la máscara Rombo. Es un cuadrado girado en su esquina. Lo he escalado y movido a la derecha. He centrado el contenido y le he dado un fondo con suficiente transparencia para que el fondo se vea. Agregué un encabezado y lo coloqué para que se muestre de lado. También le he dado un fondo con un toque de transparencia.

Precio y documentación de la máscara Divi

Divi Mask cuesta $12 e incluye 6 meses de soporte y actualizaciones de por vida. Se puede utilizar en sitios web ilimitados. Puedes comprar Divi Mask desde el sitio web del desarrollador .

El sitio web del desarrollador también incluye un recorrido detallado del complemento. Esto muestra los conceptos básicos e incluye cómo usar la función SVG para crear sus propias máscaras personalizadas. El sitio también incluye una breve sección de preguntas frecuentes para guiarlo a través del proceso de instalación.

pensamientos finales

Descubrí que Divi Mask es un módulo interesante. Es muy intuitivo. Nunca necesité leer las instrucciones o ver el video, pero es bueno que estén disponibles por si acaso. Mis formas favoritas de usarlo son en lugar de una propaganda, como CTA, para vincular a páginas o productos, o simplemente para agregar un estilo de diseño a una imagen.

Es receptivo, pero es posible crear diseños que no respondan tan bien como te gustaría. Esto es algo que tendría en cuenta mientras diseño con él. Por supuesto, también puede crear versiones para tabletas y dispositivos móviles de sus diseños, y puede probar los diseños utilizando los diversos modos visuales en Divi Builder.

Me gustan las 54 máscaras que están incorporadas. Proporcionan algunas imágenes interesantes y los controles lo amplían aún más. También me gusta que puedas crear el tuyo usando SVG. También es interesante tener encabezados y elementos de contenido separados con fondos que se puedan mover.

Divi Mask abre muchas posibilidades de diseño para imágenes y texto. Si está interesado en agregar recortes a sus imágenes en Divi, vale la pena echarle un vistazo a Divi Mask.

Queremos escuchar de ti. ¿Has probado Divi Mask? Háganos saber lo que piensa al respecto en los comentarios a continuación.

Imagen destacada a través de Oleksandr Korchahin / shutterstock.com