This weekend, I put together two examples as a result of requests and conversations on the Facebook group.

Horizontal Scrolling Columns

The first was a request to apply the technique I used on my horizontal post cards to basic columns. This turned out to be a little easier than I expected since 99% of the code is based on the aforementioned solution. The only trick was finding out where to apply CSS Grid. Hopefully, this will be easier — aka built-in — in a future version.

If you are interested, check out the demo and recipe.

Columns and Overlays

The second demo and associated recipe is related to some ongoing conversations in the Facebook group where people are confused by the way columns and containers work. Avada’s structure is relatively simple, but some features are hidden as you lay out a page.

This is how Avada is setup:

  • Page
    • Container
      • Row, aka inner content
        • Column: width based on setting or CSS and fills the row.
          • Inner column
            • Nested column row
              • Nested column: width based on setting or CSS and fills the parent column.

Except for the rows, all of these have a setting for background images and colors either globally, locally, or both, and CSS can be used to manipulate them even more. CSS can be used to target the rows. How Avada settings and CSS are applied depends on the setting. Most settings target the inner features of the container or column, while the CSS targets the outer container, row, or column. I submitted a feature request to document this more clearly so that developer and designer can target elements with CSS when settings are not available.

Originally published on Oct. 16, 2022

person in black and white t-shirt using computerAuto Formatting Dashes and a Workaround
black and white balloons on white wallPlugin Spotlight: Heroic KB

Leave a Reply

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

RELATED ARTICLES

  • 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 Moving away from builder settings

    Moving away from builder settings

    I am beginning to restructure my site to rely less and less on the Avada element settings in favor of site-wide styling.

    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