Apply masks and shapes to your images with Divi

Published on 23/02/2021 | 2 comments

You could use masks on your images to change their traditional shape, this would give an originality to your layout.

For example, you could add a round, triangle or star mask for example! In short, everything is possible. And this is what I propose to discover in this new tutorial : how to apply masks on your images with Divi

You will find detailed explanations as well as an explanatory video.

Announcement: this article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

1 - What is a mask and why use it?

A mask is a term often used in graphic design and in specialized software such as Photoshop for example. It is a "mask" that covers an image to give it the desired shape.

In the web, you could use all types of masks to give original shapes to your images. It's a change from the classic format that we see everywhere and it can give a very graphic aspect to your layout.

Did you know? You can test Divi for free by visiting on this page and clicking on "TRY IT FOR FREE

2 - Make a picture round or oval with the rounded corners

In this case, we can't really talk about a mask, but I think it can help you understand the rest...

It is in fact the CSS property border-radius which simply rounds the corners of an image. If your original image is square, it will be easy to make it perfectly round by applying a border-radius of 100% and the good news is that Divi allows you to do it in 2 clicks:

Rendre une image ronde avec Divi
A square image becomes round by using the border-radius property at 100%.

As you can see in the image above, you can easily round the corners of a square image by going to the Style > Border tab and setting each corner to a value of 100% (not 100px).

In the 3 examples =

  • Example 1 : the angles are 0% => the image is square
  • Example 2 : the 4 corners are at 100% => the image becomes round
  • Example 3: only one angle is at 0% and the other 3 are at 100% => you get an asymmetrical figure that offers some style 😜

But there is a but! This was possible because my original image was square :

Rendre une image ovale à partir d'une image rectangle
A rectangle image cannot become round

If you look at the image above, you can quickly see that using the border-radius property on a landscape ratio imageYou can't get a round image. Your image will become oval and that is quite logical.

However, it can meet some design needs, I guess...

But then, how do you get a round image from a rectangular image?

Don't wait any longer! Discover the Divi theme here !

3 - Applying a round mask to an image with Divi

The answer is coming... Since you can't get a round image from a landscape image, you can use another Divi feature: adding a gradient on the image... A slightly unusual gradient, of course, but a gradient nonetheless!

Here's how to do it:

  1. First add a text module
  2. Delete the waiting text
  3. In the Content > Background tab of the text module settings, add a background image.
  4. At this stage, you can't see the image yet because the "box" is still too narrow.
  5. Go to the Style > Spacing > Inner Margin tab to add about 150px to the top and bottom (values may change depending on image size). Your image appears.
Image masque radial - partie 1
Add a text module and place a background image

Next:

  1. Go back to the Content > Background tab to add a gradient.
  2. The first value of your gradient should be a transparent color and the second value should be the color of your section. For my example, my section is white, so I choose white. If my section was black or red, I would have chosen those colors.
  3. Then place this gradient on the image, by checking the option "Background image of the title "..
  4. Change the gradient to RADIAL instead of LINEAR, then start and end position at 50%. Now you have a round mask covering your image, whether it is square or rectangular.
  5. If you wish, you can add text on top of it or use other Divi features to add originality: rotate the module, animate it or create a zoom effect for example...
Image masque radial - partie 2
Add a radial gradient on the image to simulate a round mask

4 - Adding a bevel to the image

You can also make a bevel on your image, for that, you can follow the previous tutorial (the one of chapter 3) until point number 8, then it is the type of gradient that changes:

Image avec biseau
Image with a bevelled angle

For this example, I have chosen :

  • Linear gradient (instead of radial)
  • Gradient direction: 111° for example
  • Starting position: 79% for example
  • End position 50% for example.

But of course, use the values you want to get the desired look.

5 - Use a mask of any shape (star, heart, triangle, etc.)

For this last tip, you'll need third-party software such as Affinity Designer, Illustrator or Photoshop for example, because Divi alone won't be enough...

So, first of all, you will have to create your custom masks in your software:

Créer un masque dans le logiciel de retouche d'image
Heart mask made with Affinity Designer

With the shapes tool, you will create the mask of your choice and you will choose the adequate color. Be sure to export it in PNG format to keep the transparency.

Back in Divi:

  1. Add a image module
  2. Import your mask in PNG format
  3. In the Content > Background tab, add the background image of your choice
  4. You can activate the parallax to give a sliding effect to scroll the page if you wish.
ajouter un masque sur une image
Add a background image to a PNG mask

Finally, don't forget to define a background color for your section (5), it must be the same color as your mask if you want the effect to be successful:

La couleur section identique à la couleur du masque
The color of the section must be identical to the color of the mask

6 - Creating masks with Divi Mask

If the previous solutions do not meet your needs, the alternative is to use an extension that allows you to create your masks directly from the Visual Builder.

Divi Mask plugin
Divi Mask Plugin

Divi Mask allows you to do just that with pre-configured and editable shapes or with custom shapes (SVG image import). It adds a new module to Divi Builder with unique styles for images and backgrounds.

This is a premium extension ($24) that you can find on the marketplace of Elegantthemes. I also invite you to discover the tutorial on this subject.

7 - Mask on images : the video tutorial !

As you have just seen, masks on your images are very easy to do! In the video, you will find the realization of these effects and some additional tips:

Si la vidéo ne s’affiche pas, voici le lien

Need more resources on Divi? Visit the ElegantThemes blog which is full of ideas and tutorials! Or learn how to use this theme efficiently with my Divi training !

Créer des masques avec Divi
Create Divi masks simply
Crea mascaras con Divi
masques images divi

1,170 words

5

You should like it too:

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Custom 404 error page: with and without the Divi Theme Builder

Have you thought about customising your site's 404 error page? No ? Well, you should: not only is it easy to do, but it could also lower your bounce rate! The idea is to keep the user who passes through your site on your site. Discover the step by step tutorial + video.

2 Commentaires

  1. ivan chosse

    Merci! ça donne des idées! ah si je pouvais avoir vos compétences!!! hihihi

  2. Lycia Diaz

    Ça a à venir Ivan !

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This