Add additional shape dividers to Elementor

You can add additional shape dividers to Elementor by creating custom SVG shape dividers and then using a filter hook to make them available to use in the Elementor editor.

Here’s an example of how you can do this:

1. Create your custom shape dividers as SVG files. You can use any design software, such as Adobe Illustrator, to create the files.

2. Create a new directory within your theme called shape-dividers (or any other name of your choice) to store your SVG files

3. Add your custom SVG files to this directory

4. Use the filter hook elementor/dynamic_tags/register_tags to register your custom SVG files so they can be used as shape dividers in Elementor.

function my_custom_shape_dividers( $dynamic_tags ) {
    $shape_dividers_path = get_stylesheet_directory() . '/shape-dividers/';
    $shape_dividers = glob( $shape_dividers_path . '*.svg' );
    foreach ( $shape_dividers as $shape_divider ) {
        $shape_divider_url = get_stylesheet_directory_uri() . '/shape-dividers/' . basename( $shape_divider );
        $dynamic_tags->register_tag( 'Elementor\ShapeDividers\Tag\\' . basename( $shape_divider, '.svg' ), [
            'name' => basename( $shape_divider, '.svg' ),
            'label' => ucwords( str_replace( '-', ' ', basename( $shape_divider, '.svg' ) ) ),
            'url' => $shape_divider_url
        ] );
    }
    return $dynamic_tags;
}
add_filter( 'elementor/dynamic_tags/register_tags', 'my_custom_shape_dividers' );

This code should be added to your theme’s functions.php or using a plugin like Code Snippets.

5. Go to Elementor editor and look for the shape divider section, you should see your custom shape dividers available to use.

This is just a basic example, you can get more advanced, for example creating an entire plugin dedicated for shape dividers. Also, remember to properly validate, minify and optimise your SVG code before using them in your website to improve performance.