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.
Table of Contents
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
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).
This is a useful function to scale the Elementor’s opportunities. Do these attributes add-in also the editor mode or only the final page?
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
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?
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
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
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
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
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
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
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
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
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
Hi !
Is this plugin available in the WordPress repository? If no, why not?
Thanks!
Hi Marcos,
No the plugin is not available in the wordpress repository because we are not sized to offer efficient and fast support
Rgds
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.?
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
I’m trying to add a close window option within pop-up. Is there a key attribute code for this?
Hello Jon,
No, to avoid any security risks, it is not possible to include javascript, CSS or links in the attributes of a tag.
Rgds
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.
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