Why You Shouldn’t Put Scrolling Text in Your Website Header
I see this question come up a lot on the Squarespace Community Facebook page. People want to know how to add a scrolling banner to their website’s header.
They include examples of other websites they want to emulate, and in every case (at least the ones I’ve seen), the text in the banner is also scrolling, and sometimes there’s a lot of it.
People jump into the Facebook post to help with links to plugins and CSS on how to make this happen and it makes me wince a little. I want to say, “DON’T DO IT! DON’T MAKE YOUR TEXT SCROLL! YOU’LL LOSE WEBSITE VISITORS!” But I don’t want to be a bossy-pants or discredit anyone leaving comments.
Well, my friends, I’m here to tell you that scrolling text, ESPECIALLY in your website’s header, is a bad idea 100% of the time. There are no exceptions.
Sometimes We Get Carried Away With Design
We get excited when we’re building our websites, and sometimes we get carried away and start sacrificing content for design.
In my experience, the more we fuss with a design, the more the design suffers and the brand message is degraded right along with it.
You hear it all the time, “imagery will make your break your website.”
This is partly true. Trust me when I tell you that just because you have a lot of great photos doesn’t mean you should use them all.
Automatic scrolling gallery blocks are a great way to display several images without cluttering up the page, but don’t make the mistake of scrolling text!
It’s one thing to look at a sampling (and I do mean a sampling) of photos, but scrolling text is always a bad idea because it frustrates the heck out of website visitors.
If you are including important content in the scrolling text (hint: the ONLY content on your website should be important content), making it scroll is a great way to prevent your website visitors from seeing it and/or reading it.
Website content that delivers your brand message should always, always, always be static so that your website visitors can consume it.
How to Create a Scrolling Banner With Static Text
This is another question that came up once in the Squarespace Community Facebook Group.
When I hopped in to answer the question suggesting adding a gallery block first and then a text block over it (in Squarespace 7.1 fluid engine, of course), I learned that the Gallery Block feature is only available to Squarespace Circle members (which I didn’t actually know…whoops).
So if you are dead set on having a scrolling banner with static text, you have to either be a Squarespace Circle member or hire someone who is to do it for you.
It might be worth it to you to pay someone to do this for you, as it shouldn’t take more than 30 minutes to an hour.
Add Images
If you are a Squarespace Circle member, this is quite easy to do.
I suggest using images that are horizontally oriented. Otherwise, you may have to automatically crop them and they just won’t look good.
In edit mode:
Make sure ‘Fill Screen’ is toggled off.
+Block > Gallery > Edit Gallery Block
Upload all your images and customize the design of your Gallery Block. I suggest the following:
Design > Slideshow > Automatically transition between slides > 4 (or 5) seconds
Leave all other boxes unchecked unless you have to automatically crop them so they’ll fill the screen.
Now resize your Gallery Block to fill the entire header.
Add Text
Now you just add a Text Block and place it over the Gallery Block.
I’m sure you know how to do this, but here ya go:
+Block > Text
Position your block where you want it. You might have to add a background to your text so it’s legible, which I often do, but I usually make it somewhat transparent, which is also easy.
Just select the text block and in the bar, select the little paint can in the menu.
You can then choose a color from your color palette or add a custom color.
Once you’ve selected the color, click on it (the little circle) and you can drag the slider to the left to change the transparency.
You can also change the padding of the block by making it S,M,L or custom and you also have the option to add a corner radius. So easy.
If you want to remove it, just click the little paint can again, and at the bottom, choose ‘Remove.’
You can watch me do this in the video tutorial above if that helps.
Is It Ever Okay to Have Scrolling Text On Your Website?
Squarespace has a block called a ‘Scrolling Block’ which allows you to add scrolling text on your website.
If you are going to use this, use it sparingly for the reason I stated above: website visitors are frustrated by scrolling text.
I would only use it as follows:
For promotions
To draw attention to something in particular
Only put a few words in it so all the text in your block appears on the page at once
I show some examples in the YouTube tutorial above and also its design options if you want to see what I mean. I’ve time-stamped it so you don’t have to watch the whole video to find it. Just open it on YouTube, select ‘More’ under the video, and find the time-stamp called ‘5:28 Is it ever okay to have scrolling text on your website?’
What’s the Bottom Line
Any copy you put on your website should be carefully procured to serve the purpose of your website, which is usually to grow your business.
So, you shouldn’t have useless text on your website in the first place. Example: quotes. As much as I love them, they are someone else’s words and they have nothing to do with your business, even if you have an affinity for them (like I do…I used to do this all the time with my own website as well as my clients. I don’t do this anymore).
Since all the copy on your website serves a purpose, be sure your website visitors can easily consume it. Scrolling banner text makes it difficult for your website visitors to read your website copy, so just don’t do it. It’s merely an embellishment that provides no value.
Was this helpful?
Did you find this post helpful? Do you have scrolling banner text on your website that you’re going to remove immediately? Do you think I’m full of 💩. Share your thoughts in the comments. 👇
This page contains affiliate links
My Insta
@jenxwebdesign
Like this post?
