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:

*note: the CSS has been updated from the video so that when we give the CSS for this layout, it does not affect the cart page or the ".Main" class on the product list or product items pages, or the blog list page.

@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