<aside> 💡

How Oura Attributes works:

Oura Attributes is a no-code way to extend Elementor websites using simple HTML attributes.

By adding a specific attribute to your elements, you can unlock advanced features and interactions without writing custom JavaScript.

It keeps your builds scalable, easy to maintain, and simple to update over time.

</aside>

How to Add an Attribute:

In the Elementor editor, you can add the relevant ou- prefixed attributes to your elements. Each resource includes clear instructions showing which attributes to use and where to apply them.

Classic Elements

• For classic elements, go to Advanced → Attributes and enter your custom attribute. If no value is needed, add the attribute name only, for example, ou-header. If a value is required, use the format ou-header|value.
• Some attributes can accept multiple values. In those cases, separate the values with spaces, or follow the format specified in the resource documentation. For example: ou-type|primary large.
• Place each attribute on its own line in the Attributes panel.

Atomic Elements

Atomic elements make adding attributes much easier, including support for dynamic values.

• To add one, select the element, go to the General tab, scroll to the Attributes section at the bottom, click the + icon, then enter the attribute name and add a value if needed.
• Sometimes, Elementor may not render the attribute on the front end if the value field is left empty. If the resource documentation does not specify any value, enter “true” as the value instead.
• Some attributes can accept multiple values. In those cases, separate the values with spaces, or follow the format specified in the resource documentation. For example: ou-type="primary large".