Divi Plugin Highlight: 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 él. También puede agregar el suyo 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 qué puede hacer y veremos qué fácil es usarlo. Puedes comprar Divi Mask en 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 active. El módulo Divi Mask se agrega a 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, rotarlo 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 relleno 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 uno.

Elija la etiqueta de encabezado, ajuste el color de fondo, el ancho de 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, 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á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 gradiente de 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 muestre en el fondo. Usaré uno que sea más obvio más tarde.

Para este, agregué una máscara Circle. 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. Como 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 haría una 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 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 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 gradiente 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 al 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 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í 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 gradiente para que se muestre sobre la imagen de fondo. Esto le da el efecto de que la máscara corta parte del gradiente.

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

Para este, roté la máscara y la moví a 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 borrones interesantes para obtener información.

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

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, configuré la escala 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.

Este usa la máscara Rhombus. Es un cuadrado doblado en su esquina. Lo he ampliado y movido 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 posicioné para mostrarlo de lado. También le he dado un fondo con un toque de transparencia.

Divi Mask Precio y Documentación

Divi Mask cuesta $ 12 e incluye 6 meses de soporte y actualizaciones de por vida. Se puede usar en sitios web ilimitados. Puedes comprar Divi Mask en 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 una breve pregunta frecuente para guiarlo a través del proceso de instalación.

Pensamientos finales

Encontré que Divi Mask es un módulo interesante. Es muy intuitivo. Nunca tuve que leer las instrucciones o mirar el video, pero es bueno que estén disponibles por si acaso. Mis formas favoritas de usarlo son en lugar de una propaganda, como un 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 responden tan bien como a usted le gustaría. Esto es algo que debería tener en cuenta al diseñar con él. Por supuesto, también puede crear versiones de sus diseños para tabletas y dispositivos móviles, y puede probar los diseños utilizando los diversos modos visuales en Divi Builder.

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