I struggled with a title for this article, so if something else makes sense, let me know.

One of my pet peeves with Avada is the inability to put columns inside of columns, inside of columns — nested nested columns if you will. While I have not found the solution for this, one of the main reasons I use nested columns is to put an entire row of content inside a stylized column — you know, a border-radius, background color, box-shadow, etc. — like the following example.

Example of a stylized column

What you notice in this image is that there appears to be a single column, with nested 2/5 + 3/5 columns, and in the 3/5 column, a series of 1/5 columns. When I initially built this, the white background was impossible because unless I create the nested columns and save them in the library as a global element, there wasn’t an immediate way to do this. I was wrong. Answering a question on the Facebook group gave me the solution by thinking about what I wanted — putting an entire row of content inside a stylized column. In a recent article, I had been exploring the variety of extra wrappers that exist in Avada, and I realized that the row wrapper was the key. Just because there are no controls, custom CSS is there to help.

So without further ado … the CSS I used to achieve the column look in the image above

.boxed-in > .fusion-builder-row {
  box-shadow:0 10px 20px -10px rgba(0,0,0,.3);

Things of note are:

  • add the boxed-in class to the container
  • In Live editing, this is not visible. If you want to see it in Live editing, you have to use .boxed-in .fusion-builder-row:first-of type, but you will have to change it back to work correctly
  • !important is needed to override the default padding
  • depending on your design, you may need to create a media query for this to change padding values or other options

Bonus CSS

In the image, there is a vertical divider between the 2/5 and 3/5 columns. Avada does not have this built-in, and the border settings do not have responsive values, nor do borders apply to the outside wrapper. To overcome this shortcoming, I have a small CSS snippet that I use. The breakpoint may need to be adjusted based on your needs.

  @media only screen and (min-width: 1024px) {
    border-left:1px solid #e6e6e6;

I put together a quick demo.

Originally published on Dec. 4, 2022

books on the shelf photographNew Links Catalog
A B-2 Spirit assigned to the 509th Bomb Wing, Whiteman Air Force Base, Missouri, flies over Luke Air Force Base, Ariz., Nov. 15, 2022. Two bombers participated in a training exercise with multi-nation assets assigned to Luke AFB, meant to familiarize pilots with different airframe operations.Simplicity is Best - An overlooked feature that Avada does right

Leave a Reply

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


  • Read Customizing Post Pagination

    Customizing Post Pagination

    In this article, I show how CSS can be used to customize the Avada pagination element.

    February 20, 2023

  • Read Accordion Cards

    Accordion Cards

    Another custom accordion example using pseudo element.

    February 17, 2023

  • Read Moving away from builder settings

    Moving away from builder settings

    I am beginning to restructure my site to rely less and less on the Avada element settings in favor of site-wide styling.

    February 12, 2023

  • Read Horizontal Image Accordion

    Horizontal Image Accordion

    I just added a demo of an accordion-style image slider using nothing but Avada and some custom CSS.

    February 11, 2023

  • Read Styling the RankMath Sitemap

    Styling the RankMath Sitemap

    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.

    December 11, 2022

  • Read Targeting the Boxes

    Targeting the Boxes

    I put together a quick demo to highlight the containers that do not have settings, but that can be targeted with CSS.

    November 3, 2022