How to add a wavy background to a wavy scrolling block in Squarespace (7.0, 7.1 CE & 7.1 FE)

• 00
• 01
• 02
• 99

Today’s tutorial is inspired by a question I got via email.

The person who reached out wanted to know if there was a way to make the background color of the Scrolling Block match the wave intensity being used by text.

And guess what, there is!

So, if you’re interested in learning how you can achieve this customization in Squarespace for your own marquee text, hop onto the tutorial to find out what needs to be done!

Note: this customization requires Code Injection so you’ll need to use (or plan to use) Squarespace’s Business plan or higher.

Note: since this tutorial was released, there were some changes in Squarespace that may make the code create unexpected results. I highly recommend using this other method instead to avoid any issues!

Tutorial

Overview & timestamps

Even when the code for this customization is pretty short, the process to get to it is not that straightforward so let’s take it step-by-step:

1. 00:00 - Intro

2. 00:37 - What happens when the native background color gets enabled

   First off, we’ll take a look at the original way Squarespace applies the background color to the Scrolling Block or marquee block when we enable it through the block’s settings.

3. 01:10 - Looking into how the scrolling block is build

   Next, we’ll need to hop onto the Inspector tool to find a suitable container or element to carry the background color, so that we can have it match the wavy pattern of the text.
   I’ll skip the boring trial and error part for this one and jump right into the part of the SVG that can actually get us to the final result. But, in case you’re left wondering, there was no obvious way to tell. There was a lot of targeting and CSS testing involved in the behind the scenes process!

4. 02:26 - Fixing the cut-off issue

   Once we have the new color in place, we’ll take a couple of minutes to look through the different parent containers of our wave, to see which one is cutting off the edges to make sure everything shows up nicely and smoothly!
   This overflow cut-off process is the exact same one I use in similar situations with different blocks and elements, so make note of it for future projects!

5. 05:13 - Making sure the text shows up on top of the background color

   Last but not least, I’ll walk you through the reason why we have to use Code Injection for this customization, what the script is going to do for us, and what things will look like inside the Inspect Element tool once we implement it.

And just like that, you’ll have successfully added a wavy background to your Squarespace marquee block.

Hope you found this useful!

Until next time,

B.

---

Full code

Note: since this tutorial was released, there were some changes in Squarespace that may make the code create unexpected results. I highly recommend using this other method instead to avoid any issues!

jQuery library (if needed)

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Footer Code Injection section

<!-- HOW TO ADD A WAVY BACKGROUND TO A WAVY SCROLLING BLOCK IN SQUARESPACE (7.0, 7.1CE & 7.1FE) -->
<script>
  $(function() {
    $('.Marquee-hitbox').insertAfter('.Marquee-path-group');
  });
</script>

Custom CSS window (Option #1: Thin background)

/*HOW TO ADD A WAVY BACKGROUND TO A WAVY SCROLLING BLOCK IN SQUARESPACE (7.0, 7.1CE & 7.1FE)*/
.Marquee-path-hitbox {
  stroke: #ebebeb;
}
.marquee-block .Marquee {
  overflow: visible;
}

Custom CSS window (Option #2: Thick background)

/*HOW TO ADD A WAVY BACKGROUND TO A WAVY SCROLLING BLOCK IN SQUARESPACE (7.0, 7.1CE & 7.1FE)*/
.Marquee-path-hitbox {
  stroke: #ebebeb;
  stroke-width: 90px; //to adjust the thickness
}

.marquee-block .Marquee,
.marquee-block * {
  overflow: visible !important;
}