How to create knockout text in Squarespace

Jun 28

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

Have you heard of knockout text? It’s a technique that clips the text out of a block of color so you can see an image behind it, and YOU can create this look in Squarespace in just a few simple steps!

We’ll use a little CSS to create this effect, and a block ID to apply it to one specific block of text in Squarespace.

The code is below, and there are a few important things to know before you get started:

→ Your knockout effect is only visible when you are not in edit mode. While editing your site, the text will look solid white and you won’t see the effect. Once you save your changes and reload the page, you’ll see the knockout text effect.

→ This will work in any version of Squarespace, even older sites built with 7.

→ I am using a Heading 1 text type which goes by the selector h1 - if you are using a different type of text, update h1 in the code below to the selector of your text type.

→ I wanted to change only one block of text so I am using the block id before the h1 selector in my code. To grab that ID, I used a free chrome extension. I am not affiliated with the extension or its creators; just a fan. Here is a link if you want to give it a try too: https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

Here is the code from this tutorial:
Don’t forget to change the block id and text selector to match the text you are changing on your own site!