How to Split Your Squarespace Footer Into Two Colour Blocks

 
 

You may have noticed that when creating your footer, Squarespace doesn’t allow much flexibility in using different colour backgrounds for your top, middle or bottom footer block. Now, this may not be an issue for you if all you plan on having there are some links, copyright text and potentially - business address and hours. But if you want to have your call-to-action banner or opt-in freebie inserted (because the footer appears on every single page on your website, so why wouldn’t you want that?) then you will need to play around with code to achieve that. Don’t worry - it’s nothing too complicated.

Here's how to do it.

STEP 1: Copy code snippet

You will need the following piece of code. Simply copy it (down to the last curly bracket!)

@media all and (min-width:640px) {  
  .Footer-inner {     
    max-width: 100%!important;     
    padding: 0 0;    
  .Footer-blocks--topbackground: #90A0A6 !important;
    } 
  }
}

STEP 2: Paste into Advanced CSS

Next, go to Design > Advanced > Custom CSS and paste the code snippet you copied. You will see something like this happen:

How_to_cplit_footer_into_two_colour_blocks.PNG


And there you have it! Two different colour areas in your website’s footer!

If you want to change the colour, simply replace the #90A0A6 colour code to any other your heart desires.

This code works for the top footer. If you want to change the middle one instead, simply replace .Footer-blocks--top with .Footer-blocks--middle


SOME CONSIDERATIONS

Keep in mind that this works on desktop and will revert to the normal colour when viewed on a mobile screen.

Because we’re setting the width of the area to 100% some distorting may happen. For example, your blocks might be stretched too far out, so you would want to add some spacer blocks on each side of the area to create some padding.

Again, because we’ve stretched the area, you may find it difficult to edit, because the editing markers won’t show up in edit mode. To fix this, in the code injection change 100% to 90%. Now you should be able to see the markers. Make your changes to the blocks, then save and change the value in the code injection back to 100%.


GOT ANY QUESTIONS?

Drop them in the comment box below, I’d love to hear from you!