By Stephen Walker

One of the best things about Avada is the flexibility to create custom variations of elements and save them to the library for later use. This is especially handy when you need an element, such as buttons, for different purposes or designs — a primary, secondary, outline, and other. The only downside to this approach is that the styling is not global (feature request submitted) and if you decide to deviate from the element’s global settings, those changes will have to be updated manually. I am referencing buttons in this post, but this approach can be used for any element, column, or container.

Screenshot of button style.

Recommendations

While your approach to this may be different, to maximize global control and useability, I recommend the following.

  • Create a design page to house all your custom elements (save as draft if you don’t want it found). This will allow you to have a visual reference.
  • Only use global colors – this will allow easy updates for color-related design changes.
  • Use as many global settings as possible.
  • When saving to the library, preface the name with the element type such as button: Primary, button: Secondary, etc. This will make it very easy to search your library. Remember, library items are presented in order of the date and time added and not alphabetically (annoying).
Screenshot of buttons in the library (dark mode enabled)

Originally published on August 24, 2022

share the article

Leave a Reply

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

RELATED ARTICLES

  • Customizing the Off Canvas Background

    Styling the off-canvas element is "easy" if you know which part to target.

  • Customizing Toggle (Accordion) Headings

    In a recent project and for this site's new menu, I needed to change the default of the toggle heading and place the icon on the right side but not pushed the full width of the toggle panel. Fortunately, this is easy to do with a couple of lines of CSS.

  • List of Links

    I am working on a new project and recently discovered some great CSS features --- text-underline-position and text-decoration-thickness.

  • Border between columns

    Since Avada currently does not have border settings for small and medium screens, this was our workaround

  • Test Layout – The Becker

    Trying to duplicate the basic look and feel of Dirk Beckers' website using Avada.

  • Boxing the Unboxed

    Boxing a full width site without constraining features to the content width.