Squarespace Scrolling Block Different Color

[tuanphan]

To add different color to Scrolling Block text in Squarespace, like this.

#1.1. First, add color to Scrolling Block text, use format like this (wrap hex color or color name between # and #), like this

#1.2. Hover on Page where you use Scrolling Block > Click Gear icon

#1.3. Click Advanced > Paste this code

• If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1

<!-- 07.26c01v13 Scrolling Block Different Color -->
<script>
window.ScrollingColorsConfig = {
  pixelsPerSecondPerUnit: 50,
  spinnerSize: 36,
  spinnerThickness: 4,
  spinnerColor: "#888888",
  spinnerTrackColor: "rgba(0,0,0,0.12)"
};
</script>
<script src="https://code.beaverhero.com/scrollblock/0726c01v13scrolldifferentcolor.js"></script>

#2. Customize

nothing now

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can add a Markdown Block under Scrolling Block

Then add this code into Markdown Block

<script>
window.ScrollingColorsConfig = {
  pixelsPerSecondPerUnit: 50,
  spinnerSize: 36,
  spinnerThickness: 4,
  spinnerColor: "#888888",
  spinnerTrackColor: "rgba(0,0,0,0.12)"
};
</script>
<script src="https://code.beaverhero.com/scrollblock/0726c01v13scrolldifferentcolor.js"></script>