Design Tip: Full Width Newsletter Block in Squarespace

This full width stuff in Squarespace is really quite the 'in' thing right now.  I promise this will be the last post about achieving this look in Squarespace (until the next person asks about it, hehe). 

 
Screen Shot 2017-01-11 at 5.25.55 PM.png
 

And if you're anything like me, you prefer a video walk-through, which I've made for you below. :)

So, here's the scoop.  

I was re-arranging my website (notice I've changed my focus a bit...read: a LOT) to offer more development-type services.   One thing I wanted to change was my email opt-in form.  It was just sitting at the footer of my website, sad and lonely.  No love was given to my boring, little form.  :(

I needed to draw a bit more attention to it and recalled having come across an article making a full width newsletter block in the Bedford template.  This was exactly the look what I wanted; however, not exactly the implementation I had in mind (albeit, similar). 

So, let's do this...

Step 1:  Create a Newsletter Block in Your Pre-Footer Area

In your Pre-Footer Content Area, click the white "+" sign and add a Newsletter Block.  Leave the title blank, put your text in the "Description" field, and make sure to have "Alignment" set to 'Center' and "Layout" set to 'Float Fields' (as shown). 

If you implemented the full-width Instagram feed I posted, skip to step #2.  If you haven't taken advantage of that yet, add this to your Design -> Custom CSS:

.pre-footer .footer-inner, .pre-footer-inner {max-width:none;}
.pre-footer-inner .sqs-layout {padding:0;}

Step 2:  Move the newsletter block to the Bottom of Your Homepage Banner

Here's where it gets a little hacky (but just a little!).  We're going to use javascript to accomplish this step.  Why not clone it using a code block?  Well, because I want this at the bottom of all my pages except the homepage (and while you could hide it, you'd run into duplicate ID's).

It's also nice to be able to edit text & colors through the admin tools as well.  And because...6 lines of script.  No biggie.

So, put the below snippet of code in Settings -> Advanced -> Code Injection-> Footer

<script>
function insertBefore(el, referenceNode) {
    referenceNode.parentNode.insertBefore(el, referenceNode);
}
var ref = document.querySelector('#page')
var newEl = document.querySelector('.homepage #your-block-yui-id-goes-here');
insertBefore(newEl, ref);
</script>

Please note to replace ""#your-block-yui-id-goes-here" with the outermost div of your newsletter block.  

Step 3: Pretty it up

At this point, you should have a full width banner but it's probably not so pretty.  To make your description inline with the form fields we are going to add the below in Design -> Custom CSS

#your-block-yui-id-goes-here {padding:0}

.newsletter-block .newsletter-form-header {display:inline-block;width:auto;margin-right:10px;}

.newsletter-block .newsletter-form-body {display:inline-block;}

Again, please note to replace ""#your-block-yui-id-goes-here" with the outermost div of your newsletter block.  

And that's all!  Hope this has been helpful.  If you do this on your site, please post a link in the comments! I'd love to check it out. :)