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

Most Advanced WordPress Form Builder

Leave a Reply

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

RELATED ARTICLES

  • New Links Catalog

    Instead of continuing to add to the footer, I decided to create a links page that will allow me to add unlimited links, categories them, and with the use of wpGridBuilder, create a faceted filtering capability.

  • The Case of the Strange Gap

    If you are new to Avada there are some defaults that can trip you up. Page content padding is one of those, but as always, very easy to overcome.

  • Calling for Input

    I am working on my 2023 publishing schedule and want your feedback. Please submit ideas for new posts, demos, and videos.

  • To Avada, or not to Avada (Winter 2022)

    Oh no, not again. Every few months, I find new reasons to like and dislike Avada. This is just the latest installment.

  • Avada Website Showcase

    I added an Avada Showcase to allow others to share their websites. The goal is to inform and inspire others on the power of the Avada Website Builder

  • Auto Formatting Dashes and a Workaround

    In case you didn't know it, WordPress has a couple of built-in auto-formatting features that are really helpful --- the em dash and the en dash.