Aplica máscaras y formas a tus imágenes con Divi

Puedes usar máscaras en tus imágenes para cambiar su forma tradicional, esto le daría una originalidad a tu diseño.

Por ejemplo, puedes añadir una máscara redonda, triangular o de estrella. En resumen, todo es posible. Y eso es lo que te propongo descubrir en este nuevo tutorial : cómo aplicar máscaras a tus imágenes con Divi...

Encontrará explicaciones detalladas y un vídeo explicativo.

Aviso: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

1 - ¿Qué es una máscara y por qué utilizarla?

Una máscara es un término que se utiliza a menudo en el diseño gráfico y en los programas informáticos especializados, como el photoshop, por ejemplo. Es una "máscara" que cubre una imagen para darle la forma deseada.

En la web, puedes utilizar todo tipo de máscaras para dar formas originales a tus imágenes. Es un cambio del formato clásico que vemos en todas partes y puede dar un aspecto muy gráfico a su diseño de la página.

¿Lo sabías? Puede probar Divi de forma gratuita visitando en esta página y haciendo clic en "PRUEBA GRATUITA

2 - Hacer un cuadro redondo u ovalado con esquinas redondeadas

En este caso, no podemos hablar de una máscara, pero creo que puede ayudar a entender lo que sucede a continuación.

De hecho, es el Propiedad CSS borde-radio que simplemente redondea las esquinas de una imagen. Si su imagen original es cuadrada, será fácil hacerla perfectamente redonda aplicando un radio de borde del 100% y la buena noticia es que Divi le permite hacer esto en 2 clics:

Como puede ver en la imagen anterior, puede redondear fácilmente las esquinas de una imagen cuadrada yendo a la pestaña Estilo > Borde y estableciendo cada esquina con un valor de 100% (no 100px).

En los 3 ejemplos =

• Ejemplo 1: los ángulos son 0% => la imagen es cuadrada
• Ejemplo 2: las 4 esquinas son 100% => la imagen se vuelve redonda
• Ejemplo 3: sólo un ángulo está al 0% y los otros 3 al 100% => se obtiene una figura asimétrica que ofrece algo de estilo 😜

Pero hay un pero. Esto fue posible porque mi imagen original era cuadrado :

Si observa la imagen anterior, podrá ver rápidamente que el uso de la propiedad border-radius en un imagen con relación al paisajeNo se puede obtener una imagen redonda. Su imagen se volverá ovalada y eso es bastante lógico.

Sin embargo, puede satisfacer algunas necesidades de diseño, supongo...

Pero entonces, ¿cómo se consigue una imagen redonda a partir de una imagen rectangular?

No se demore. Descubra el tema Divi aquí !

3 - Aplicar una máscara redonda a una imagen con Divi

La respuesta está por llegar... Ya que no puedes obtener una imagen redonda a partir de una imagen apaisada, puedes utilizar otra función de Divi: añadir un degradado a la imagen... Un gradiente poco habitual, por supuesto, pero un gradiente al fin y al cabo.

Así es como se hace:

1. Primero añada un módulo de texto
2. Borrar el texto de espera
3. En la pestaña Contenido > Fondo de la configuración del módulo de texto, añada una imagen de fondo.
4. En esta fase, todavía no se puede ver la imagen porque la "caja" es todavía demasiado estrecha.
5. Vaya a la pestaña Estilo > Espaciado > Margen interior para añadir unos 150px a la parte superior e inferior (los valores pueden cambiar dependiendo del tamaño de la imagen). Aparece tu imagen.

Entonces:

6. Vuelva a la pestaña Contenido > Fondo para añadir un degradado.
7. El primer valor de su gradiente debe ser un color transparente y el segundo valor debe ser el color de su sección. Para mi ejemplo, mi sección es blanca, así que elijo el blanco. Si mi sección fuera negra o roja, habría elegido esos colores.
8. A continuación, coloque este gradiente en la imagen, marcando la opción "Esta es la imagen de fondo del título..
9. Cambie el gradiente a RADIAL en lugar de LINEAR, y luego inicie y termine la posición al 50%. Ahora tienes una máscara redonda que cubre tu imagen, ya sea cuadrada o rectangular.
10. Si lo desea, puede añadir texto en la parte superior o utilizar otras funciones de Divi para añadir originalidad: girar el módulo, animarlo o crear un efecto zoom por ejemplo...

4 - Añadir un bisel a la imagen

También puedes hacer un bisel en tu imagen, para ello puedes seguir el tutorial anterior (el del capítulo 3) hasta el punto número 8, luego es el tipo de degradado el que cambia:

Para este ejemplo, he elegido :

• Gradiente lineal (en lugar de radial)
• Dirección del gradiente: 111° por ejemplo
• Posición inicial: 79% por ejemplo
• Posición final 50%, por ejemplo.

Pero, por supuesto, utilice los valores que desee para conseguir el aspecto deseado.

5 - Utilice una máscara de cualquier forma (estrella, corazón, triángulo, etc.)

Para este último consejo, necesitarás un software de terceros como Affinity Designer, Illustrator o Photoshop por ejemplo, ya que Divi por sí solo no será suficiente...

Así que, en primer lugar, tendrá que hacer sus propias máscaras en su software:

Con la herramienta de forma, puedes crear la máscara que desees y elegir el color adecuado. Asegúrate de exportarlo en formato PNG para mantener la transparencia.

De vuelta en Divi :

1. Añade un Módulo de imagen
2. Importe su máscara en formato PNG
3. En la pestaña Contenido > Fondo, añada la imagen de fondo que desee
4. Puede activar el parallax para dar un efecto de deslizamiento para desplazarse por la página si lo desea.

Por último, no olvides establecer un color de fondo para tu sección (5), debe ser del mismo color que tu máscara si quieres que el efecto tenga éxito:

6 - Crear máscaras con Divi Mask

Si las soluciones anteriores no satisfacen sus necesidades, la alternativa es utilizar una extensión que le permita crear sus máscaras directamente desde el Visual Builder.

Divi Mask le permite hacer precisamente eso con formas preconfiguradas y editables o con formas personalizadas (importación de imágenes SVG). Añade un nuevo módulo al Divi Builder con estilos únicos para imágenes y fondos.

Se trata de una extensión premium (24 dólares) que puedes encontrar en la página web mercado de Elegantthemes. También le invito a descubra el tutorial sobre este tema.

7 - Máscara en las imágenes: ¡el video tutorial!

Como acabas de ver, ¡las máscaras en tus imágenes son muy fáciles de hacer! En el vídeo encontrarás la realización de estos efectos y algunos consejos adicionales:

¿Necesitas más recursos sobre Divi? Visite el blog de ElegantThemes que está lleno de ideas y tutoriales. O aprenda a utilizar este tema de forma eficaz con mi formación en Divi !