In this tutorial, we’ll get to know Elementor’s Mask Option. Which allows you to give elements a new shape by turning them into mask-based objects, really making your sites stand out! This tutorial will cover:
✔︎ Applying masks to widgets
✔︎ Using default shapes & custom SVG’s or PNG’s
✔︎ Customizations & tweaking for mobile devices
✔︎ And much more!
Hi All! It’s Ziv from Elementor.
Today, I’ll show you how to use the Mask Option in Elementor. Which allows you to turn widgets into mask-based objects. And apply shapes to them.. that hide parts of the content.. Just like I did with this image over here.
Masks are easy to use and can be applied to any element you want, like an image, video, or google maps widget.. to create stylish designs that really make your site stand out. [profile image example]
So let’s dive and see how it works.
In this video, we’ll go over the different masking options, and see different ways you can use them to promote your work.
let’s jump right in.
For this tutorial I’ll be working on this free landing page template from our library
Let’s start off by dragging in a simple image widget..
Then,.. choose your image
In the style Tab ..I’ll go ahead and add a cool hover animation.. just to bring it to life a bit. [hide panel + hover over to preview]
Okay.. looks alright, but it’s a bit plain and doesn’t really fit in with the rest of the design.
Turning it into a shape by applying a mask to it..will certainly make it stand out.
You can find The Mask Option in the Advanced tab of any widget.
Simply click to toggle it on.
By default, the shape is set to circle .. which actually fits well here.
But you can also choose other shapes from the list.. Such as a flower… or this blob for example..
And if you want to create an even more customized design.. There’s also an option to upload your own custom SVG or PNG mask shapes, which is what I’ll do for this example.
I’ll use an SVG file I specifically created for this design so it fits in nicely next to the title.
Next, you can set the size of the mask. These options allow you to specify how the mask should be resized to fit: in the widget | its container | in the widget’s container.
By default it’s set to Fit.. which makes sure the mask fits exactly inside the border of the widget.. while maintaining its aspect ratio.
Setting it to fill, stretches the mask .. so it takes up as much space as possible.. regardless of the aspect ratio.
Alternatively, you can click on “custom” to set a specific size.
You can either use the scale slider,.. or enter a precise value to get the result you are looking for [drag slider to 300px, then set 420px]
Once the size of the mask is set, you can choose the position of the mask that best fits your design. [set to center left, center right and back to center center]
You can also set the mask to repeat itself in a variety of ways, just play around with the controls to see what works. [set to repeat and scale to 200]
For this design I’ll disable the repeat and set the size to fit.
The cool thing is that these settings have device icons, meaning they can be tweaked specifically for tablet and mobile devices. [for the position setting: hover over the icons and click on mobile]
For example.. Set the position to center left on mobile devices.. So it’s aligned with the rest of your design. Cool!
Well.. that’s it!
Now you know how to apply masks in Elementor and use them to really make your designs stand out!
Apply them to video widgets.. and create unique visuals that bring your website to life.. !
Or create a custom mask like this smart-phone mockup and apply it to an image carousel widget..
There’s are so many ways to play around with masks!
We are looking forward to seeing what you come up with..So Let your imagination go wild and don’tM be shy to share your creations in the comments below!
Thanks for watching. As always don’t forget to like and subscribe to our channel for more Elementor tutorials! Ciao for now!
