By Stephen Walker

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 October 16, 2022

Most Advanced WordPress Form Builder

share the article

Leave a Reply

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

RELATED ARTICLES

  • Targeting the Boxes

    I put together a quick demo to highlight the containers that do not have settings, but that can be targeted with CSS.

  • Food Menu

    This is a style for creating a food menu whit a dashed line between the item and the price.

  • 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.

  • Buttons, buttons, and more buttons

    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.

  • List of Links

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