One of my pet peeves with Avada is the lack of global styling for elements. While there are some global defaults, in most cases, this does not address styling and the need for multiple types of an element with their own styling. This frustration comes from years of coding and features being rolled out in new builders and tools (GeneratePress, Bricks, Breakdance, etc.) that allow you to create a global style that can be adjusted once and applied across the classed elements. As of right now, only the post card element is even close. Avada does have the ability to add custom CSS, but the editor is dated — where something like Scripts Organizer or wpCodeSnippets includes modern updates, Emmet shortcuts, and more.

Why do this?

If you maintain a small site by yourself, this may not be a big deal, but if you maintain a site that others also update, the opportunity for a novice to make bad decisions is huge. While this won’t stop them, it can slow them down. Also, in the corporate world, rebranding happens a lot, so the need to change a variety of styles — not just colors and typography — can happen overnight. Speaking of colors and typography, Avada’s naming conventions leave much to be desired, and custom CSS will give you better control.

New tutorials

My goal for the rest of the year is to transition away from using the builder settings wherever possible and use custom CSS to accomplish the same task. Once I have a viable solution, I will be sharing here. The goal is to get to a place where one line of CSS can change the element everywhere.

Feature request

I did submit a feature request to have this level of functionality added to an element — similar to the way GeneratePress does it, which is not so developer-centric — but there is no telling when or if that will happen.

Ultimately, I may find this too difficult a challenge and will abandon Avada in favor of a tool that provides greater control.

Originally published on Feb. 12, 2023

In this story

MacBook Pro with images of computer language codesAdding Dynamic Data to a Toggle
white and blue abstract paintingAccordion Cards

Leave a Reply

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


  • Read Customizing Post Pagination

    Customizing Post Pagination

    In this article, I show how CSS can be used to customize the Avada pagination element.

    February 20, 2023

  • Read Accordion Cards

    Accordion Cards

    Another custom accordion example using pseudo element.

    February 17, 2023

  • Read Adding Dynamic Data to a Toggle

    Adding Dynamic Data to a Toggle

    Adding dynamic data to a toggle in Avada is easier than you think.

    February 12, 2023

  • Read Horizontal Image Accordion

    Horizontal Image Accordion

    I just added a demo of an accordion-style image slider using nothing but Avada and some custom CSS.

    February 11, 2023

  • 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

  • Read Quick Tip: Faux Nested Columns

    Quick Tip: Faux Nested Columns

    Overcoming a shortcoming in Avada with some CSS.

    December 4, 2022