How to Create (& Style) the Scrolling Text Effect on Squarespace

Squarespace
Written By Katherine Forbes

About this Squarespace video tutorial

Learn how to create the scrolling text effect in your Squarespace website. This is one of my favorite website effects with multiple uses, hopefully with this information you'll find how it can best fit your website plan!

Watch on YouTube

Timestamps

0:00 - Intro to Scrolling Text
0:34 - Real Website Examples
2:08 - How to Create Scrolling Text

Want 20% off your new Squarespace subscription?

Subscribe to the Designing the Row® email list and get the exclusive code sent straight to your inbox. You’ll get email updates when new Squarespace tutorials are published, but you can unsubscribe at any time.

    Built with ConvertKit

    One of my favorite features on Squarespace, and it’s a love it or hate it feature, is the scrolling text. I’ve been putting it on every site I design, so I’m going to show you how to use it!

    Real Website Examples

    On my personal site, I use the two words in my name, Katherine & Forbes, and have the words go in opposite directions.

    On a folk alliance site I made, the scrolling text was all about the valuable information for their main CTA.

    For a marketing group’s site with a dedicated event page, the scrolling text had all the event information condensed in one line.

    For my new designingtherow.com site, there’s a scroll on the bottom of my footer that offers some tagline information about my business.

    How to Create the Effect

    Edit mode. Add block. ‘Scrolling’ and it adds a default ‘Dream It’ text.

    Click the pencil over that text and edit it. Aside from editing the text as you would regularly, and adding all of the content you’d want, go to the Design tab.

    Here you can adjust:

    • Wave intensity

    • Width

    • Text style

    • Text size

    • Direction

    • Speed (I stick with .05x usually)

    • Pause on hover

    • Fade edges

    • Item spacing

    • Background

    • Blur

    As always, when you’ve made your adjustments, check it on the mobile view to make sure it still works properly, and you’re good to go! I think it looks really nice!

    This tutorial links well with a checklist video I’ve made about finding what to look for when updating your website, so go watch that next!

    *Affiliate disclaimer: Some links may be affiliate links at no extra cost to you.

    The latest Designing the Row tutorials…

    Katherine Forbes

    Katherine Forbes is the founder of Nashville based website and brand design company, Designing the Row. Her client roster has grown to include GRAMMY Nominated & Award Winning Artists, New York Times Best Selling Authors, Film Composers, Reality TV Personalities, & many more! She is known for her clean and simple design style and is recognized as a Squarespace Expert and Squarespace Authorized Trainer. She is also the creator of music community, Music Biz Besties, and teaches digital music marketing as an adjunct professor at ETSU.

    Her work has been featured on Forbes.com and she’s spoken on panels hosted by YELP, the Music Business Association, Women in Music, and many others.

    Katherine believes that "your success depends on you taking action" and she's passionate about motivating and encouraging others to do just that!

    https://www.designingtherow.com
    Previous

    What To Do If Your Website No Longer Reflects Your Business
    Next

    How to Create a Squarespace Website Quiz using Interact