The Layout
Below are the outlines of the various layout elements:
- Green solid = container
- Red dotted = 1/1 column at site width
- Yellow dashed = nested column
CSS was added to make the background image and gradient responsive. You can use the spacing settings to move the nested column as needed.
This is a title element inside a nested column
Egestas adipiscing, laudantium mollit, lectus quis, donec sequi felis, pretium sit quibusdam. Fusce curabitur fugiat turpis sed delectus! Impedit? Erat? Suscipit convallis viverra quisque.
This is a title element inside a nested column
Egestas adipiscing, laudantium mollit, lectus quis, donec sequi felis, pretium sit quibusdam. Fusce curabitur fugiat turpis sed delectus! Impedit? Erat? Suscipit convallis viverra quisque.
The Blurry Overlay
As a result of a couple of discussions within the Facebook group, I went ahead and put these two examples. The first is a very basic layout.
The recipe
- Add a container
- Set padding to 0
- Add a background image to the container
- Add a column and set the width to 40%
- set padding to 0
- Add a background with alpha at -30 (.7 opacity)
- Optional: Add a custom style for blurring the background (I used a class called awp-box- -blurry). Note: The blur settings in Avada will blur everything
- Add a nested column
- apply padding
- add elements

.awp-box–blurry CSS
Title
Doloribus consectetur! Nonummy feugiat, molestiae tenetur nibh felis, risus. Quibusdam labore nisl quaerat ultricies. Lobortis repellendus, ridiculus. Nobis cras vero.
The 50/50 with Overlay
This allows two images to be used. This will require some adjustments for mobile (conditional visibility would be my option). This one turned out to be more of a challenge because Avada’s nested columns have no inner-row based flex controls.
The recipe
- Add a container
- Set padding to 0
- Set content width to 100%
- Set minimum height to 40vh (not needed once CSS is added)
- Add two 50/50 columns
- set padding to 0
- set background images
- in the content column add a CSS class (I used awp-cbox- -right to have the content to the right side of the column)
- Add a nested column
- apply padding
- add elements
- Add class to set minimum height (I used awp-content-box)
- Add a background with alpha at -30 (.7 opacity)
- Add a custom style for blurring the background (I used a class called blur-box). Note: The blur settings in Avada will blur everything
If you adjust the left and right margins (column spacing) of the nested column, you can have the box overlay bot images. I would recommend not using awp-cbox- -right in this instance and just put the nested column in the right half and adjust accordingly (left -250px right 250px).
Below are two more examples using 100% width and a 1/2 column. Since the nested columns inherit the flex settings of the container, the start or end CSS is needed
The CSS
This is a title element inside a nested column
Egestas adipiscing, laudantium mollit, lectus quis, donec sequi felis, pretium sit quibusdam. Fusce curabitur fugiat turpis sed delectus! Impedit? Erat? Suscipit convallis viverra quisque.
This is a title element inside a nested column
Egestas adipiscing, laudantium mollit, lectus quis, donec sequi felis, pretium sit quibusdam. Fusce curabitur fugiat turpis sed delectus! Impedit? Erat? Suscipit convallis viverra quisque.