title: "Mask Shapes" post_status: publish comment_status: open taxonomy: category: - elementor-developers-docs post_tag: - Hooks - Src - Repos

Mask Shapes

Elementor offers the ability to apply overlay masks 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.
]

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' );

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.