Resaltado del complemento Divi: Máscara Divi

Divi Mask es un complemento de terceros para Divi que agrega un nuevo módulo al 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, revelando la imagen detrás de ellas. También puede agregar los suyos usando SVG. Incluye títulos, 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 veremos qué tan fácil es de usar. Puede comprar Divi Mask en el sitio web del desarrollador.

Módulo de máscara Divi

Sube y activa el complemento como de costumbre. No hay nada que configurar. Está listo para usar tan pronto como se active. 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 utilizando 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. Estira y llena el espacio asignado al 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 uno.

Elija la etiqueta de título, 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. Éste no incluye rotación. Los ajustes para el texto se encuentran en la pestaña Diseño.

La pestaña Diseño incluye todas las configuraciones esperadas para encabezados, texto del cuerpo, 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áscara Divi

En este ejemplo, estoy usando un conjunto de máscara de paralelogramo para llenar el módulo. Escale la máscara y ajusté su rotación y alineación. También agregué un fondo y un degradado de la misma imagen exacta 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 sea más obvio más adelante.

Para este, agregué una máscara de círculo. Coloqué el encabezado sobre la imagen con 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 superponer 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 enfoque 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 50% de posición vertical, 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 transparente su fondo y los coloqué donde los quiero en la imagen.

Agregué una máscara de triángulo y seleccioné la opción 2. La amplié 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. Gira 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.

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

Esta es la opción de flecha 4. La he colocado 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í tienes una bonita máscara de mariposa.

Aquí está la máscara del corazón. Cambié el degradado 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, reemplacé 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. Ajusté la opacidad del degradado del fondo. Todavía muestra una imagen de fondo diferente a 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 algunas llamadas a la acción o anuncios publicitarios interesantes para obtener información.

Éste usa la máscara del habla. 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, lo he escalado para que se ajuste a las imágenes y he centrado el contenido.

Para este, configuré la escala de nuevo a la predeterminada y seleccioné el 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.

Éste usa la máscara Rhombus. Es un cuadrado doblado en su esquina. Lo amplié y lo moví a la derecha. He centrado el contenido y le he dado un fondo con suficiente transparencia para que se vea el fondo. 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 Divi Mask

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

El sitio web del desarrollador también incluye un tutorial 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 unas preguntas frecuentes breves que le guiarán a través del proceso de instalación.

Pensamientos finales

Divi Mask me pareció 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. Mi forma favorita de usarlo es en lugar de una propaganda, como un CTA, para vincular páginas o productos, o simplemente para agregar un estilo de diseño a una imagen.

Responde, pero es posible crear diseños que no responden tan bien como te gustaría. Esto es algo que tendré en cuenta mientras estoy diseñando 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 distintos modos visuales en Divi Builder.

Me gustan las 54 máscaras que están integradas. Proporcionan algunas imágenes interesantes y los controles lo amplían aún más. También me gusta que puedas crear el tuyo propio usando SVG. También es interesante tener elementos de contenido y encabezado separados con fondos que se pueden 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