How to mask Image & Video using Transparent PNG or SVG file for custom shape layouts in elementor? [Video Tutorial]

Updated onApril 11, 2026By

Key Takeaways

  • The Plus Addons for Elementor includes a feature to mask images and videos using transparent PNG or SVG files.
  • Designers and developers use The Plus Addons for Elementor to enhance their Elementor websites.
  • The video tutorial on masking images and videos lasts 4 minutes and 28 seconds.
Table Of Content
YouTube video
Video Duration: 04 : 28

Video Overview

Elementor widget to mask your Image and Video layout to craft custom layout to showcase your layout with unique shapes. You can setup that using transparent PNG image and SVG image for extra ordinary layout.

This feature is part of The Plus Addons for Elementor plugin. It’s awarded as a best elementor third party addons. It’s used by lots of designers and developers to super charge their Elementor website.

Above Feature/Widget URL :
• https://theplusaddons.com/elementor-widget/creative-images-for-elementor/

• https://theplusaddons.com/elementor-widget/video-player/

Official Plugin Website : https://theplusaddons.com/
Purchase Link : https://theplusaddons.com/pricing/

You can join us to discuss or Stay Tuned to get updates.
Facebook Community : https://www.facebook.com/groups/theplus4elementor/
Facebook Page : https://www.facebook.com/tpaelementor/

Get further Support : https://store.posimyth.com/helpdesk/


Documentation : https://theplusaddons.com/docs/

Technical Support (Pro Users) :
You can reach for any kind of technical help using https://store.posimyth.com/helpdesk We are available for support from 9AM to 6PM as per IST (UTC+5:30) timezone during weekdays.

Get in touch with us directly on messenger.
Facebook Live Chat : https://m.me/theplusaddonsforelementor/

Get The Plus Addons for Elementor
View 120+ Elementor Widgets Demo

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
LinkedIn X GitHub YouTube Website
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What should I do if my transparent PNG or SVG isn't masking the image or video correctly?

If your transparent PNG or SVG isn't masking as expected, check the image file for proper transparency settings. Ensure that the file is saved correctly with transparency enabled. Additionally, verify that you're using the correct widget from The Plus Addons for Elementor, as it is specifically designed for this purpose. If issues persist, consider reaching out for support through their helpdesk.

What are the best practices for creating custom shape layouts with The Plus Addons for Elementor?

When creating custom shape layouts, ensure your transparent PNG or SVG files are high quality and properly sized for your layout. Using SVGs can provide better scalability without loss of quality. Additionally, test your designs across different devices to ensure they render correctly. The Plus Addons for Elementor is optimized for these tasks, making it easier to achieve the desired effect.

Does The Plus Addons for Elementor work with other page builders besides Elementor?

The Plus Addons for Elementor is specifically designed to work only with Elementor. It does not support other page builders like Gutenberg, Beaver Builder, or Divi. This specialization allows for enhanced performance and features tailored to Elementor users. If you're using Elementor, you can maximize your design capabilities with this plugin.

What happens if I use a non-transparent image for masking?

Using a non-transparent image for masking will not produce the desired effect. The masking feature relies on the transparency of PNG or SVG files to create unique shapes. If you use a solid image, it will not blend or mask correctly, resulting in a standard rectangular layout. Always ensure your masking files are appropriately prepared for the best results.

Are there any limitations when using SVG files for masking in Elementor?

While SVG files are versatile for masking, they may not display correctly if they contain unsupported features or complex elements. It's essential to simplify the SVG design and ensure it adheres to web standards. Additionally, some older browsers may have limited support for SVGs, so testing across various platforms is advisable to ensure consistent performance.

Last reviewed: April 11, 2026

Related Docs