closeup photography of woman smiling

The Challenge

An Avada user wanted to know if it was possible to recreate a look where an image appears to overlap another section without using css or negative margins.

Cras orci justo, pellentesque eget mattis vel, mollis sit amet lectus. Nunc finibus suscipit augue, ut interdum lorem. Fusce justo nisl, porttitor id imperdiet nec, iaculis nec augue. Nunc iaculis, eros eu ultricies consequat, lectus ante rhoncus arcu, at facilisis orci mi quis turpis. Nunc tincidunt ac sapien quis bibendum. Sed quis nisl pharetra, mattis ipsum non, malesuada felis. 

Button Text

Title Goes Here

Cras orci justo, pellentesque eget mattis vel, mollis sit amet lectus. Nunc finibus suscipit augue, ut interdum lorem. Fusce justo nisl, porttitor id imperdiet nec, iaculis nec augue. Nunc iaculis, eros eu ultricies consequat, lectus ante rhoncus arcu, at facilisis orci mi quis turpis. Nunc tincidunt ac sapien quis bibendum. Sed quis nisl pharetra, mattis ipsum non, malesuada felis. 

The Recipe

All in all this is a very easy recipe and this took about 2 minutes to create. The key is to understand what it is you are really trying to create and then apply the features that Avada makes available out of the box.

  1. Create a container with a background gradient that doesn’t fade (start and stop the same)
    1. In the design option add a gradient with the start color of #bfbfbf and the stop color of #ffffff
    2. Set the Gradient Start Position and Gradient Stop Position to 70. This number is arbitrary and yours can be adjusted as needed, just make sure both values are the same. This will create a two-tone container.
  2. Add two columns
    1. In the left column add an image element  – center the image, max width to achieve the layout you want.
    2. In the right column add title, text, and button elements
  3. Add a second container with a full width. Set the background color of the container to the background color as the bottom of the gradient (#ffffff).
No custom css required (yet), no negative margins.
 
Now your mobile view will not look so good so you will need a little css to make the background one color. This css is what you would need using the gray color I chose for this example (color varies based on your need).
  • Assign mobile-gray-bg to the CSS Class of your first container (step 1).
  • In the page settings, custom CSS (could be a global style if you plan to repeat this look) add the following CSS
Copy to Clipboard

Photo used in this example