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

laptop computer showing data chartsPlugin Update: wpDataTables
woman sitting on stall near wall mounted deskOffset Image Recipe

Leave a Reply

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

RELATED ARTICLES

  • Read New Avada-based website

    I am launching a new website using Avada taking advantage of the lessons learned over the past two years of builder evaluations.

    March 5, 2023

  • Read Going Green-ish

    Going Green-ish

    Do you know how much energy your website consumes per visit? I was shocked and made immediate changes.

    December 28, 2022

  • Read Analytics Alternative: Cabin.

    If you are looking for an alternative to Google Analytics, I recommend checking out Cabin - a privacy-first solution.

    December 25, 2022

  • Read New Section: Code Snippets

    I created a new Code Snippets section to start collecting and sharing code that I have found helpful for Avada or WordPress in general.

    December 18, 2022

  • Read The State of WordPress

    The future of WordPress is very bright, but it is going to take a new way of thinking and a willingness to learn new things. Gutenberg is only a part of that future.

    December 15, 2022

  • Read Styling the RankMath Sitemap

    Styling the RankMath Sitemap

    If you are a RankMath user, you may know that they recently introduced a feature that automatically generates an HTML version of the XML sitemap. This post is to share the CSS I am using to add some layout to an otherwise long list of links.

    December 11, 2022