By Stephen Walker

Borders and Boxes Demo

Share

Recently I have been answering a lot of questions about styling columns, containers, and borders so I put a demo page together. Especially confusing is the layout column (fusion-layout-column) versus the content column (fusion-column-wrapper) and hopefully this page will let you see the difference. If you have used a framework in the past this should not really be new, but for those that are new, it can be a little confusing. The reason for the two div approach is to allow for customization, while maintaining the base layout. Imagine the layout of a section with two columns:

  • Container (full width 100%) – Settings available or custom CSS
    • Row (Site width or full width) – Settings and custom CSS
      • Layout Column 1/2 – custom CSS
        • Content Column – Settings available or custom CSS
          • Heading (h2)
          • Text
          • other element
      • Layout Column 1/2 – custom CSS
        • Content Column – Settings available or custom CSS
          • Heading (h2)
          • Text
          • other element

As you can see, it is actually a simple structure. The row and layout columns have no built in settings and this is where nested columns can give you more control — with other limitations. The content columns, and the container allow for styling with Avada settings. All elements can be targeted with custom CSS.

Originally published on July 2, 2022

Leave a Reply

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

RELATED ARTICLES

  • Going Green-ish

    Do you know how much energy your website consumes per visit? I was shocked and made immediate changes.

  • Analytics Alternative: Cabin.

    If you are looking for an alternative to Google Analytics, I recommend checking out Cabin - a privacy-first solution.

  • New Section: Code Snippets

    I created a new Code Snippets section to start collecting and sharing code that I have found helpful for Avada or WordPress in general.

  • The State of WordPress

    The future of WordPress is very bright, but it is going to take a new way of thinking and a willingness to learn new things. Gutenberg is only a part of that future.

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

  • Avada: Beyond the original theme

    These days, many people dismiss Avada because they only know it from its earliest inception as a theme, but if you are still using it as a theme, you're making a mistake.