The Challenge

Someone wanted to know if it was possible to recreate a feature they had seen on another website where there was a faded image to the right and text to the left.

Avada can handle this multiple ways:

  • Like the original, create images to use in the background. The original uses one image for desktop and a different one for mobile.
  • Use a background image on the column, and then place the text in a nested column (Sample 1). This can be done with 6.2.3 or version 7. Sample 1b changes the width of the text column.
  • Use nested columns and change the order on mobile and tablet (sample 2). Version 7

The challenge was using no custom CSS. I also chose not to use an image that included the fade.

The recipe(s)

  1. Create a container
  2. Set the background color (if necessary)
  3. Set padding (if necessary). This uses 7% left and right of desktop and tablet, but 16px on mobile (version 7 feature)
  4. Version 7 settings
    1. Column alignment center
    2. Column justification left

Sample 1/1b

  1. Add a full width column
  2. Set border radius and drop shadow
  3. Add a background image
  4. Set a gradient start to white (#ffffff) and gradient end to transparent (rgba(255,255,255,0.). Start position at 54, end position 60, and a gradient angle of 90.
  5. Add a 1/2 (sample 1) or 2/5 (sample 2) nested column
  6. Add title and text.

The mobile view may produce an effect you do not want (text over the image) as it can be difficult to read.

Sample 2

  1. Add a full width column (no special flex layout)
  2. Set border radius and drop shadow
  3. Set background color to white (#ffffff)
  4. Set padding to 0
  5. Add 1/2 + 1/2 nested columns. Set alignment to stretch.
    1. Column 1
      1. Padding left and right 32px
      2. Add title and text
      3. In tablet and mobile, set the order to 1
    2. Column 2
      1. Set background image
      2. Set a gradient start to white (#ffffff) and gradient end to transparent (rgba(255,255,255,0.). Start position at 7, end position 100, and a gradient angle of 90.
      3. In tablet and mobile set order to 0. This will place the image above the text

I recommend saving the column to the library so you can use it anywhere, just change the image and the text.

Note: Sample 2 can be recreated using older versions, but it does require custom css which was not part of this challenge.

Sample 1. Increase the quality of your coaching

Donec ultricies maximus lectus porttitor ultrices. Morbi tortor turpis, consequat ut lacinia et, ullamcorper eu dui. Sed sit amet tortor ligula. Aliquam sed rhoncus mi, et luctus sapien. Nunc non eros ullamcorper, facilisis leo ut, convallis dui. Donec venenatis, augue

Sample 2. Increase the quality of your coaching

Donec ultricies maximus lectus porttitor ultrices. Morbi tortor turpis, consequat ut lacinia et, ullamcorper eu dui. Sed sit amet tortor ligula. Aliquam sed rhoncus mi, et luctus sapien. Nunc non eros ullamcorper, facilisis leo ut, convallis dui. Donec venenatis, augue Donec ultricies maximus lectus porttitor ultrices.

Nunc non eros ullamcorper, facilisis leo ut, convallis dui. Donec venenatis, augue Donec ultricies maximus lectus porttitor ultrices.

Sample 1b. Create a consistent stream of clients and income

Donec ultricies maximus lectus porttitor ultrices. Morbi tortor turpis, consequat ut lacinia et, ullamcorper eu dui. Sed sit amet tortor ligula. Aliquam sed rhoncus mi, et luctus sapien. Nunc non eros ullamcorper, facilisis leo ut, convallis dui. Donec venenatis, augue