By Stephen Walker

Avada has the ability to add classes and IDs to an element, but for newcomers or those that have never tried it, the labeling can be a source of confusion.

Each element, column, or container has two fields on the primary settings tab — CSS Class and CSS ID.

Avada Class and ID Fields

Unfortunately, this leads many to add a period in the class field or an octothorp (pound sign) in the ID field. What these fields actually mean:

  • CSS Class = what are the classes you would like to assign to this element. The is a list of the CSS classes you would like to assign — no delimiters. Under the hood it is the equivalent of class=””.
  • CSS ID = This means what is the ID you would like to assign to this item. This is a simple text field and the html rules associated with an ID element apply — ID tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (“-“), underscores (“_”), colons (“:”), and periods (“.”). This will later be available to JavaScript, CSS, and as an anchor target. Under the hood this is the equivalent of id=””.

Originally published on February 19, 2022

share the article

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

RELATED ARTICLES

  • New Feature – Quick Tips

    I have struggled to find the time to write full tutorials or even longer posts, so I am adding a Quick Tips category. This is similar to the news shorts, but almost every article will include code or a quick tip (imagine that) about an Avada setting or quirk.

  • Left Bar Separator

    Just using some custom CSS to create a color bar before a heading.

  • RSS and Avada

    RSS is an excellent way to get content to readers that don't have time to visit a hundred sites a day.

  • Borders and Boxes Demo

    Tryin to explain the layout fundamentals of Avada. Simple and not unique, but not necessarily intuitive for newcomers.

  • Conditional rendering – Oh the power

    In version 7.3 the ThemeFusion team added conditional rendering to the Avada toolset, but what they didn't do is explain all of the possible use cases.

  • Avada for the win – again

    In my apparently relentless pursuit of finding an alternative for Avada, I once again made my way around the builderverse and once again I am back to Avada.