Custom Link Attributes

Table of Contents

Share This Post

🧩 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

  1. Select the widget that includes a Link field (e.g., Button, Icon).

  2. In the widget’s content panel, locate the Link section and click the settings/gear icon.

  3. Locate the Custom Attributes input, where you enter each attribute in the format:

    key|value

    Example: To add rel="sponsored", enter:

     
    rel|sponsored
  4. For multiple attributes, separate them with commas:

     
    download|filename.pdf,title|Learn more about product
  5. 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

CapabilityExample 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.

Subscribe To Our Newsletter

Get updates and learn from the best

More To Explore

Designing for Global Audiences: Internationalization & Localization

Guiding Principles of IA: Structuring Websites for Clarity & Growth

Next-Gen Information Architecture: Psychology, Ethics & Omnichannel

Persona-Driven UX: Turning Research Into User-Centered Design

The Psychology of Trust: Unlocking Credibility in Web Design

List of Categories

Contact Us

Big-agency quality without the big-agency cost — welcome to Flagship Websites

Start Your Website Design Journey with Free AI Wireframes & Mockups!

Your information is 100% confidential. After you submit, our design team will contact you within 24 hours.