Custom Attributes

With Elementor Pro, you can add custom attributes to the wrapper of every Section, Column or Widget as well as to every link element. This enables the addition of data-* attributes, ARIA attributes (accessibility) and values, header, footer, sidebar, rel=*, and other attributes that can be found here: https://www.tutorialspoint.com/html5/html5_attributes.htm

Common Custom Attributes use cases include:

• Allow your visitors to download PDF files with a single button click by using the download=”true” custom attribute.
• Implement relations SEO properties such as rel=”noopener”, rel=”noreferrer”, rel=”ugc”, and “rel=sponsored”.
• Add a title attribute to link elements, such as title=”Learn More About Us”.

Add Custom Attributes to Link Elements of A Widget

If a widget has a Link element, you can add any custom attributes to the link’s HTML, (e.g.  rel=”ugc” or rel=”sponsored”, the two new link attributes that Google introduced in 2019).

1. Right-click on the widget’s handle and click Edit widget to open the widget’s settings panel.
2. Click the gear icon to the right of the Link field to open up the additional options.
3. Add your code in the Custom Attributes field, using the format key|value. For example, to add rel=”sponsored” to the element’s HTML, enter rel|sponsored here. To add rel=”ugc” to the element’s HTML instead, enter rel|ugc here. To add a title to the link element, enter title|Your title text goes here.

Tip: If you add a title attribute, it will only display as a popup tooltip on hover if there is something in the Link URL field, so there must be at least a # in the field. It cannot be blank for the hover tooltip to work.

Note: There is no ability to add a custom attribute to a link created within a Text Editor widget. Custom attributes are only available for widgets that specifically have a link field.

Add A Download Custom Attributes to a Button

To cause a file to be immediately downloaded when a user clicks a button, add a download=”true” attribute to the button’s link.

1. Right-click on the Button widget’s handle and click Edit widget to open the widget’s settings panel.
2. Click the gear icon to the right of the Button’s Link field to open up the additional options.
3. Add the attribute code in the Custom Attributes field, using the format key|value. For example, to add download=”true” to the element’s HTML, enter download|true here.

Tip: To create a downloadable PDF, in the Link field, enter the PDF’s link, and then enter download|true in the Custom Attributes field.

Add Custom Attributes to Sections, Columns, or Widgets

1. Right-click on the edit button of the element and click Edit section to open the section’s settings panel. Likewise, if editing a Widget, right-clicking will show the option to Edit Widget, and editing a Column will show Edit Column.
2. Go to Advanced > Custom Attributes
3. Add your code for the element to the editor, using the format key|value. For example, to add role=”presentation” to the element’s HTML, enter role|presentation here.

Tip: Set custom attributes for the wrapper element, with each attribute in a separate line. Separate attribute key from the value using the | character.

Note: You will not be able to add JS-based attributes (like onclick) to your links due to security reasons.