Would you like to apply the image mask in Elementor ?
A simple trick can determine the overall design of your page. When creating a page with Elementor, you may want to apply an image mask to make your page images stand out and unique. Unfortunately, Elementor does not have a default style option for applying the image mask to an image.
If you use Elementor Pro and have CSS knowledge, you can add custom CSS to apply the image mask to an image. If you have no CSS knowledge, you can use the Happy Addons add-on plugin to apply image mask in Elementor.
Happy Addons is a freemium Elementor addon that comes with a function to apply the image mask. This feature itself is only available on the pro version, so you need to use the pro version of Happy Addons to use this feature.
By the way, what is the image mask?
Image masking is a process of hiding certain parts of an image to emphasize other parts. This process is often applied in image editing tools such as Photoshop and GIMP.
Here is the example.
The CSS basically has a feature to apply the image mask. But again, you must have CSS skills to use it. you can read this article to know more.
Happy Addons is a great solution to apply image mask in Elementor if you don't have any CSS knowledge.
How it works
The apply image mask feature works on Elementor widgets that manipulate an image such as Image widget and Image Box widget. You will see a new option called Image mask just below the image selector. You can choose from thirty-nine different mask shapes. You can also use a custom mask shape by uploading an SVG file.
How to Apply Image Mask
Before you start, make sure you have installed and activated the pro version of Happy Addons on your website WordPress. You can get it on Its official website.
Once everything is ready, create a new page and edit there with Elementor, or you can also edit an existing page. Add a widget that involves an image — such as the Image widget — to the edit box.
Go to the left panel and click the image picker on the Image block under the Contents tab to select an image you want to use. Once the image is selected, click on the pencil icon on the Image Maskinoption g.
Select a masking shape that you like. You can also set the position of masking, set size and repeat. If you want to use a custom masking shape using an SVG file, you can click the image icon (next to the Happy Addons icon).
After finishing the image masking setting, you can go to Style tab to customize your image, such as setting the size and applying filters. Publish your page once you're done editing it.
Get Elementor Pro Now!!!
Conclusion
Here ! That's it for this article that shows you how apply image mask in Elementor. If you have any concerns about how to get there let us know within Comments.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
