Custom HTML Attributes – Sections & Columns

🎯 Purpose

Allows you to insert custom HTML attributes (like data-*, ARIA roles, rel, or any other valid attribute) into the wrapper elements of sections, columns, or widgets. This enhances functionality, accessibility, and integration with external tools.

✅ Step-by-Step Instructions

1. Open Elementor

   • Right-click the section, column, or widget handle and choose “Edit” to open its settings.

2. Navigate to Advanced Settings

   • Inside the panel, go to the Advanced tab and locate the Attributes field.

3. Add Your Custom Attributes

   • Enter attributes using the format:

      

     key|value

   • Example: role|presentation adds role="presentation".

4. Multiple Attributes

   • Add each attribute on a separate line.

   • For multiple values on one attribute, separate with spaces:

      

     data-spots|round long

     This results in data-spots="round long".

5. Save

   • After setting your attributes, update the widget and view source HTML to confirm they appear correctly in the markup.

💡 Common Use Cases

• ARIA Roles: Improve accessibility (e.g., role="navigation").

• Data Attributes: Set up interaction hooks for JavaScript (e.g., data-id="123").

• SEO/Link Attributes: Add rel="nofollow" or similar.

• Custom Hooks: Add IDs or classes for deeper styling or behavior control.

⚠️ Notes & Tips

• These attributes are applied to the wrapper element, not inner content.

• Only available in the Advanced > Attributes area—no code editing needed.

• Unsupported attributes (like onclick) are blocked for security safeguards.

🔎 Summary Table

This feature empowers you to extend Elementor’s output with semantic markup, interactive data hooks, or SEO optimizations—all within the visual editor.