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

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

2 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

Leave a Comment