Overall this layout took about 10 minutes and half that time was finding images on Unsplash.




The recipe:

  1. Page template set to 100%
  2. Container has interior content width set to 100%
  3. In the container setting, set columns equal height
  4. Insert a three column layout
  5. Column Settings
    1. Set the Column Gap to 0
    2. Set column padding top and bottom 300px (this will vary based on the images you choose)
    3. Content centered
    4. Using the images you have selected, set the background image on teach column
    5. Set the column background color (e.g. rgba(0,0,0,0.45))
    6. Set the blend mode to overlay
    7. 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.
    8. Set hyperlink on the column
  6. Add a title element
    1. Choose the correct heading level (h2-h6)
    2. Set the font size if it needs to be different than the default.
    3. Align center
    4. Font color white

Photos used in this example

  1. Happy Daughter by Michael Dam on Unsplash
  2. Woman sitting on rock by Sonnie Hiles on Unsplash
  3. You caught my attention by KAL VISUALS on Unsplash
  4. Title Bar photo by Mihály Köles on Unsplash