V4 Extentions Mask Estimated reading: 4 minutes 2 views Cut a container into a shape. Pick one of 20 ready shapes, or use your own SVG. A circle, a flower, a blob and more. No code needed. WORKS ON Flexbox, Div Block, Grid SHAPES 20 + your own SVG PLAN Free BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free Tip: Install and activate Animation Addons for Elementor before you start. Pro is not needed. STEP 1 Enable the Extension Turn on the extension from your dashboard. You only need to do this once. From your WordPress Dashboard, go to Animation Addon > Extensions. Open the Elementor V4 (Atomic) tab. Under Utility Extensions, turn on Mask. Click Save Settings. Mask Extension 1 (click to zoom) STEP 2 Pick a Shape Now cut your container into a shape in the Elementor editor. Open your page with the Elementor Editor. Select a Flexbox, Div Block or Grid. Go to the Style tab and open the Mask section. Click a shape. Mask Extension 2 (click to zoom) Mask Extension 3 (click to zoom) That is all. Your container is now cut into the shape you picked. Note: The Mask section is in the Style tab, near the bottom. It shows for Flexbox, Div Block and Grid only, not for widgets. RESULT Final Result Mask Extension 4 (click to zoom) Tip: Give the container a background color or image, and a size, so the shape is easy to see. For a perfect circle, use the same width and height. SETTINGS Settings These settings are all in the Mask section of the Style tab. Mask Extension 5 (click to zoom) Shape Click a shape to cut your container into it. Click the same shape again or the Clear button to remove it. Round: Circle, Oval Vertical, Oval Horizontal, Pill Vertical, Pill Horizontal Straight sides: Triangle, Diamond, Pentagon, Hexagon, Heptagon, Octagon Slanted: Parallelogram Right and Left, Trapezoid Up and Down Fun: Flower, Sketch, Blob Custom Mask Use your own shape. Click Custom Mask and choose an SVG file. Tip: Use a simple SVG with a solid, filled shape. The solid part of the SVG is the part of your container that stays visible. Size Default: DefaultHow big the shape is. Fit shows the whole shape inside the container. Fill makes the shape cover the whole container. Auto uses the original size of the shape. Position Default: DefaultWhere the shape sits inside the container, like Center Center, Top Left or Bottom Right. Repeat Default: DefaultRepeat the shape to make a pattern. Choose No-repeat, Repeat, Repeat-x, Repeat-y, Round or Space. Note: Repeat is hidden when Size is Fill, because one shape already covers the whole container. PER DEVICE Different Shape Per Screen Size You can use a different mask on each screen size, or when the mouse is over the element. Use the Desktop, Tablet and Mobile buttons at the top of the editor, and the hover option in the Style tab. Use a big shape on desktop and a simple circle on mobile. Show one shape normally and another on hover. TRY THIS Quick Recipe Want a round profile photo? Use this setup. ELEMENT Div Block WIDTH 300px HEIGHT 300px MASK SHAPE Circle SIZE Fit BACKGROUND Your image NEED HELP? Troubleshooting I do not see the Mask section Check that the extension is on. Go to Animation Addon > Extensions > Elementor V4 (Atomic) and turn on Mask. Then reload the editor. Select a Flexbox, Div Block or Grid, and look in the Style tab. My container disappears If you use Custom Mask, check that your SVG file loads and has a solid, filled shape. A mask only shows the solid part of the image. An empty or broken SVG hides everything. The shape looks cut off or too small Change Size to Fit to see the whole shape, or Fill to cover the whole container. Make the width and height of your container the same for round shapes. You Did It Your container is now cut into a shape. If you face any problem, please contact our support team. We are happy to help.
