Add your custom attributes with Elementor

Custom attributes for Elementor is a new feature that allows you to add attributes for the HTML container of your choice.
This would help with some accessibility issues and setting custom “data-” attributes for third partie plugins in javascript.
Please consulte the Elementor doc for that.
Pay attention Custom attributes is disabled if Elementor Pro is installed and active.

    why adding attributes to an element

    Using ARIA attributes: The ARIA standard is a set of attributes that define how to make content and web applications accessible oriented for people with visual impairments equipped with a screen reader.
    data-xxx are attributes you can use to interact and exchange data with javascript plugins and display or modify specific component in your page.

    How to add attributes to an element

    Edit the section/column/container or widget
    Select the Advanced tab and open the EAC custom attributes section.
    Separate attribute key from the value using character pipe “|”.
    Each attribute on a separate line.

    data-fancybox|standaloneimg
    data-caption|EAC custom attributes
    data-type|image
    /* Add the aria-label attribute if you wish to open the image in a new tab */
    aria-label|Opened in a new tab
    Feature custom attributes
    Advanced tab EAC custom attributes section
    As you can see, you find all the attributes by opening the developer tools/Inspector page in preview mode.
    Inspector tools to watch attributes for Elementor
    Inspector tools to watch Elementor's attributes

    Add a download attribute to a button

    To cause a file to be immediately downloaded when a user clicks a button
    – copy the url of the file to download from the media library,
    – in the editor add a button and paste the URL in the link field,
    – click on the ‘gear icon’ options,
    – in the Custom Attributes field add the ‘Key|Value’ pair ‘download|filename‘ where filename with its extension will be the name of the file after it is uploaded.

    The URL of the file to download must be in your domain (CORS).

    Download Custom Attributes Key|Value

    20 thoughts on “Add your custom attributes with Elementor”

      • Hello thank you for using our plugin
        The attributes of the element are uniquely added to the final page to avoid reloading the widget for each character entered.
        Rgds

        Reply
    1. I can’t get how using custom attributes at the Elementor widget? I have post, and I have ACF linked to the post. I want to show some ACF values at the Post grid widget. How can I do it?

      Reply
      • Hello,
        Using custom attributes is not the right way to display ACF values with Post Grid.
        Open your Post/Page with Elementor and put the ‘EAC components/Post grid’ widget on the panel preview
        Select you Post type and the Request tab.
        After that you can select the dynamic tags as explained in this tutorial
        Rgds

        Reply
    2. Is this plugin available in the WordPress repository? If no, why not? Is it light weight? I am only needing this feature to be able to do Matomo Content Tracking as described here: matomo.org

      Should this be possible using this plugin?

      Thanks!

      Sven

      Reply
      • Hi Swen,
        I can only suggest that you deactivate all the components and keep only the functionality ‘Custom attributes’ but it seems a bit heavy for your use (Admin settings EAC components/Features).
        Rgds

        Reply
    3. Thank you for all your great work! This is a very useful set of tools!

      I am trying to add an onclick=myFunction() to an element and I can’t get it to add the onclick attribute.

      I have been able to successfully add your example attributes of data-type, aria-label, etc. But I have not been able to get it to add an onclick attribute. I was able to add an onclick attribute to the element by giving it an id and then adding a js function to the page of getElementById(“id”).setAttribute(“onclick”, “myFunction()”);

      But I have been unable to add onclick using this plugin. Any help would be greatly appreciated 🙂

      I am using:
      Wordpress v5.8.2
      Elementor v3.4.8
      Jupiter X Theme v1.26.0

      Reply
      • Hello Michael,
        It is not in the scope of the plugin but with the example that i propose you can try this although i did not test it.
        javascript:
        document.querySelector(‘[data-fancybox=”stanaloneimg”]’).addEventListener(‘click’, function(event) {
        event.preventDefault();
        alert(“Yes i am here”);
        });

        jQuery:
        $(document).on(‘click’, ‘[data-fancybox=”stanaloneimg”]’, function(event) {
        event.preventDefault();
        alert(“Yes i am here”);
        });
        Rgds

        Reply
    4. Hello,
      Thanks for the tuto.

      Is it possible to add an attribute for section?
      For example when I click on the button redirection to a section of my website.

      Thanks

      Reply
      • Hello,
        No need to use attributes, just implement anchor links.
        For that click section/container properties advanced tab
        In the field CSS ID enter an id like: redirectsection
        Edit the button and in the field LINK simply add anchor link with ‘#’ : #redirectsection if the widgets are on the same page
        Otherwise enter full url of the page like: https://full-url-of-the-page/#redirectsection if the widgets are on different pages
        Hope this helps you
        Rgds

        Reply
    5. Helo,

      Thank you for the great plugin.
      I can’t use shortcode in the value of attribute, the shortcode is not translated
      can you let me khow how to make it work?

      Thank you

      Reply
      • Hi Idrea,
        First: I don’t understand how your shortcode can be executed knowing that in the ‘Key|Value’ pair, the value is in quotes.
        The attributes of an HTML tag are used to transmit data that can mainly be used in javascript code.
        Second: you can run your shortcode in a textarea which seems much more logical or in a piece of code in PHP.
        For exemple ==> Lorem ipsum dolor sit amet, consectetur [product_rating id=’146′] adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
        Rgds

        Reply
    6. Hello, please i am getting this notification on my dashboard “WooCommerce has detected that some of your active plugins are incompatible with currently enabled WooCommerce features. Please review the details.”, ” 1 Incompatible plugin detected (Elementor Addon Components).” Please How can i solve this.?

      Reply
      • Hello Selig,
        This simply means that the WC version (8.0.0) tested with our plugin is not compatible with the WC version of your installation.
        But there shouldn’t be any particular problems if you don’t use the ‘WC Products grid’ widget, otherwise you can return any issues to us.
        Rgds

        Reply
    7. Hii Dear elementor-addon-components. (EAT) Plugin Developer/Support Team.

      First of all, I would like to express my appreciation for this plugin — it has been incredibly useful, and I particularly value the Custom Attribute feature, which plays a crucial role in my workflow.

      However, I have recently encountered some performance issues that are significantly affecting my productivity. Since updating to WordPress version 6.8 and PHP version 8.4, I’ve noticed that both the frontend and especially the wp-admin dashboard have become noticeably slow. Page loads take an unusually long time, which disrupts my workflow and causes fatigue due to constant waiting during navigation.

      To troubleshoot, I temporarily deactivated the plugin, and the difference was immediate — my WordPress installation became significantly faster. While this improvement was a relief, it was also disappointing because I rely heavily on this plugin, particularly the Custom Attribute feature, to build interactive content on my site.

      In addition to the performance concerns, I also noticed a CSS conflict. When the plugin is active, some of the custom CSS I applied using Elementor does not render properly, even though the site structure has been carefully styled.

      For reference:

      WordPress version: 6.8

      PHP version: 8.4

      Page Builder: Elementor (classic method using sections and inner sections)

      I respectfully request your assistance in addressing these issues — particularly the performance degradation and CSS conflicts. Optimizing the plugin would not only enhance the experience for current users but also ensure continued trust in its capabilities.

      Thank you for your time and dedication. I’m hopeful for a resolution and look forward to continuing to use this great plugin as part of my development tools.

      Warm regards,
      Aliando Syahputra.

      Reply
      • Hello Aliando,
        Sorry for the issue you are facing,
        As a reminder, here are the requirements for our plugin
        – WordPress 6.3 tested up to 6.7.2
        – Elementor 3.5.6 tested up to 3.27.6
        – PHP version 7.4 tested up to 8.3.14
        We’re finishing the next version (2.3.4) with this configuration.
        – Regarding your issue, in the plugin settings page (EAC components), deactivate the components and features you don’t use.
        – In the Elementor/System info page, Log section, check for any traces related to our plugin.
        – You can check your Elementor requirements on this page.
        Can you send me the URL of one of your sites that is causing problems?
        Rgds

        Reply

    Leave a Comment