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

closeup photo of lighted bulbConditional rendering - Oh the power
low angle view of red and white lighthouseStyling a Megamenu

Leave a Reply

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