How to Add Image Masking in Elementor (Without Add-on)

Updated: May 26, 2021

Image is an essential element of a design. In Elementor, you can easily add an image to your design — be it page or theme builder template — using the Image widget. The customization options offered by Elementor are also plenty enough. You can apply a hover effect, CSS filters, and so on. Starting version 3.2, you can now also add a mask layer to your image, allowing you to transform your image into a wide range of shapes. Previously, you could only accomplish it using an add-on.

The image masking feature is available on both versions of Elementor so that you don’t need to upgrade to the pro version if you don’t need the pro features. There are six default mask shapes offered by Elementor:

  • Circle
  • Flower
  • Sketch
  • Triangle
  • Blob
  • Hexagon

You can also use your own shape thanks to the SVG support.

How to Add Image Masking in Elementor

First, add an Image widget to the canvas area and upload the image you want to use. New to Elementor? You can read our previous article to learn how to work with the Image widget in Elementor.

You can go to the Style tab to set the size of the image. Once done setting the size, you can go to the Advanced tab and open the Mask block. Enable the Mask option. Select the mask shape on the Shape option. You can set the shape size on the Size option and the shape position on the Position option.

That’s it. You can publish your page/template once you are done editing it.

The Bottom Line

Image masking is a new feature offered by Elementor version 3.2. The feature offers more styling options you can add to an image on your Elementor design. Previously, you could only add an image masking using an add-on (Happy Addons is one of the Elementor add-ons that offer image masking feature). Compared to Happy Addons, the mask shapes offered by Elementor are likely to limited, but since it supports SVG, you can create a custom shape so technically you can add any shape.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 500+ WordPress users receiving tips and insights on creating on WordPress with Elementor.

Hello.

How long have you been using WordPress? If you are an old WordPress user, then you have been a witness how WordPress has evolved massively. It has gone from a merely blogging tool into a comprehensive website builder. You can now use WordPress to create any type of website. From e-commerce website, LMS, listing website, membership website, to social media website.

Do you know what’s more interesting?

You can create your website with WordPress without touching a single line of code. At WP Pagebuilders, we write a lot about how to get the most out of WordPress in the no-code era. Subscribe and be first to know our newest content.