Search
Close this search box.

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

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 our project. Read our affiliate disclosure.
Picture of Editorial Staff

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to turn your WordPress knowledge into revenue? OF COURSE!

1 thought on “How to Add Image Masking in Elementor (Without Add-on)”

  1. Hi,

    Why is the hexagon mask in Elementor not filled? There is a hexagon shaped blank area in the center. How do I fill the shape?

    Reply

Leave a Comment

Share This
Haven’t used Elementor Pro yet?
Hey 👋🏻
Do you have a WP blog?
If so, you may need these. All the resources you need to grow your blog.

Your popup content goes here

50%

Where should we send the template?

After entering your email address, you will be added to our newsletter subscribers. You can unsubscribe anytime.

Want to Build Passive Income Like the One on the Screenshot Below?

Click the button on the right side to learn how 👉🏻
5 easy steps to turn your WordPress knowledge into monthly recurring revenue.

Click the above button to close the popup.