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
- Content Column – Settings available or custom CSS
- Layout Column 1/2 – custom CSS
- Content Column – Settings available or custom CSS
- Heading (h2)
- Text
- other element
- Content Column – Settings available or custom CSS
- Layout Column 1/2 – custom CSS
- Row (Site width or full width) – Settings and custom CSS
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