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.
- 1 - What is a mask and why use it?
- 2 - Make a picture round or oval with the rounded corners
- 3 - Applying a round mask to an image with Divi
- 4 - Adding a bevel to the image
- 5 - Use a mask of any shape (star, heart, triangle, etc.)
- 6 - Creating masks with Divi Mask
- 7 - Mask on images : the video tutorial !
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:
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 :
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:
- First add a text module
- Delete the waiting text
- In the Content > Background tab of the text module settings, add a background image.
- At this stage, you can't see the image yet because the "box" is still too narrow.
- 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.
- Go back to the Content > Background tab to add a gradient.
- 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.
- Then place this gradient on the image, by checking the option "Background image of the title "..
- 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.
- 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...
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:
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:
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:
- Add a image module
- Import your mask in PNG format
- In the Content > Background tab, add the background image of your choice
- You can activate the parallax to give a sliding effect to scroll the page if you wish.
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:
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 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.
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: