Custom Link Attributes

With Elementor, you can add custom HTML attributes to the <a> element of every link. This enables the addition of data-* attributes, ARIA attributes (accessibility) and values, header, footer, sidebar, rel=*, and other attributes that can be found here

Common Link Attributes use cases include:

• Allow your visitors to download PDF files with a single button click by using the download=”yourfilename” custom attribute.
• Implement relations SEO properties such as rel=”noopener”,  rel=”noreferrer”,  rel=”ugc”, and “rel=sponsored”. To add multiple properties to one attribute, simply list them with a space between them, e.g. rel=”noopener noreferrer”.
• Add a title attribute to link elements, such as title=”Learn More About Us”. 

Tip: You can add multiple Link Attributes separated with a comma (,)

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=”yourfilename” 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=”yourfilename” to the element’s HTML, enter download|your-file-name here, replacing “your-file-name” with the file name of your choosing. 

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

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