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

Podrías usar máscaras en tus imágenes para cambiar su forma tradicional, daría una originalidad a su diseño.

Por ejemplo, usted podría añadir un máscara redonda, triángulo o estrella par exemple ! Bref, tout est possible. Et c'est ce que je vous propose de découvrir dans ce nouveau tutoriel : cómo aplicar máscaras a sus imágenes con Divi...

Vous trouverez les explications détaillées ainsi qu'une vidéo explicative.

1 - Qu'est-ce qu'un masque et pourquoi s'en servir ?

Una máscara es un término utilizado a menudo en gráficos y software especializado como fotoshop, por ejemplo. Il s'agit d'un "cache" qui recouvre une image afin de lui donner la forme désirée.

En la web, usted podría utilizar todo tipo de máscaras para dar formas originales a sus imágenes. Ça change du format classique que l'on voit partout et cela peut donner un aspect très graphique à votre diseño.

¿Lo sabías? Puedes probar Divi gratis visitando en esta página y haciendo clic en "Pruébalo GRATIS"

2 - Rendre une image ronde ou ovale grâce aux angles arrondis

Pour ce cas de figure, on ne peut pas vraiment parler de masque mais je pense que cela peut vous aider à comprendre la suite...

Il s'agit en fait de la CSS property border-radius qui permet simplement d'arrondir les angles d'une image. Si votre image d'origine est carré, será fácil devolverlo perfectamente redondo aplicando a 100% frontera-radius y la buena noticia es que Divi te permite hacerlo en 2 clics:

Comme vous le voyez sur l'image ci-dessus, vous pouvez facilement arrondir les angles d'une image carrée en vous rendant à l'onglet Estilo Frontera y definir cada ángulo con un valor del 100% (no 100px).

En los 3 ejemplos =

• Exemple 1 : les angles sont à 0% => l'image est carrée
• Exemple 2 : les 4 angles sont à 100% => l'image devient ronde
• Ejemplo 3: Sólo un ángulo es 0% y el otro 3 son 100% = curso obtienes una figura asimétrica que ofrece cierto estilo

Mais il y a un mais ! Cela a été possible car mon image d'origine était cuadrado :

Si vous regardez l'image ci-dessus, vous comprenez rapidement qu'en utilisant la propriété border-radius on a relación imagen-paisaje, nous ne pouvez pas obtenir une image ronde. Votre image deviendra ovale et c'est tout à fait logique.

Toutefois, cela peut répondre à certain besoin de design, j'imagine...

Pero entonces, ¿cómo conseguir una imagen redonda à partir d'une Imagen rectangular ???

¡No te demores! Descubre el tema Divi aquí. !

3 - Appliquer un masque rond sur une image avec Divi

La réponse arrive... Comme vous ne pouvez pas obtenir une image ronde à partir d'une image au format paysage, vous pouvez utiliser une autre fonctionnalité de Divi : l'ajout d'un dégradé sur l'image... Un dégradé un peu particulier, certes, mais un dégradé quand même !

Así es como:

1. Ajoutez d'abord un Módulo de texto
2. Supprimez le texte d'attente
3. En la pestaña Contenido > Antecedentes configuración del módulo de texto, añadir una imagen de fondo.
4. À ce stade, vous ne voyez pas encore l'image car "la boite" est encore trop étroite.
5. Vaya a la pestaña Estilo > Spacing > Margin interno añadir unos 150 px en la parte superior e inferior (los valores pueden cambiar dependiendo del tamaño de las imágenes). Su imagen aparece.

Siguiente:

6. Retournez à l'onglet Contenido > Antecedentes para añadir un gradiente.
7. El primer valor de su gradiente debe ser color transparente y el segundo valor el color de su sección. Pour mon exemple, ma section est blanche, alors je choisis le blanc. Si ma section était noire ou rouge, j'aurais choisi ces couleurs.
8. Placez ensuite ce dégradé sur l'image, en cochant l'option "Image de fond du titre".
9. Editar gradiente para hacerlo RADIAL para LINEARIO, luego la posición de inicio y final al 50%. Ahí tienes. una máscara redonda cubre su imagen, ya sea cuadrado o rectangular.
10. Si vous le souhaitez, vous pouvez ajouter du texte par-dessus ou utiliser d'autres fonctionnalités de Divi pour apporter de l'originalité : réaliser une rotation du module, une animation ou un efecto zoom par exemple...

4 - Ajouter un biseau sur l'image

Vous pouvez également réaliser un biseau sur votre image, pour cela, vous pouvez suivre le tutoriel précédent (celui du chapitre 3) jusqu'au point numéro 8, ensuite c'est le type de dégradé qui change :

Pour cet exemple, j'ai choisi :

• Degradación lineal (en lugar de radial)
• Dirección de gradiente: 111° por ejemplo
• Posición de inicio: 79% por ejemplo
• Posición final 50% por ejemplo.

Pero por supuesto, utilice los valores que desea obtener la renderización deseada.

5 - Utiliser un masque de n'importe quelle forme (étoile, cœur, triangle, etc.)

Pour cette dernière astuce, vous aurez besoin d'un logiciel tiers tel que Affinity Designer, Illustrator o Photoshop par exemple, car Divi seul ne suffira pas...

Así que, al principio, tendrás que darte cuenta Máscaras personalizadas en su software:

Avec l'outil des Formas, te darás cuenta de máscara de su elección y usted elegirá el Color adecuado. Veillez à l'exporter au Formato PNG para mantener la transparencia.

De vuelta en Divi:

1. Añadir a Módulo de imagen
2. Importa tu Máscara de formato PNG
3. En la pestaña Contenido > Antecedentes, ajoutez l'image de fond de votre choix
4. Puedes activar el paralaja para dar un efecto deslizante desplazando la página si lo deseas.

Enfin, n'oubliez pas de définir une couleur de fond pour votre section (5), elle doit être del mismo color que tu máscara si vous voulez que l'effet soit réussi :

6 - Créer des masques avec Divi Mask

Si les solutions précédentes ne répondent pas à vos besoins, l'alternative est d'utiliser une extensión que permite crear sus máscaras directamente desde el Editor Visual.

Divi Mask permet justement de faire cela avec des formes pré-configurées et modifiables ou avec des formes personnalisées (import d'images SVG). Il ajoute un nouveau module au Divi Builder avec des styles uniques pour les images et les arrière-plans.

Il s'agit d'une extension premium (24$) que vous trouverez sur la marketplace d'Elegantthemes. También te invito a descubrir el tutorial sobre este tema.

7 - Masques sur images : le tutoriel en vidéo !

Acabas de verlo, las máscaras en tus imágenes son muy fáciles de hacer! En el video, encontrará la realización de estos efectos y algunos consejos adicionales:

¿Necesita más recursos en Divi? Visita Elegante Themes blog lleno de ideas y tutos! O aprender cómo utilizar eficazmente este tema a través de mi entrenamiento Divi !