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)
- Create a container
- Set the background color (if necessary)
- Set padding (if necessary). This uses 7% left and right of desktop and tablet, but 16px on mobile (version 7 feature)
- Version 7 settings
- Column alignment center
- Column justification left
Sample 1/1b
- Add a full width column
- Set border radius and drop shadow
- Add a background image
- 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.
- Add a 1/2 (sample 1) or 2/5 (sample 2) nested column
- 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
- Add a full width column (no special flex layout)
- Set border radius and drop shadow
- Set background color to white (#ffffff)
- Set padding to 0
- Add 1/2 + 1/2 nested columns. Set alignment to stretch.
- Column 1
- Padding left and right 32px
- Add title and text
- In tablet and mobile, set the order to 1
- Column 2
- Set background image
- 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.
- In tablet and mobile set order to 0. This will place the image above the text
- Column 1
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.