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
- 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
RELATED ARTICLES
Do you know how much energy your website consumes per visit? I was shocked and made immediate changes.
If you are looking for an alternative to Google Analytics, I recommend checking out Cabin - a privacy-first solution.
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 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.
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.
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.