Make the Image Pop

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.

• Create a container with a background gradient that doesn’t fade (start and stop the same)
• In the design option add a gradient with the start color of #bfbfbf and the stop color of #ffffff
• 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.
• Add two columns
  In the left column add an image element  – center the image, max width to achieve the layout you want.
• In the right column add title, text, and button elements
• 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: