đź§© Purpose
This feature allows you to add custom HTML attributes directly to link elements (such as buttons or icons) in Elementor. It’s perfect for enhancing functionality, accessibility, SEO, or integrating with external tools using attributes like download
, rel
, title
, or data-*
.
🛠️ How to Add Custom Attributes
Select the widget that includes a Link field (e.g., Button, Icon).
In the widget’s content panel, locate the Link section and click the settings/gear icon.
Locate the Custom Attributes input, where you enter each attribute in the format:
key|value
Example: To add
rel="sponsored"
, enter:Ârel|sponsored
For multiple attributes, separate them with commas:
Âdownload|filename.pdf,title|Learn more about product
Ensure the Link field contains at least a “#” or a URL — especially important if you’re relying on a
title
attribute to show a tooltip.
✨ Common Uses
Download Links: Add the
download
attribute to prompt file downloads (e.g.,download|file.pdf
).SEO/Relationship Tags: Use
rel
attributes for SEO (e.g.,rel|noopener noreferrer sponsored
).Tooltips: Add a
title
attribute to provide a hover tooltip.Custom Data or ARIA Attributes: Embed
data-*
attributes for custom scripts or accessibility enhancements.
⚠️ Important Notes
Not all widgets support custom link attributes; they’re only available in those with an actual Link field.
JavaScript-based attributes, such as
onclick
, are not allowed for security reasons.Title-based tooltips will only display if the link field isn’t left empty (must contain at least a placeholder).
âś… Summary of Capabilities
Capability | Example Usage |
---|---|
Trigger file download | `download |
Add SEO relationships | `rel |
Provide tooltip | `title |
Embed custom data | `data-id |
This feature gives you precise control over how links behave, appear, and interact—like prompting downloads, improving accessibility, boosting SEO, or integrating with JavaScript.