{"id":1483,"date":"2021-06-17T11:50:24","date_gmt":"2021-06-17T11:50:24","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=1483"},"modified":"2023-02-22T09:40:55","modified_gmt":"2023-02-22T09:40:55","slug":"how-to-use-elementors-mask-option","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-use-elementors-mask-option\/","title":{"rendered":"How to Use Elementor&#8217;s Mask Option"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1483\" class=\"elementor elementor-1483\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7bacdba4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7bacdba4\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1409aff\" data-id=\"1409aff\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ebd2618 elementor-widget elementor-widget-video\" data-id=\"ebd2618\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=tujmkmuqM0M&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4b2ec6f6 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4b2ec6f6\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1b62cf05\" data-id=\"1b62cf05\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5f07862a elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"5f07862a\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1591\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1591\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1592\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1592\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1591\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1591\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1591\" tabindex=\"0\" hidden=\"false\"><p>In this tutorial, we\u2019ll get to know Elementor\u2019s Mask Option. Which allows you to give elements a new shape by turning them into mask-based objects, really making your sites stand out! This tutorial will cover:<\/p><p>\u2714\ufe0e Applying masks to widgets<\/p><p>\u2714\ufe0e Using default shapes &amp; custom SVG&#8217;s or PNG&#8217;s<\/p><p>\u2714\ufe0e Customizations &amp; tweaking for mobile devices<\/p><p>\u2714\ufe0e And much more!<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1592\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1592\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1592\" tabindex=\"0\" hidden=\"hidden\"><p>Hi All! It\u2019s Ziv from Elementor.<\/p><p>Today, I\u2019ll show you how to use the Mask Option in Elementor. Which allows you to turn widgets into mask-based objects. And apply shapes to them.. that hide parts of the content.. Just like I did with this image over here.<\/p><p>Masks are easy to use and can be applied to any element you want, like an image, video, or google maps widget.. to create stylish designs that really make your site stand out. [profile image example]<\/p><p>So let\u2019s dive and see how it works.<\/p><p><br \/>In this video, we\u2019ll go over the different masking options, and see different ways you can use them to promote your work.<\/p><p>let\u2019s jump right in.<\/p><p>For this tutorial I\u2019ll be working on this free landing page template from our library<\/p><p>Let&#8217;s start off by dragging in a simple image widget.. <br \/>Then,.. choose your image<\/p><p>In the style Tab ..I\u2019ll go ahead and add a cool hover animation.. just to bring it to life a bit. [hide panel + hover over to preview]<br \/><br \/>Okay.. looks alright, but it\u2019s a bit plain and doesn\u2019t really fit in with the rest of the design.<\/p><p>Turning it into a shape by applying a mask to it..will certainly make it stand out.<\/p><p>You can find The Mask Option in the Advanced tab of any widget.<\/p><p>Simply click to toggle it on. <br \/>By default, the shape is set to circle .. which actually fits well here. <br \/>But you can also choose other shapes from the list.. Such as a flower\u2026 or this blob for example..<\/p><p>And if you want to create an even more customized design.. There\u2019s also an option to upload your own custom SVG or PNG mask shapes, which is what I\u2019ll do for this example.<\/p><p>I\u2019ll use an SVG file I specifically created for this design so it fits in nicely next to the title.<\/p><p>Next, you can set the size of the mask. These options allow you to specify how the mask should be resized to fit: in the widget | its container | in the widget\u2019s container.<\/p><p>By default it\u2019s set to Fit.. which makes sure the mask fits exactly inside the border of the widget.. while maintaining its aspect ratio.<\/p><p>Setting it to fill, stretches the mask .. so it takes up as much space as possible.. regardless of the aspect ratio.<\/p><p>Alternatively, you can click on \u201ccustom\u201d to set a specific size.<\/p><p>You can either use the scale slider,.. or enter a precise value to get the result you are looking for [drag slider to 300px, then set 420px]<\/p><p>Once the size of the mask is set, you can choose the position of the mask that best fits your design. [set to center left, center right and back to center center]<\/p><p>You can also set the mask to repeat itself in a variety of ways, just play around with the controls to see what works. [set to repeat and scale to 200]<\/p><p>For this design I\u2019ll disable the repeat and set the size to fit.<\/p><p>The cool thing is that these settings have device icons, meaning they can be tweaked specifically for tablet and mobile devices. [for the position setting: hover over the icons and click on mobile]<\/p><p>For example.. Set the position to center left on mobile devices.. So it\u2019s aligned with the rest of your design. Cool!<\/p><p>Well.. that\u2019s it! <br \/>Now you know how to apply masks in Elementor and use them to really make your designs stand out!<\/p><p>Apply them to video widgets.. and create unique visuals that bring your website to life.. !<br \/>Or create a custom mask like this smart-phone mockup and apply it to an image carousel widget..<\/p><p>There\u2019s are so many ways to play around with masks!<\/p><p>We are looking forward to seeing what you come up with..So Let your imagination go wild and don&#8217;tM be shy to share your creations in the comments below!<\/p><p>Thanks for watching. As always don\u2019t forget to like and subscribe to our channel for more Elementor tutorials! Ciao for now!<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview In this tutorial, we\u2019ll get to know Elementor\u2019s Mask Option. Which allows you to give elements a new shape by turning them into mask-based objects, really making your sites stand out! This tutorial will cover: \u2714\ufe0e Applying masks to widgets \u2714\ufe0e Using default shapes &amp; custom SVG\u2019s or PNG\u2019s \u2714\ufe0e Customizations &amp; [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":3950,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-1483","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Use Elementor&#039;s Mask Option - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/how-to-use-elementors-mask-option\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Elementor&#039;s Mask Option - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this tutorial, we\u2019ll get to know Elementor\u2019s Mask Option. Which allows you to give elements a new shape by turning them into mask-based objects, really making your sites stand out! This tutorial will cover: \u2714\ufe0e Applying masks to widgets \u2714\ufe0e Using default shapes &amp; custom SVG\u2019s or PNG\u2019s \u2714\ufe0e Customizations &amp; [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-use-elementors-mask-option\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-17T11:50:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-22T09:40:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Use-Mask-Option.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use Elementor's Mask Option - Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/how-to-use-elementors-mask-option\/","og_locale":"en_US","og_type":"article","og_title":"How to Use Elementor's Mask Option - Academy","og_description":"Overview Transcript Overview In this tutorial, we\u2019ll get to know Elementor\u2019s Mask Option. Which allows you to give elements a new shape by turning them into mask-based objects, really making your sites stand out! This tutorial will cover: \u2714\ufe0e Applying masks to widgets \u2714\ufe0e Using default shapes &amp; custom SVG\u2019s or PNG\u2019s \u2714\ufe0e Customizations &amp; [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-use-elementors-mask-option\/","og_site_name":"Academy","article_published_time":"2021-06-17T11:50:24+00:00","article_modified_time":"2023-02-22T09:40:55+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Use-Mask-Option.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-mask-option\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-mask-option\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Use Elementor&#8217;s Mask Option","datePublished":"2021-06-17T11:50:24+00:00","dateModified":"2023-02-22T09:40:55+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-mask-option\/"},"wordCount":771,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-mask-option\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Use-Mask-Option.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-mask-option\/","url":"https:\/\/elementor.com\/academy\/how-to-use-elementors-mask-option\/","name":"How to Use Elementor's Mask Option - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-mask-option\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-mask-option\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Use-Mask-Option.jpg","datePublished":"2021-06-17T11:50:24+00:00","dateModified":"2023-02-22T09:40:55+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-mask-option\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-use-elementors-mask-option\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-mask-option\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Use-Mask-Option.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Use-Mask-Option.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-use-elementors-mask-option\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"How to Use Elementor&#8217;s Mask Option"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1483","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=1483"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1483\/revisions"}],"predecessor-version":[{"id":9597,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1483\/revisions\/9597"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/3950"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=1483"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=1483"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=1483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}