Elementor Developers

# Mask Shapes

Elementor Core Basic

Elementor offers the ability to apply overlay masks (opens new window) that create stylish designs for any element. By default Elementor offers a set of predefined masks. Additional masks can be added using a dedicated filter hook.

# Hook Details

  • Hook Type: Filter Hook
  • Hook Name: elementor/mask_shapes/additional_shapes
  • Affects: Editor

# Hook Arguments

Argument Type Description
additional_shapes array A list of additional mask shapes.

An array of additional mask shapes that should include the following parameters:

'mask-shape-id' => [
	'title' => (string) Mask label.
	'image' => (string) Mask file URI.
]
1
2
3
4

# Examples

To add new mask shapes use the following code:

/**
 * Add additional mask shapes to Elementor.
 *
 * @since 1.0.0
 */
function custom_elementor_mask_shapes() {
	return [
		'shape-id-1' => [
			'title' => esc_html__( 'Shape name 1', 'textdomain' ),
			'image' => PLUGIN_ASSETS_URL . 'mask-shapes/shape-1.svg',
		],
		'shape-id-2' => [
			'title' => esc_html__( 'Shape name 2', 'textdomain' ),
			'image' => PLUGIN_ASSETS_URL . 'mask-shapes/shape-2.svg',
		],
	];
}
add_filter( 'elementor/mask_shapes/additional_shapes', 'custom_elementor_mask_shapes' );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

To avoid conflicts with other plugins, shape IDs should be prefixed.

The PLUGIN_ASSETS_URL should be updated using plugin_dir_path( __FILE__ ), get_stylesheet_directory_uri() or any other method that retrieves the assets URL.

← Frontend Content →