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.

Copy to Clipboard

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
screenshout showing the element layout described previously as seen in the Avada navigator

.awp-box–blurry CSS

Copy to Clipboard

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

Copy to Clipboard

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.