If you want to add a creative edge to your website built using Bricks Builder, the Image Mask feature from Max Addons makes it incredibly simple! No CSS required. This powerful feature lets you apply attractive and dynamic shapes to your images or any other Bricks elements with just a few clicks.
Perfect for team sections, portfolio layouts, service highlights, or hero images, image masks help add a modern, stylish touch to your site while keeping everything lightweight and easy to manage.
Let’s walk through the steps to add an image mask using Max Addons in Bricks Builder.
What is the Image Mask Feature in Max Addons?
Max Addons introduces a Mask feature that enhances the display of your Bricks Builder elements. With this feature, you can wrap your images in creative shapes and layouts that grab attention, without writing a single line of custom code.
This feature is seamlessly integrated with Bricks Builder, and once activated, it appears right inside the style settings of your elements.
How to Add an Image Mask in Bricks Builder
Step 1: Open or Create Your Page in Bricks Builder
To get started, either create a new page or edit an existing one using the Bricks Builder editor.
Step 2: Add the Image Element
For this example, let’s assume you’re building a Team Section and want to apply unique shapes to the team members’ profile images.
Add the Image element to the section where you want it displayed. You can use any image, such as a team photo, icon, or graphic, to which you’d like to apply the mask effect.
Step 3: Enable the Mask Feature in the Style Tab
Once your image is in place, click to select the image element. Head over to the Style tab in the Bricks Builder sidebar.
Scroll until you find the MASK option. Look for the “MAX” label to ensure you’re using the correct feature.
Step 4: Customize the Mask Settings
With the mask feature enabled, you now have access to a range of customization options.
First, you need to choose a Shape that fits your design. Max Addons provides a variety of preset shapes such as Blob, Badge, Cloud, Diamond, Fire, Rhombus, and more.
Each shape offers a distinct and different look, so you can experiment to see what looks best with your content.
Next, we will adjust the Size of the mask. You can choose from options like Auto, Fill, Fit, or go with a Custom setting for more precise control. This option allows you to maintain responsiveness and alignment across devices.
Lastly, you can use the Position setting to place the mask where it looks most visually appealing. You can align the image mask to the Top, Bottom, Center, or even Custom Coordinates. These controls make it easy to fine-tune the mask placement for each element.
See the Image Mask Feature in Action
Image Mask feature is particularly useful in sections where imagery plays a central role. Use it for team bios, testimonials, portfolio pieces, blog headers, or featured products to make your content pop.
This is how our team section appears with the Image Mask feature applied!
Wrapping Up!
Max Addons’ Image Mask feature allows you to add custom, interactive visual styles to your native Bricks Builder elements. It’s beginner-friendly, fast to apply, and adds a creative touch to your designs in minutes.
So, if you want to make your Bricks Builder site stand out, try the Image Mask feature today!
What do you think about this tutorial? We’d love to hear from you, drop a comment below!
