How to create a floating newsletter block in Squarespace

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

In this Squarespace CSS tutorial, I want to show you how a little bit of custom code can pull a newsletter block between two sections in a Squarespace website.

A few important things to note:

→ There is more than one way to do this! This is just one approach of many because code is super customizable.

→ You need to have two sections of content.

→ You need to customize the size and placement values in this code. I recommend sticking with vw (view width) vh (view height) and percentages so the design stays responsive.

→ You can add borders shadows and more to the newsletter block to customize it! A few of the codes are below but I want to encourage you to get creative here.

---

Version 7.1

Here’s the code:

.newsletter-block {margin-top:-20%; background:#FFF; padding-top: 3rem!important; margin-bottom: 5vh}

---

BRINE THEME - VERSION 7

Here’s the code:

.newsletter-block{margin-top:-20vh; background:#FFF; margin-bottom: 50px;} .Index-page{overflow:visible}

---

BEDFORD THEME - VERSION 7

Here’s the code:

.newsletter-block {margin-top:-20%; background:#FFF; padding-top: 3rem!important; margin-bottom: 5vh; z-index:99}