Using the Container Gradient

Like “Make the Image Pop,” this uses the gradient features of Avada to create the overlap effect. Just add a container with two columns, add the content the way you want, and then go to the container and adjust the gradient to me in the position you want. The only downside to the technique is that there is a not a way to adjust for mobile using the features of the Avada builder As a result you are left with two option: build the gradient with CSS and don’t use the Avada tool, or create a second container specifically for mobile which is what I have done here.

Using the Container Gradient

Like “Make the Image Pop,” this uses the gradient features of Avada to create the overlap effect. Just add a container with two columns, add the content the way you want, and then go to the container and adjust the gradient to me in the position you want. The only downside to the technique is that there is a not a way to adjust for mobile using the features of the Avada builder As a result you are left with two option: build the gradient with CSS and don’t use the Avada tool, or create a second container specifically for mobile which is what I have done here.

man in black jacket and gray scarf

Using Negative Right Margin

This is another fairly simple layout, but does require the use of custom css to create the negative margin, but the other features can be accomplished in Avada and make use of the responsive design features. You adjust the padding as needed.

Custom CSS

Copy to Clipboard

Using Negative Column Spacing

This is another fairly simple layout and only uses Avada features. In my initial test this didn’t work but that is because you have to set left and right spacing in the first column and only left spacing in the second (if you are only using two columns). Setting the left column spacing of the column with the photo to -90px creates this layout. The beauty of this layout is that it does take advantage of the responsive design features without the need for custom CSS. You adjust the padding as needed.

Using Negative Column Spacing

You can set the left column to use 90px and -90px column spacing, but there is a limitation that I cannot explain yet. Using the right column is much more effective. You adjust the padding as needed.

For a framed layout see the  Offset Image Recipe.