# Masker - Clipping Mask Images for Elementor

- created: 04/28/2020
- latest update: 04/28/2020
- by: merkulove
- elementor.merkulov.design/masker/

WordPress plugins Documentation

### Overview

Give your images a new shape using the Masker widget. With this simple and fun Elementor widget, you can add any clipping mask for your images to get a unique and attractive element to your website. It also allows you to apply a mask to a specific part of the selected image.

The plugin comes with 31 preset image masks that can be applied fast and easily. You can even use a custom shape in SVG format. The Masker widget is an interesting solution for your design that does not require additional knowledge of coding or CSS and offers your visitors something new.

To better understand the capabilities of the widget, we included 5 templates to the package. These are just some examples that can inspire you to create your style. It provides you a quick start in a few clicks.

Flexible settings of image clipping mask
Use any custom shape or create your own
30+ vector clipping masks
Crafted for Elementor Builder
Includes Templates for Elementor
Completely Cross-Browser Support
Suitable for all kind of Layout and Templates
Perfect for Popular Elementor Themes

The Masker has straightforward settings. You can select images using the media library or image URL and manage its position, size, and other options for different devices. The Clipping Mask tab offers different shape options to fit your needs. The flexible style settings allow you to change the colors, fonts, background, gradient, paddings, and margins for elements. All this can be configured directly from the Elementor’s interface and does not require additional code knowledge.

Masker for Elementor is exceptionally compatible with all modern browsers. It does not matter which browser users view your site: Chrome, Firefox, Opera, Safari, or Edge. Everything will look great on all devices and in all browsers.

## Features of the Masker widget for Elementor

- Perfect for Elementor 2.5 and higher
- 31 Preset mask images
- Adding custom SVG mask images
- 5 Masker templates included
- Custom image width and height
- Customizable fonts, colors, borders, backgrounds, gradient, etc.
- Media library or image URL as the source
- Flexible Clipping Mask settings
- Responsiveness settings
- Works well with all WordPress themes built on Elementor
- Totally Seo Friendly
- Included pot file for quick translation on any language
- Perfect for RTL direction
- Fast and smooth installing
- Tested and compatible up to WordPress 5+
- Lightweight and Fast
- All major browsers supported Chrome, Firefox, Safari, Opera, and Edge
- Easy to use and customize with modern User Interface
- Installation Guide and detailed Users Manual
- Six months Included Support for CodeCanyon buyers

The plugin installation takes only a few seconds. Also, you do not need to make any additional settings. The plugin is ready to work immediately after installation – you only need to install and activate it in WordPress. Read more about capabilities and settings in the Online Documentation.

### Installing

Installing the WordPress plugin is quick and straightforward. After you have downloaded the archive with the plugin, you will see the file with the plugin inside. Unzipped purchased the product you will see inside the archive with the plugin pluginname.zip There are two ways to install it:

## Installation of the Plugin through the WordPress Admin panel ( Recommended for most users )

###### STEP 1

First of all, open WordPress admin area login page and login in into WordPress as Admin. To do this visit http://yoursitename/wp-admin

###### STEP 2

Go to Plugins > Add New

Add New Plugin to WordPress

###### STEP 3

Click Upload Plugin Button

Upload New Plugin to WordPress

###### STEP 5

Choose archive with Plugin and press Install Now Button

###### STEP 6

After Installing go back to the Plugins page and click Activate below plugin title

Activate Installed Plugin

## Installation the plugin through FTP or build-in File manager

###### STEP 1

Use Login and Password to connect to your web-server via FTP or use your hosting file manager.

###### STEP 2

Upload archive with plugin to /wp-content/plugins

###### STEP 3

On next step Unzip the archive with the plugin

###### STEP 4

Installing WordPress Plugin is almost finished. Go to the Plugins page and click Activate below plugin title. You can find out your username and password on the website of your hosting provider.

Activate Installed Plugin

After installing and activating the plugin, you can go to settings of the Plugin. Also, you can read more helpful articles about WordPress Themes and WordPress Plugins.

### Settings

The Masker is plugin for image clipping mask creating. With this simple and fun Elementor widget, you can add any clipping mask for your images to get a unique and attractive element to your website.

The plugin comes with 31 preset image masks that can be applied fast and easily. You can even use a custom shape in SVG format. The image clipping mask is an interesting solution for your design that does not require additional knowledge of coding or CSS and offers your visitors something new.

For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org

Open or create a page using Elementor to start using the Masker widget. You will find the widget at the end of the general section.

Widget icon

Drag the widget to a page using the Element editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:

- Content
- Style
- Advanced

## Content Tab

On the Content tab of the Masker widget, you can select and manage the clipping mask, upload the image, and specify block caption.

### Image settings

- Source – select the type of source to upload the image for a clipping mask. The available options: Media library or URL.
- Maintain aspect ratio – the toggle to enable/disable the image maintaining proportions
- Choose Image/Image URL – a field for selecting an image from the library or entering an image URL depending on the selected source.
- Image Position – select one of the available image positions for different devices to apply the mask only to a certain part of the image. The option is available if the “Maintain aspect ratio” is disabled.
- Image Attachment – select how the image will be attached: Default, Fixed, Scroll. The option is available if the “Maintain aspect ratio” is disabled.
- Image Repeat – select image repeat mode for different devices: Default, No-repeat, Repeat, Repeat-x, Repeat-y. The option is available if the “Maintain aspect ratio” is disabled.
- Image Size – select the image size for different devices: Default, Cover, Contain, Custom. The option is available if the “Maintain aspect ratio” is disabled.

### Clipping Mask settings

- Mask – select one from the predefined mask shapes or select custom mask images in SVG format.
- Mask Position – Select one of the available mask positions or custom one specifying the horizontal and vertical offset.
- Mask Repeat – select mask repeat mode for different devices: No-repeat, Repeat, Repeat-x, Repeat-y.
- Mask Size – select the image size for different devices: Default, Cover, Contain, Custom.

### Caption settings

#### Header

- Header – a field to enter the text for the header of the current block.
- Header Position – select position to display the header: Top, Over, Bottom
- HTML Tag – select one of the available tags from the list for the title text. Depending on the selected tag, the text display style will be changed. These tags also help to make your page more SEO friendly.
- Header – the toggle to enable/disable the display of the header.

#### Subheader

- Subheader – a field to enter the text for the subheader of the current block.
- SubHeader Position – select position to display the subheader: Above Header, Under Header
- Subheader – the toggle to enable/disable the display of the subheader.

#### Description

- Description – a field to enter the text for the description of the current block.
- Description Position – select position to display the description: Top, Over, Bottom
- HTML Tag – select one of the available tags from the list for the description text. Depending on the selected tag, the text display style will be changed. These tags also help to make your page more SEO friendly.
- Description – the toggle to enable/disable the display of the description.

#### Link

- Link Position – select the position to apply the link: Image or Box.
- URL – enter the image URL
- Enable link – the toggle to enable/disable the link in the block

## Style tab

On the Masker widget styles tab, you can configure everything related to the visual style of elements: colors, typography, backgrounds, gradients, and more.

### Image

- Margin – the setting allows managing the margin of the image in different units(px, em, %) for desktop, tablets, or phones.
- Padding – the setting allows managing the padding of the image in different units(px, em, %) for desktop, tablets, or phones.
- Width – specify the image width in different units(px, %, vw) for desktop, tablets or phones.
- Height – specify the image height in different units(px, %, vh) for desktop, tablets or phones.
- Background color – specify the background color and opacity of the current block using the color picker.

### Clipping Mask

- Margin – the setting allows managing the margin of the mask in different units(px, em, %) for desktop, tablets, or phones.
- Padding – the setting allows managing the padding of the mask in different units(px, em, %) for desktop, tablets, or phones.
- Rotation – specify the angle of shape rotation.

### Header

- Margin – the setting allows managing the margin of the header in different units(px, em, %) for desktop, tablets, or phones.
- Padding – the setting allows managing the padding of the header in different units(px, em, %) for desktop, tablets, or phones.
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
- Shadow – this setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
- Background Type – this setting changes the background of the current section. You can choose a color, gradient, or background image.
- Alignment – manage header alignment (left, center, right) for desktop, tablet, or mobile.

#### Subheader

- Margin – the setting allows managing the margin of the subheader in different units(px, em, %) for desktop, tablets, or phones.
- Padding – the setting allows managing the padding of the subheader in different units(px, em, %) for desktop, tablets, or phones.
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
- Shadow – this setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.

### Description

- Margin – the setting allows managing the margin of the description in different units(px, em, %) for desktop, tablets, or phones.
- Padding – the setting allows managing the padding of the description in different units(px, em, %) for desktop, tablets, or phones.
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
- Shadow – this setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
- Background Type – this setting changes the background of the current section. You can choose a color, gradient, or background image.
- Alignment – manage description alignment (left, center, right) for desktop, tablet, or mobile.

## Advanced Tab

The settings in the advanced tab Masker widget allow you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.

## Save changes

Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.

Update page in the Elementor

## Hosting for Elementor websites

Fast and reliable hosting is significant for any WordPress site. We recommend all our customers use SiteGround WordPress Hosting. Many unique settings and features make this hosting the number 1 for WordPress: Free Website Transfer, Staging Tools, Free SSL, CDN, and much more for 3.95/mo.