Add a custom class and a data attribute to all the elements in Elementor

You can add a custom class and a data attribute to all the elements in Elementor by using the elementor/frontend/widget/before_render action hook.

Here’s an example of how you can use this hook to add a custom class and a data attribute to all the elements in a page:

function my_custom_before_render( $widget ) {
    $widget->add_render_attribute( '_wrapper', [
        'class' => 'my-custom-class',
        'data-custom-attribute' => 'my-custom-value',
    ] );
}
add_action( 'elementor/frontend/widget/before_render', 'my_custom_before_render' );

This will add the class “my-custom-class” and the data attribute “data-custom-attribute” with the value “my-custom-value” to all the elements in the page.

It is important to note that this will affect all widgets globally across the pages/posts that use Elementor, and that you can also use this function to add any other attribute or property as well.

You may also want to add classes or data attribute depending on the type of widget you’re using, to do this you can use the get_name() method of the widget, to check the name of the widget and then make a condition.

function my_custom_before_render( $widget ) {
    if ( $widget->get_name() === 'heading' ) {
        $widget->add_render_attribute( '_wrapper', [
            'class' => 'custom-class-for-heading',
            'data-custom-attribute' => 'value-for-heading'
        ] );
    }
}
add_action( 'elementor/frontend/widget/before_render', 'my_custom_before_render' );

It is important to also consider that this can also have an impact in performance and could cause issues with the HTML structure, please make sure to properly test it in all your pages.