Beautiful Page Layout In Squarespace

In this Squarespace tutorial, I show you how to create a very unique and beautiful page layout in Squarespace that features content overlapping a big banner image with a subtle drop shadow effect.

Create a Beautiful Page Layout In Squarespace

Custom CSS:

@media screen and (min-width: 640px) {
  body:not(#cart) {
    .Intro + .Main:not(.Main--products-list):not(.Main--products-item):not(.Main--blog-list):not(.Main--blog-item) {
      .Main-content {
        max-width: 900px!important;
        width: 80%;
        background: #f9f9f9;
        -webkit-transform: translateY(-100px);
        -ms-transform: translateY(-100px);
        transform: translateY(-100px); 

        &:before {
          content: '';
          background: transparent;
          width: 100%;
          height: 300px;
          position: absolute;
          top: 0;
          left: 0;
          box-shadow: -50px -50px 25px -50px rgba(0,0,0,.2), 50px -50px 25px -50px rgba(0,0,0,.2), 0px -50px 25px -50px rgba(0,0,0,.2)
        }
      }
    }
  }
  .Intro.Intro--has-image {
    z-index:0;
  }

  .Intro-content {
    width: 80%;
    padding-bottom: 200px!important;
    max-width: 900px!important;
    padding-left: 0!important;
    padding-right:0!important;
  }
}

If you have any questions or need help implementing this on your site, please feel free to shoot me an email or leave me a comment on YouTube.

Cheers!
Chris