How Do I Add Custom Attributes to an Elementor

Adding custom attributes in Elementor is one of the easiest ways to make your WordPress pages more flexible, accessible, trackable, and developer-friendly.

Custom attributes allow you to add extra HTML information to Elementor widgets, buttons, links, sections, columns, or containers. These attributes can be used for JavaScript actions, tracking, accessibility, SEO link control, downloads, custom styling, popups, filters, and other advanced website behaviors.

For example, you may want to add a custom data attribute to a button so your JavaScript can track where the click came from. You may want to add an aria-label to improve accessibility. You may also want to add rel="nofollow" or rel="sponsored" to a link for SEO purposes.

The good news is that Elementor makes this easier, especially if you are using Elementor Pro. However, many users make one common mistake: they enter attributes using normal HTML syntax instead of Elementor’s required format.

In this guide, you will learn how to add custom attributes in Elementor, how to use the correct key|value format, how to add attributes to buttons and links, and how to fix Elementor custom attributes not working.

What Are Custom Attributes in Elementor?

Custom attributes are extra pieces of information added to an HTML element. They do not usually change the visual design of the element by themselves, but they help browsers, search engines, scripts, assistive technologies, and tracking tools understand or interact with that element better.

In normal HTML, attributes look like this:

<a href="https://example.com" rel="nofollow" aria-label="Visit example website">
  Visit Website
</a>

Here, href, rel, and aria-label are attributes.

In Elementor, you may use custom attributes for things like:

• Adding tracking data to buttons
• Triggering JavaScript actions
• Improving accessibility
• Adding custom link behavior
• Adding SEO-related link attributes
• Creating downloadable buttons
• Identifying sections for scripts
• Passing values to custom code
• Adding custom data attributes for filters, tabs, sliders, or popups

Some common examples of custom attributes include:

data-category="web-design"
aria-label="Open pricing section"
rel="nofollow sponsored"
download="pricing-guide.pdf"
role="button"

These attributes can be useful for both non-technical users and developers who want more control over Elementor-generated HTML.

Important: Elementor Uses the key|value Format

Before adding custom attributes in Elementor, you need to understand the correct format.

In normal HTML, an attribute may look like this:

rel="nofollow"

But inside Elementor’s custom attribute field, you should not write it like that. Elementor uses this format instead:

key|value

So, if you want to add rel="nofollow", you should enter:

rel|nofollow

If you want to add an ARIA label, enter:

aria-label|Read more about our services

If you want to add a custom data attribute, enter:

data-section|hero

If you need to add more than one custom attribute, place each attribute on a separate line:

data-section|hero
aria-label|Open pricing section
role|button

This format is one of the most important things to remember when using Elementor custom attributes.

Wrong Format

rel="nofollow"
aria-label="Read more"
data-section="hero"

Correct Elementor Format

rel|nofollow
aria-label|Read more
data-section|hero

If your Elementor custom attributes are not working, the first thing you should check is whether you used the correct key|value format.

How to Add Custom Attributes in Elementor Pro

Elementor Pro allows you to add custom attributes to the wrapper element of widgets, sections, columns, and containers. This is useful when you want to add extra HTML information to an Elementor element without editing theme files or writing custom templates.

Follow these steps to add custom attributes in Elementor Pro:

Step 1: Open the Page with Elementor

Go to your WordPress dashboard and open the page where you want to add the custom attribute.

Click Edit with Elementor.

Step 2: Select the Widget, Section, Column, or Container

Click the Elementor widget or container where you want to add the attribute.

For example, you can select:

• Button widget
• Heading widget
• Image widget
• Section
• Column
• Container
• Icon box
• Call to action widget
• Custom HTML widget

Step 3: Go to the Advanced Tab

After selecting the element, open the Advanced tab in the Elementor editor panel.

The Advanced tab usually contains layout, motion effects, positioning, custom CSS, responsive options, and attributes.

Step 4: Find the Attributes Field

Look for the Attributes field.

This field allows you to add custom HTML attributes to the selected Elementor element.

Step 5: Add the Attribute Using key|value

Enter your attribute using Elementor’s required format:

data-section|hero

For multiple attributes, use a new line for each one:

data-section|hero
aria-label|Hero call to action
role|region

Step 6: Update the Page

Click Update to save the page.

Step 7: Check the Attribute on the Frontend

Open the page on the frontend, right-click the element, and select Inspect.

Check whether the custom attribute appears in the HTML.

This is the best way to confirm that your custom attribute has been added correctly.

How to Add Custom Attributes to an Elementor Button

Buttons are one of the most common places where users want to add custom attributes in Elementor.

You may want to add attributes to a button for tracking, JavaScript, accessibility, downloads, or SEO link control.

For example, you can add a data attribute to identify a button:

data-button-location|hero

You can add an accessibility label:

aria-label|Download the pricing guide

You can add a custom tracking value:

data-tracking-id|pricing-button

You can add multiple attributes like this:

data-button-location|hero
data-tracking-id|pricing-button
aria-label|Download the pricing guide

These attributes make it easier to understand where the button is located and what action it performs.

Example Use Case

Suppose you have three “Get Started” buttons on the same page: one in the hero section, one in the pricing section, and one near the footer. Visually, they may look similar, but you may want your tracking script to know which button the visitor clicked.

You can add different custom attributes to each button:

Hero button:

data-button-location|hero

Pricing button:

data-button-location|pricing

Footer button:

data-button-location|footer

Now your tracking script or analytics setup can identify the exact button location.

How to Add Custom Link Attributes in Elementor

Custom link attributes are especially useful when you want to control how links behave.

You can use custom link attributes for:

• Nofollow links
• Sponsored links
• User-generated content links
• Download links
• Tooltips
• Link titles
• Security-related link attributes
• Accessibility improvements

In Elementor, many link fields include an option for custom attributes. This is often available through the link settings or gear icon beside the link field.

Common Custom Link Attribute Examples

To add a nofollow attribute:

rel|nofollow

To mark a sponsored link:

rel|sponsored

To mark user-generated content:

rel|ugc

To add a link title:

title|Visit our service page

To add a download attribute:

download|pricing-guide.pdf

To open an external link more securely:

rel|noopener noreferrer

Example: Add Nofollow to an Elementor Link

If you are linking to a page that you do not want to pass ranking signals to, you can add:

rel|nofollow

This tells search engines that the link should not be treated as a normal endorsement.

Example: Add Sponsored Attribute to a Paid Link

If the link is paid, sponsored, or promotional, you can add:

rel|sponsored

This helps search engines understand that the link is related to sponsorship or advertising.

Example: Add a Title Attribute to a Link

If you want to give extra information about a link, you can add:

title|Read our full Elementor guide

When used correctly, a title attribute can provide additional context for users.

How to Add a Download Attribute to an Elementor Button

You can use Elementor custom link attributes to create download buttons for files such as PDFs, ZIP files, documents, or media files from your WordPress media library.

For example, if you want users to download a PDF guide after clicking a button, you can add the file URL to the button link field and then add this custom attribute:

download|elementor-guide.pdf

This tells the browser that the file should be downloaded instead of simply opened.

Example

Button link:

https://example.com/wp-content/uploads/elementor-guide.pdf

Custom attribute:

download|elementor-guide.pdf

This is useful for:

• PDF guides
• Case studies
• Pricing sheets
• Product catalogs
• Lead magnets
• Brochures
• Templates
• Checklists

Make sure the file URL is valid and publicly accessible. If the download does not work, test the file URL directly in your browser.

How to Add Data Attributes in Elementor

Data attributes are custom HTML attributes that usually start with data-.

They are commonly used by JavaScript, tracking tools, filters, popups, animations, and custom scripts.

Examples include:

data-category|web-design
data-popup|contact-modal
data-filter|pricing
data-id|service-card-1

A developer can then target these values with JavaScript.

For example, if you add this attribute to a button:

data-popup|contact-modal

A script can use that value to open a specific popup.

Common Data Attribute Use Cases

You can use Elementor data attributes for:

• Custom JavaScript triggers
• Popup buttons
• Filterable galleries
• Pricing toggles
• Tracking events
• Form interactions
• Product cards
• Service cards
• Tab systems
• Accordion behavior
• Scroll-based effects

Example: Add a Data Attribute for a Filter

Suppose you have several service cards and want to filter them by category.

You can add:

data-category|seo

Another card may use:

data-category|web-design

Another may use:

data-category|wordpress

Then your JavaScript can filter the cards based on the selected category.

How to Add ARIA Attributes in Elementor for Accessibility

ARIA attributes help improve accessibility when used properly. They provide extra information to assistive technologies such as screen readers.

Some common ARIA attributes include:

aria-label|Open menu
aria-hidden|true
aria-expanded|false
aria-controls|pricing-section

You may use ARIA attributes in Elementor when an element needs extra context that is not clear from the visible content.

Example: Add an ARIA Label to a Button

If your button only has an icon and no visible text, screen readers may not understand what the button does.

You can add:

aria-label|Open search

This helps users who rely on screen readers understand the button’s purpose.

Example: Hide Decorative Elements

If an element is only decorative and does not need to be announced by screen readers, you may use:

aria-hidden|true

However, do not hide important content from screen readers. Only use aria-hidden|true for decorative elements.

Accessibility Best Practices

When using ARIA attributes in Elementor:

• Use ARIA only when it improves accessibility
• Do not add random ARIA attributes without purpose
• Make button labels clear and specific
• Do not hide important content with aria-hidden
• Test important pages with accessibility tools
• Use meaningful text whenever possible instead of relying only on ARIA

How to Add rel Attributes in Elementor for SEO and Security

The rel attribute tells browsers and search engines about the relationship between the current page and the linked page.

This is commonly used for SEO, sponsored links, user-generated content, and security.

Common rel Attribute Examples

Nofollow link:

rel|nofollow

Sponsored link:

rel|sponsored

User-generated content link:

rel|ugc

External link security:

rel|noopener noreferrer

Multiple values:

rel|nofollow sponsored

When to Use rel|nofollow

Use rel|nofollow when you do not want to pass normal ranking signals to a linked page.

This may be useful for:

• Untrusted links
• Some external references
• Links you do not want to endorse
• Certain affiliate or promotional links when combined with proper attributes

When to Use rel|sponsored

Use rel|sponsored for links that are paid, sponsored, promotional, or part of an advertising arrangement.

When to Use rel|ugc

Use rel|ugc for links inside user-generated content, such as comments, forum posts, guest submissions, or community content.

When to Use rel|noopener noreferrer

Use rel|noopener noreferrer for external links that open in a new tab. This can help improve security and privacy by preventing the new page from accessing the original page through the browser window object.

How to Add Custom Attributes to Elementor Sections and Containers

Custom attributes are not only for buttons and links. You can also add attributes to Elementor sections, columns, and containers.

This is useful when you want to identify a large page area for styling, tracking, or JavaScript.

For example, you can add this to a hero section:

data-section|hero

You can add this to a pricing section:

data-section|pricing

You can add this to a testimonial section:

data-section|testimonials

You can also add an accessibility role:

role|region

And an ARIA label:

aria-label|Pricing plans

Together, your custom attributes may look like this:

data-section|pricing
role|region
aria-label|Pricing plans

This helps scripts, accessibility tools, and developers identify the purpose of the section.

Elementor Custom Attributes for JavaScript

One of the best uses of Elementor custom attributes is connecting Elementor designs with custom JavaScript.

For example, you may want to create a button that opens a custom modal. You can add:

data-modal|contact

Then your JavaScript can look for elements with that attribute and trigger the modal.

Another example:

data-action|open-popup

Or:

data-plan|premium

This approach is cleaner than relying only on CSS classes because the attribute clearly describes the data or action connected to the element.

Example JavaScript Concept

If a button has this Elementor attribute:

data-popup|pricing-modal

A script can target it like this:

const button = document.querySelector('[data-popup="pricing-modal"]');

button.addEventListener('click', function() {
  console.log('Open pricing modal');
});

This is a simple example, but the same idea can be used for more advanced interactions.

Elementor Custom Attributes Free vs Pro

A common question is whether custom attributes are available in Elementor Free or Elementor Pro.

Elementor Pro gives users more control over custom attributes for widgets, sections, columns, and containers. This makes it easier to add attributes without editing code.

Elementor Free may still allow some link-related controls depending on the widget, but advanced custom attribute options are generally more limited compared to Elementor Pro.

If you cannot find the Attributes field in your Elementor editor, check these things:

• Make sure Elementor Pro is installed
• Make sure Elementor Pro is activated
• Update Elementor and Elementor Pro
• Select the correct widget or container
• Check the Advanced tab
• Check whether you are editing a supported element
• Clear cache and reload the editor

For serious customization, tracking, accessibility improvements, and JavaScript-based interactions, Elementor Pro is usually the better option.

Elementor V4: Adding Attributes from the General Tab

Elementor’s newer editing experience includes a different flow for adding attributes to V4 elements.

Instead of only looking under the Advanced tab, users may find attribute controls under the General tab for supported V4 elements.

The basic process is:

1. Select the element on the canvas
2. Open the General tab
3. Find the Attribute field
4. Click the plus icon to add an attribute
5. Add the attribute name
6. Add the attribute value
7. Save or update the page

This is important because Elementor’s interface can vary depending on the version, editor experience, and type of element you are using.

If your blog readers are using a newer Elementor version, this section helps them find the correct setting without confusion.

Best Custom Attribute Examples for Elementor

Here are some useful custom attribute examples you can use in Elementor.

Purpose	Elementor Attribute Format
Add nofollow to a link	`rel	nofollow`
Mark a sponsored link	`rel	sponsored`
Mark user-generated content	`rel	ugc`
Add link title	`title	Visit our service page`
Create download button	`download	guide.pdf`
Add button tracking	`data-tracking-id	hero-button`
Identify section	`data-section	pricing`
Trigger popup	`data-popup	contact-modal`
Add accessibility label	`aria-label	Open search`
Hide decorative element	`aria-hidden	true`
Add role	`role	button`
Add product category	`data-category	wordpress`
Add plan type	`data-plan	premium`
Add filter value	`data-filter	design`

These examples can help you use Elementor custom attributes for real projects instead of only understanding the theory.

Common Mistakes When Adding Custom Attributes in Elementor

Many Elementor users add custom attributes incorrectly. Here are the most common mistakes and how to fix them.

Mistake 1: Using Normal HTML Format

Wrong:

rel="nofollow"

Correct:

rel|nofollow

Elementor expects the pipe symbol between the key and value.

Mistake 2: Adding Multiple Attributes on One Line

Wrong:

rel|nofollow aria-label|Read more data-section|hero

Correct:

rel|nofollow
aria-label|Read more
data-section|hero

Add each attribute on a separate line unless the specific Elementor field says otherwise.

Mistake 3: Adding Attributes to the Wrong Element

Sometimes the attribute is added successfully, but not to the exact HTML tag you expected.

For example, a widget-level custom attribute may be added to the wrapper element, not the inner link or button tag.

If you want to add an attribute directly to a link, use the link custom attributes option where available.

Mistake 4: Forgetting to Update the Page

After adding the attribute, click Update.

Then open the frontend page and inspect the element.

Mistake 5: Cache Showing the Old Version

If the attribute does not appear, clear:

• Browser cache
• WordPress cache
• Elementor cache
• CDN cache
• Server cache

Then reload the page and check again.

Mistake 6: Elementor Pro Is Not Active

If you cannot find the custom attributes field, Elementor Pro may not be installed or activated.

Go to your WordPress plugins page and confirm that both Elementor and Elementor Pro are active.

Elementor Custom Attributes Not Working? Troubleshooting Guide

If your Elementor custom attributes are not working, use this checklist.

1. Check the Format

Make sure you are using:

key|value

Not:

key="value"

2. Check the Selected Element

Make sure you added the attribute to the correct widget, button, link, section, or container.

3. Inspect the Frontend HTML

Right-click the element on the live page and click Inspect.

Look for the attribute in the HTML.

4. Clear Cache

Clear all cache layers, including:

• Browser cache
• WordPress caching plugin
• Elementor CSS cache
• CDN cache
• Hosting cache

5. Check Plugin Conflicts

Temporarily disable other plugins on a staging site to see whether another plugin is interfering.

6. Update Elementor

Use the latest stable versions of:

• WordPress
• Elementor
• Elementor Pro
• Theme
• Related add-ons

7. Check Whether the Attribute Is Added to the Wrapper

Some Elementor custom attributes apply to the wrapper element instead of the inner element.

If you need to add an attribute directly to an anchor tag, button link, or specific link element, use the custom link attributes option when available.

8. Make Sure the Link Exists

For link attributes, the link field should not be empty. If there is no link, the attribute may not appear on an anchor element.

9. Test with a Simple Attribute First

Try a basic attribute like:

data-test|hello

Then inspect the element.

If this works, your issue may be related to the specific attribute you were trying to add.

Best Practices for Using Elementor Custom Attributes

Custom attributes are powerful, but they should be used carefully.

Follow these best practices:

Use Clear Attribute Names

Good examples:

data-section|hero
data-button-location|pricing
data-tracking-id|demo-button

Avoid unclear names like:

data-x|123
data-test|abc

Clear names help future developers understand the purpose of the attribute.

Do Not Overuse Attributes

Only add attributes when they serve a real purpose. Too many unnecessary attributes can make your HTML harder to manage.

Use ARIA Carefully

ARIA attributes are helpful for accessibility, but incorrect ARIA can make accessibility worse.

Use ARIA labels only when needed and make sure the value describes the element clearly.

Use the Right Link Relationship

Use rel|sponsored for sponsored links, rel|ugc for user-generated content, and rel|nofollow when you do not want to pass normal ranking signals.

Test Everything on the Frontend

Always inspect the final page to confirm that the attribute appears correctly.

Keep a Record of Custom Attributes

If you use custom attributes for JavaScript, tracking, or styling, document them somewhere. This helps your team understand what each attribute does.

Use Staging for Advanced Changes

If you are adding attributes connected to JavaScript or tracking scripts, test them on a staging site before applying them to a live website.

Practical Examples of Elementor Custom Attributes

Here are some real-world examples.

Example 1: Track a Hero Button

Use this attribute on your hero section button:

data-button-location|hero

This helps your analytics or JavaScript understand that the button belongs to the hero section.

Example 2: Track a Pricing Button

Use this on a pricing CTA:

data-button-location|pricing
data-plan|premium

This can help track which plan a visitor clicked.

Example 3: Create a Download Button

Use this on a button that links to a PDF:

download|pricing-guide.pdf

Example 4: Add Nofollow to a Link

Use this for links you do not want to pass ranking signals to:

rel|nofollow

Example 5: Mark a Sponsored Link

Use this for paid or sponsored links:

rel|sponsored

Example 6: Improve Accessibility for an Icon Button

If the button only shows an icon, add:

aria-label|Open search box

Example 7: Identify a Pricing Section

Use this on a pricing section or container:

data-section|pricing
role|region
aria-label|Pricing plans

Example 8: Trigger a JavaScript Popup

Use this on a button:

data-popup|contact-modal

Your JavaScript can then open the correct modal when the button is clicked.

Difference Between Custom Attributes and Custom CSS in Elementor

Custom attributes and custom CSS are not the same.

Custom CSS changes how an element looks. Custom attributes add extra information or behavior to the HTML.

For example, custom CSS may change the button color:

selector {
  background-color: #000;
}

A custom attribute may identify the same button for tracking:

data-button-location|hero

Use custom CSS when you want to change design. Use custom attributes when you want to add information, behavior, tracking, accessibility, or link control.

In many advanced Elementor projects, you may use both together.

Difference Between CSS Classes, IDs, and Custom Attributes

Elementor also allows you to add CSS classes and CSS IDs. These are different from custom attributes.

CSS Class

A CSS class is mainly used for styling or selecting groups of elements.

Example:

pricing-button

CSS ID

A CSS ID identifies one unique element on the page.

Example:

pricing-section

Custom Attribute

A custom attribute adds extra information to the HTML.

Example:

data-plan|premium

When to Use Each One

Use a CSS class when you want to style multiple elements.

Use a CSS ID when you need to identify one specific section or create an anchor link.

Use a custom attribute when you need to add data, tracking values, ARIA information, link relationships, download behavior, or JavaScript hooks.

Should You Use Custom Attributes in Elementor?

Yes, you should use custom attributes in Elementor when you need more control over your page’s HTML.

Custom attributes are especially useful for:

• Developers
• SEO professionals
• Accessibility improvements
• Tracking setup
• Marketing campaigns
• Custom JavaScript interactions
• Download buttons
• Affiliate and sponsored links
• Advanced Elementor websites
• Agencies managing client websites

However, you do not need custom attributes for every simple design change. If your only goal is to change spacing, color, typography, or layout, use Elementor’s design controls or custom CSS instead.

Conclusion

Adding custom attributes in Elementor is a simple but powerful way to improve your WordPress website’s flexibility. Whether you want to add tracking data, create download buttons, improve accessibility, control link relationships, or connect Elementor elements with JavaScript, custom attributes give you more control without editing theme files.

The most important thing to remember is Elementor’s format:

key|value

For example:

data-section|hero
aria-label|Open pricing section
rel|nofollow
download|guide.pdf

If your custom attributes are not working, check the format, inspect the frontend HTML, clear cache, and make sure you are adding the attribute to the correct element.

By using Elementor custom attributes correctly, you can build smarter, more accessible, more trackable, and more SEO-friendly WordPress pages.

FAQs

This page was last edited on 22 June 2026, at 6:02 pm