This version was made for the 7.0 release of Avada. Where the original was to show how to copy a layout with the text in the center, a new request came in to show how to place it near the bottom of the image. Version 7, with the new flex controls makes this ridiculously simple. The other advantage is that you can use the responsive design features to maintain the layout at all screen sizes.
Overall this layout took about 10 minutes and half that time was finding images on Unsplash.
- Page template set to 100%
- Container has interior content width set to 100%
- In the container setting, set columns height to 700px
- Insert a three column layout
- Column Settings
- Set the Column Gap to 0
- Content alignment bottom, centered, top
- Using the images you have selected, set the background image on each column
- Set the column width and padding at tablet and mobile layouts
- Set the column background color (e.g. rgba(0,0,0,0.45))
- Set the blend mode to overlay
- Extras – Using filter type hover set brightness to 200. This may need to be lower if the image is very bright. Center and right images are set to 150 and 135 respectively to maintain consistency and improve color contrast with the title text.
- Set hyperlink on the column
- Add a title element
- Choose the correct heading level (h2-h6)
- Set the font size if it needs to be different than the default.
- Align center
- Font color white
- Adjust title margin as needed
Photos used in this example
- Happy Daughter by Michael Dam on Unsplash
- Woman sitting on rock by Sonnie Hiles on Unsplash
- You caught my attention by KAL VISUALS on Unsplash
- Title Bar photo by Mihály Köles on Unsplash