Add your custom attributes with Elementor

Custom attributes for Elementor free version 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
Pay attention: Custom attributes is disabled if Elementor Pro is installed and active.

Table of Contents

This feature doesn’t cover ‘Link attributes‘ who are already implemented in the standard version of Elementor.

To avoid reloading the live/preview in the editor for each character entered, the attributes will only be loaded into the DOM in the front-end.

why adding attributes to a container

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- 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 a section, column or widget

  • Edit the section/column or widget
  • Select the Advanced tab
  • Open the ‘EAC custom attributes’ section
Elementor attributes edit section
Edit section with Elementor

Separate attribute key from the value using character pipe “|”.
Each attribute in a separate line.

Custom attributes Elementor
Add custom attributes with Elementor
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

12 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
    • 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
  2. 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
  3. 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
  4. 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

Leave a Comment