Custom Attributes

Custom attributes is a handy OxyPowerPack feature that let users add any HTML attribute to Oxygen Builder elements. It is specially useful to add data attributes required by lots of 3rd party JavaScript libraries, but also can be used to add additional standard HTML attributes that Oxygen Builder normally doesn't output. For example, attributes REL, CITE, DIR and others listed here aren't output by Oxygen Builder but can be added easily using this feature.

Please note that this feature, as well as other OxyPowerPack features like the Interactivity Engine and Parallax Effect, are applied to Elements, not to Selectors. If you are working with a class inside Oxygen Builder, the attribute will apply to the currently selected Element, and no to all elements that share the same class.

It is also important to understand that some Oxygen elements, like the built-in search element or the OxyPowerPack countdown are composed of several HTML elements. In that case, the custom attribute will be applied to the outer (container) element.

How to add a custom attribute ( rel="nofollow" )

Having the desired element selected, you can open the custom attributes window from the Advanced tab:

You can identify OxyPowerPack features in the Oxygen Builder user interface by the yellow lightning logo.

Alternatively, you can open the custom attributes window from the OxyPowerPack drawer, by clicking the "Custom Attributes" button, which also has an indicator of how many custom attributes a particular element has:

The custom attributes window is a simple user interface to list, add and delete custom attributes for the currently selected element:

Clicking on the "< Back" link will return you to the custom attributes list, where yon can delete any of them.

After your custom attribute is set, the custom attributes button inside the OxyPowerPack drawer indicates how many custom attributes has been set for that particular element:

And this is the frontend HTML output for the above sample: