Wavy Background for Squarespace Scrolling Block
Squarespace has a built-in scrolling block feature, and we can even add wave intensity to it. However, when we try to add a background color, the background color doesn’t follow the wave path. In this post, I’ll show you how easy it is to add this wavy scrolling block with bac
Creating a Wavy Scrolling Block with Background Colors in Squarespace
a.
Squarespace
b.
Video Walkthrough
Introduction
Squarespace has a cool built-in feature that allows us to add wavy scrolling blocks. But the feature doesn't support wavy backgrounds. In this video, I'll share how a little bit of CSS code can help us achieve this lovely wavy feature.
To access the codes, create an account and join our Squarespace Resource Vault mailing list →
Timestamped Overview
00:00 Introduction to Squarespace's built-in scrolling block and wave intensity feature.
00:11 Explanation of the issue with adding background colors.
00:19 Overview of the tutorial on adding a wavy scrolling block with CSS.
00:26 Accessing the code and joining the mailing list for updates.
00:37 Step-by-step guide on duplicating blocks and adding background colors.
01:00 Configuring wave intensity and other settings.
01:39 Adding custom CSS to hide the second scrolling text and retain the background color.
03:01 Aligning and managing the sizes of blocks to create the wavy marquee.
03:57 Using the shape block as a section divider.
06:49 Final adjustments and ensuring responsiveness for mobile views.
Squarespace has a built-in scrolling block feature, and we can even add wave intensity to it. However, when we try to add a background color, the background color doesn’t follow the wave path. In this post, I’ll show you how easy it is to add this wavy scrolling block with background colors using CSS. This technique allows us to adapt to any wave path or block colors.
To access the code I'll be referencing throughout the post, please check out the link in the description box. You’ll be asked to create an account and join our mailing list to stay updated on future resources.
Adding a Scrolling Block
We can add a scrolling block to any Squarespace blank section. In this example, I’ve added a background image. Double-click the block to access the block settings. Under "Content," you can change the text, add emojis, or other characters. Under "Design," you can add wave intensity. There are additional settings here, such as speed and the option to pause on hover. For text size, I prefer using the medium or large option to make it more prominent.
Adding a Background Color
To add a background color, duplicate the block and assign a background color to the duplicated block. For instance, hit Command D to automatically duplicate the block. You can also use the icon to duplicate it. For the duplicated block, assign a background color. Scroll down to toggle on the background color option and choose a color different from the first marquee or scrolling block. I changed it to blue and hit save for the duplicated block. Ensure the "Fade edges" option is toggled off.
Applying the CSS
Refer to our resource entry under the wavy scrolling block to add the CSS. Copy the set of CSS and switch back to our site. To access the CSS, hit the forward slash on your keyboard and start typing "custom CSS." Paste the code here, and you’ll notice it hides the second scrolling text but retains the background color. You might need to refresh your page for this change to reflect. In edit mode, the background color might not show up as expected, so check it out of edit mode.
Customizing the Scrolling Text Color
If you wish to change the color of the scrolling text, refer to our code entry under Optional CSS. Copy the code to change the marquee color and paste it into our CSS panel.
Aligning Blocks Using the Fluid Editor
Using the Fluid editor, it’s easy to overlap blocks to achieve the demo layout. Ensure the blocks are completely aligned. Move the background block beneath the scrolling text using the option to move backward or the keyboard shortcut Shift + Arrow Down. Ensure the sizes are aligned to create the wavy marquee with a background color.
Adjusting Background Color Width
To change the background color width, copy the optional customization code and paste it into the custom CSS panel. For example, changing the stroke width to 1.8m will make the background path larger.
Creating a Section Divider Effect
To create a layout where the wavy marquee serves as a section divider, use the same section but add a shape block at the bottom. Make sure the "fill screen" option is toggled off, allowing the fluid grid to span the entire height. Add a shape block at the bottom, ensuring it spans the entire width. Drag the shape to the right edge. With shape blocks, you can change the color to any palette color or assign a custom one.
Managing Block Stacking
Initially, cover the scrolling blocks with the shape block and manage its stacking by moving it backward using the icon or keyboard shortcut Shift + Arrow Down. Ensure it is underneath both scrolling blocks, then position it at the bottom to manage its height so it won’t peek through the top of the wave. Save and exit edit mode to achieve the desired layout.
Adding Other Components
You can add other components like text blocks to this section, making it seem like the wavy marquee is a section divider. Change the text color and scale it to the width of the container.
Mobile Optimization
Switch to Mobile view and align the wavy marquee, ensuring the scrolling text is on top of the background path. Use the icon to move forward and select multiple blocks to move them simultaneously. Adjust the shape block to be underneath the scrolling text blocks, manage the section height, and exit edit mode to achieve the effect on mobile.
Final Thoughts
If you use this technique, tag us on Instagram using our handle @squarestylist. We’d love to see what you create. For personalized support, we provide that through our program, Standout Squarespace. The program includes high-touch support and workshops on scroll-based animations and other resources to help you deliver high-quality web design projects that meet standards on responsiveness, accessibility, and SEO. For web designers working on Shopify projects, check out our video on adding this wavy marquee feature to any Shopify theme.