How to Add a Background Color to Text in Squarespace (With no Coding!)
Well hello hello friends! Today I’m going to be talking you through how to add a background color to text with no coding! It’s super simple, done in a few easy steps and it’s one of my favorite Squarespace design hacks to use on client websites.
I love putting background colors behind text when I design websites, as it makes the text stand out that much more. And the amount of times I do it, you’d think it would be more obvious!
There’s definitely a way to do it with coding. But today I’m going down the no coding route as I know many of you aren’t the biggest fan of it! 🙂
By the end of this blog post, you’ll be able to add a background color to text and a button like the example below. Now if you’re ready, let’s get down to biz!
Steps to add a background color to text in Squarespace with no coding!
Step 1: Add a banner image to new section on your page in Squarespace
Click on the blue + sign to add a new section and select blank page.
Click on the pencil icon on the top right hand corner of the section
Click on the ‘Background’ tab and ‘Add an Image’
You’ll now have a section that looks a little like this (with your own banner image of course ;))
Step 2: Adjust the width of the section and add an image block
In this step go ahead and add an image block by clicking on the insert point. Then click on the pencil icon and you can adjust the width of the section by selection S, M or L under Content Width.
If you want to adjust the width further, click on the three dots next to Content Width and adjust accordingly.
Handy tip: You can also adjust the width of your content by inserting spacer bars and dropping your image block underneath one of the spacer bars - if you want your content to vary in width down the section.
Step 3: Upload an image of the background color you would like
The easiest way create an image of your background color if you don’t use Adobe, is to head over to Canva, create a design -> custom design -> 100 x 100px ->under elements add a square -> choose your color -> hit the download button
Now head back to your Squarespace website, upload the background color into your image block.
Under the ‘Design’ tab, choose the ‘Poster’ layout.
Sweet! You should have something that looks a little like this.
Step 4: Still in the Design tab add your button
To add you button, under ‘Image link’ select ‘Button’.
Add your button text and the Clickthrough URL.
Click on Apply.
Step 5: Edit the text on your image block
You can edit the text directly in the image block.
At this point you might choose to make your image block wider or smaller depending on how much text you have. Simply change the Content Width’ or if you’ve used spacer bars, drag the blue line on the image block to the left or the right to adjust.
To change the style of text, select the heading style or paragraph style you’d like to use.
Step 6: Change height of banner image
Depending on how large you want your banner image, you can increase the height by clicking on the pencil icon of the section. Under Format, select your desired Section Height.
If you would like your banner image height to be larger than L, you can increase the height by adding spacer bars above or below the image.
Step 7: Style your Poster Image block
Head over to your Style editor under Design -> Image Blocks
Under ‘Image Block: Poster’ you can change the text alignment, content width, title separation and button separation. Go ahead an play around to see what suits your style best.
If your text on your background color looks a little funky, don’t worry! It’ll go back to normal on a full size screen.
Step 8: Save and you’re all set to go!
Easy peasy right?!
Oh I’m not finished yet…
If you’d like to add a background color to text only, simply forget about the button block and format the text in front of the background color as you would like to design it.
Using an image block is super fun hack to adding color behind text without using the text block.
Happy website designing!
