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.
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 Feb. 19, 2022
