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.
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
Separate attribute key from the value using character pipe “|”.
Each attribute in a separate line.
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: https://developer.matomo.org/guides/content-tracking
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