Free Squarespace Plugin: Full Bleed Image Blocks

Jan 20, 2021
Difficulty level: easy-peasy
Squarespace version: 7.0

 

Friends don’t let friends use Squarespace banner sections.

 

Programmed by hulo.dev
Illustration by Mayara Lista

 

Detraform websites feature a series of bespoke illustrations creating a narrative that complements our copywriting. We use full bleed illustrations to create section transitions and seamless colour block transitions. While Banner backgrounds crop at different screen sizes, our full bleed image block allows for complete design control. This custom CSS code snippet is the foundation of our whole design system.

Squarespace full bleed image block.png
Squarespace full bleed image block 2.png
 

Step 01
Create a nested page under your index page and upload an image

We like to use separate nested page for each full bleed image block, but you can have other content blocks on this page if you like. Next, upload your photo, graphic or illustration to an image block. Don’t forget to delete the default text block.

Detraform's full bleed image block.png
 

Step 02
Custom CSS

In the Custom CSS window add the following code.

/* Detraform's Full Bleed Image Block */

section[id*="full-bleed-image-block"]{
  .Index-page-content{
    max-width: 100%;
    padding: 0px;
    .row{
      margin: 0px !important;
      .sqs-block.sqs-block-image{
        padding: 0px !important;
        .intrinsic { 
          max-width: 100% !important;
        }
      }
    }
  }
}
 

Step 03
Update the url slug

Open the page settings for the relevant page and update the url slug to “full-bleed-image-block”. Note you can also use a longer name like “/home-2-full-bleed-image-block”. Follow this step to activate the CSS code for any page nested under and index page.

page setings.png
 

GET THE BEST FREE RESOURCES FROM YOUR FRIENDS AT DETRAFORM HQ

 
 
 
 

Step 04
Optional CSS to zoom in on mobile

We find our illustrations are a little too small on mobile and feel unbalanced. We use this additional custom CSS to zoom in a little on our full bleed image blocks. Note this will crop the sides. (You’re using a Chrome extension to find your Squarespace block identifiers right?)

@media only screen and (max-width: 640px) {
  #block-ID, // update the block identifier
 {
  width: 135%; // update to zoom in
   margin-left: auto;
   margin-right: auto;
   position: relative;
   left: -20%; // experiment with percentage to keep your image centered
  }
}
 
 
hulo-logo 2.png
 

The Squarespace design community has a secret weapon and it’s name is hulo.dev. Cody knows it, Rache and Puno know it, and now you know it too. Commission Hulo to develop your own custom Squarespace code and plugins. If you need help with Detraform’s full bleed image block, send Hulo an email for trouble shooting at their hourly rate.

 
SquarespaceJoel Blair