Borders and Boxes Demo

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.