Horizontal Scrolling Columns and Column Overlays

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.