How to Make a Full Width Newsletter Bar in Squarespace

How to make a full width newsletter in Squarespace thumbnail banner

If you're using the Bedford template for your Squarespace website and want to add a prominent full width newsletter bar below the banner, this tutorial will make your day!

A request from the Facebook group Squarespace Rockstars caught my attention as someone asked if it was possible to have a newsletter signup form that could be positioned under the banner like in the example below.

If you know me then you know that I like a challenge, especially when it comes to Squarespace customization!

Let's get started.

1. Setting up the code block

As you know, Bedford is not a template that allows full width backgrounds, which is something needed to achieve this kind of effect, but with a little bit of code we can overcome this.

Open the custom CSS editor in Squarespace and go ahead and paste the following code in there.

body {
  overflow-x: hidden;
}

.full-banner {
  max-width: 2900px;
  margin-left: -78%;
  margin-right: -78%;
  background-color: #3eb97a; /* Change this to your color  */
}
 
.full-banner-wrapper {
  margin: 0 auto;
  margin-left: 29%;
  margin-right: 29%;
  overflow: hidden;
}

Then go to the page you want the custom newsletter signup on and insert a code block at the top of the page. Inside that code block add the following HTML.

<div class="full-banner">
  <div class="full-banner-wrapper">
    
  </div>
</div>

Let me explain really quick what's going on here. The DIV full-banner has a class styled so that it will stretch the entire width of your page and it is also assigned the background color that you desire.

Note: If you don't know what a DIV is, just think of it as a container (physically).

Inside that DIV is another DIV with a class called full-width-wrapper, which will hold our newsletter.

Test: Add some text in the DIV full-banner-wrapper and you should see something like this.

Now what you might also see is some white space above and below our full width banner. This is caused by the template's default padding. However, we only want to remove the padding from this specific page, so we need to find the page's ID.

Right click on your page and click Inspect. Scroll up to the <body> tag and you will find the ID.

Copy the ID of the <body> tag and add the new style into your CSS as seen below. Replace collection-54fef900e4b0188c34e40c56 with your ID just copied.

body {
  overflow-x: hidden;
}

body#collection-54fef900e4b0188c34e40c56 main#page
{
  padding: 0;
}

.full-banner {
  max-width: 2900px;
  margin-left: -78%;
  margin-right: -78%;
  background-color: #3eb97a;
}
 
.full-banner-wrapper {
  margin: 0 auto;
  margin-left: 29%;
  margin-right: 29%;
  overflow: hidden;
}

2. Cloning the newsletter block

Below the code block we have been working on in step 1, insert a newsletter block.

If you want to keep the title and the disclaimer feel free to do so, but you may need some extra styling along the way. Take a look at how I set mine up which I connected to Google Drive under storage options. Save your work so far!

Once you have your newsletter styled how you like it, we need to 'clone' it and move it into our DIV from step 1.

To do this right click on your page and click 'Inspect' then look for the beginning of your newsletter block. Once located right click on it and select 'Copy' and then 'Copy outerHTML'. If your not sure take a look at this.

Now with the newsletter block code copied, jump back into the full-banner-wrapper DIV from step 1 and paste. This DIV should now look something like this.

Now you can see we are getting somewhere!

3. Additional styling and design

We want to move the text that reads 'GET FREE TIPS TO CREATE A BUSINESS & LIFE YOU LOVE' so that it sits side by side with the contact form, especially in desktop view.

The newsletter code block consists of two classes, which are newsletter-form-header and newsletter-form-body. Add the following to your custom CSS.

.full-banner-wrapper .newsletter-form-header {
  width: 50%;
  float: left;
}

.full-banner-wrapper .newsletter-form-body {
  width: 50%;
  float: right;
}

Something you may notice is that your the newsletter block has a fair amount of padding both at the top and bottom.

Remove the padding by locating the ID on your code block and using it with the following code. Change block-yui_3_17_2_5_1472491687515_15955 to your ID. Also add the code below to align the newsletter text up with the text field.

#block-yui_3_17_2_5_1472491687515_15955 .newsletter-block .newsletter-form-wrapper--alignCenter.newsletter-form-wrapper {
    padding: 0px 17px;
}

.newsletter-block .newsletter-form-header-description p {
    margin: 28px 0;
}

We also need to add a class to both the newsletter-form-header and newsletter-form-body. This class will allow for better mobile styling. Open your code block that holds your newsletter and add sqs-col-6 span-6 to them both.

4. Optimize for mobile rendering

Just add the final two styles to make your newsletter render nicely on mobile view. Replace collection-54fef900e4b0188c34e40c56 with your page ID as we did earlier on.

@media only screen and (max-width: 640px) {
  body#collection-54fef900e4b0188c34e40c56 main#page .sqs-layout .sqs-row .sqs-block:first-child {
    padding-top: 0px !important;
  }
}

@media only screen and (max-width: 640px) {
  body#collection-54fef900e4b0188c34e40c56 main#page .sqs-layout .sqs-row .sqs-block:last-child {
    padding-bottom: 0px !important;
  }
}

Now I know there are a lot of back and forth actions when it comes to setting this up, below you will find the complete CSS I used to get this to work.

You should be able to use the exact code below, however you will need to replace the ID's with your own.

Final CSS

body {
  overflow-x: hidden;
}

body#collection-54fef900e4b0188c34e40c56 main#page
{
  padding: 0;
}

.full-banner {
  max-width: 2900px;
  margin-left: -78%;
  margin-right: -78%;
  background-color: #3eb97a;
}
 
.full-banner-wrapper {
  margin: 0 auto;
  margin-left: 29%;
  margin-right: 29%;
  overflow: hidden;
}

.full-banner-wrapper .newsletter-form-header {
  width: 50%;
  float: left;
}

.full-banner-wrapper .newsletter-form-body {
  width: 50%;
  float: right;
}

#block-yui_3_17_2_5_1472491687515_15955 .newsletter-block .newsletter-form-wrapper--alignCenter.newsletter-form-wrapper {
    padding: 0px 17px;
}

@media only screen and (max-width: 640px) {
  body#collection-54fef900e4b0188c34e40c56 main#page .sqs-layout .sqs-row .sqs-block:last-child {
    padding-bottom: 0px !important;
  }
}

@media only screen and (max-width: 640px) {
  body#collection-54fef900e4b0188c34e40c56 main#page .sqs-layout .sqs-row .sqs-block:first-child {
    padding-top: 0px !important;
  }
}

Full width newsletter bars are really popular right now and are a great way to draw attention to your newsletter. I'll be making a video walkthrough to accompany this post very soon, so sign up to our newsletter to get notified once it's been published. 

As always, if you have any questions or need a hand please leave a message in the comments section below!