How to Apply Image Masking in Elementor

A simple trick can determine the overall design of your page. When creating a page with Elementor, you might want to apply image masking to make the images on your page look standout and unique. Unfortunately, Elementor has no default styling option to apply image masking to an image. If you use Elementor Pro (read the difference between Elementor Free vs Elementor Pro) and have CSS knowledge, you can add a custom CSS to apply image masking to an image. If you have no CSS knowledge at all, you can use Happy Addons to apply image masking in Elementor.

Happy Addons is a freemium Elementor add-on that comes with a feature to apply image masking. This feature itself is only available on the pro version so you need to use the the pro version of Happy Addons to use this feature.

By the way, what is image masking?

Image masking is a process of hiding some portions of an image to reveal some other portions. This process is often applied in image editing tools such as Photoshop and GIMP. Here is the example.

CSS basically has a feature to apply image masking. But again, you need to have CSS skills to use it. You can read this article to learn more about it.

Happy Addons it a great solution to apply image masking in Elementor if you have no CSS knowledge.

How it Works

The feature to apply image masking works on Elementor widgets that involve an image such as the Image widget and the Image Box widget. You will see a new option called Image Masking right beneath the image selector. There are thirty-nine different masking shapes you can choose from. You can also use a custom masking shape by uploading an SVG file.

How to Apply Image Masking

Before getting started, make sure you have installed and activated the pro version of Happy Addons on your WordPress site. You can get it on its official website.

Once everything is ready, create a new page and edit with Elementor, or you can also edit an existing page. Add a widget that involves an image — such the Image widget — to the canvas area.

Go to the left panel and click the image selector on the Image block under the Content tab to select an image you want to use. Once the image is selected, click the pencil icon on the Image Masking option.

Select a masking shape you like. You can also set the position of the masking, set the size, and the repetition. 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).

Once done setting the image masking, you can go to the Style tab to customize your image such as setting the size and applying filters. Publish your page once you are done editing it.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Want to save yearly expense up to $219? why not?

Leave a Comment

Haven’t used Elementor Pro yet?