How to Change Overlay Color in Squarespace
A site header with a dark blue overlay.
Changing the overlay color in Squarespace can significantly enhance the visual appeal of your website. Whether you want to match your site header, create a more engaging background, or make the text on your background more visible to your readers, this tutorial will guide you through the process step-by-step.
Squarespace Tutorial Types: Video And Screenshots
We understand that there are different ways to learn. Some people prefer a video that shows them the process in its entirety, while others prefer to see snapshots of only the most important moments, so this blog will include both!
If you are someone who prefers a video, click the “play” button below. If you prefer a more self-paced tutorial with screenshots, click here so that we can jump you down to the section of that page.
Don’t forget to click the “like” button if you found this video helpful! And to check out our channel — we upload many different types of marketing videos that entrepreneurs and small business owners might find useful.
Now For The Screenshots!
Step One: Navigate To The Site Styles Menu
There are multiple different ways you can navigate to the site styles menu. And with a frequently-updating platform like Squarespace, you will discover that the ways to get there are always changing. However, as of November 2024, you can either click “Styles” under the website tab or click the paintbrush icon at the top right. Either will work!
Step Two: Click The Arrow Next To Your Color Palette
Do not click the color palette. The only time you will want to click the palette is if you want to update your brand colors. When you only want to assign different colors to different parts of your website, then you will click the arrow beside the color palette.
Step Three: Choose The Section Theme That You Want To Update The Background Image Overlay Of
You will see the theme of the section you want to update on the top right hand corner of that section. Make sure that you choose the right theme or your edit will not work.
Step Four: Click The Circle Of Color Next To “Background Overlay”
You will find “background overlay” near the top of the list.
Step Five: Choose The Color You Want The Overlay To be
You can either choose a color from your palette or a custom color. We recommend choosing a palette color so that you can stick to the theme of your brand. NOTE: Remember that the color you choose will update for every section that is assigned that theme.
Step Six: Click The “Save” Button and then The “Exit” Button Above The Site Header
If you already like the way your section looks, then congratulations! You reached the end of the tutorial. However, if you want to increase or decrease the overlay of your background color, then keep reading!
Step Seven: Go To The Page You Want To Update And Click “Edit”
The edit button will be at the top left of your website preview.
Step Eight: Scroll Down To The Section You Want To Change The Overlay To And Click “Edit Section”
In order to see the “Edit Section” pop up, then you will need to hover your cursor over the section. Once you hover over the section, you will usually see the pop up in the top right-hand corner of the section.
Step Nine: Click The “Background” Tab
This tab will be located at the top of the pop up.
Step Ten: Scroll Down And Increase/Decrease The Overlay Opacity
The more you increase the opacity percentage, the more you will see the color you chose. Keep increasing/decreasing the opacity until the background looks the way you want it to look.
Step Eleven: Click “Save” And Then “Exit” In The Top Left Corner
Once you’re finished updating your page, save your changes! After you click “Exit,” your website users will see the work you’ve done (unless your website isn’t public yet).
Now What?
If you found this blog useful in your website editing journey, then we are happy to share other resources you might find valuable! Not only do we regularly update our marketing blog with tutorials, advice, and news, but we also offer website coaching for businesses or entrepreneurs who require one-on-one support.
Here are a few things that you might learn in our sessions:
How to edit the design of your website.
How to use the different website tools Squarespace offers.
How to set up your website so that it performs well in Google’s search engine.
How to add or improve eCommerce features on your site.
Advice on how to make your website more valuable to your target audience.
Of course, these sessions remain completely customizable. So you can also approach these sessions with your own specific needs and questions, and we will adjust the agenda from there!
