How to Add a Background Color to a Text Block in Squarespace

Create a block of text with a background color in Squarespace 7.0 and 7.1. This step by step tutorial involves a bit coding but it's really easy! It's a simple copy and paste code to add the background color to the text block and will work on any Squarespace website or plan.

TIMESTAMPS:
0:00 - Intro
0:37 - Codes and Chrome Plugin
3:20 - Adding the Code

MENTIONED IN THE VIDEO:

MORE GOODIES:

*This is an affiliate link. I may earn a commission if you sign up using this link, at no cost to you, of course :) I only promote things that I love and recommend.

[micromodula]

This is great, thanks! What if you want to change the font color only in that block?

[guaraferreira]

This is fantastic! Thank you so much for sharing it! Perfect tutorial

[jenslifeview]

This is really great and exactly what I was looking for - thank you!

[catandnova]

Thanks! It worked perfectly and the add-on is very useful

[marykaybailey]

Thank you for this post and video! Cannot believe this isn't a standard feature in Squarespace!

[hollienash]

Lifesaver!! I’ve been using canva to create backgrounds this whole time lol 🤦🏼‍♀️ thanks!!

[laurenlee]

This helped SO much! Thank you for the video

[evelenadawson]

Thank you so much. This was so helpful. :)

[TiffinboxTV]

Thank you for this tip. Love your IG tips, too!

[MarkAndrewAnderson]

You are the best. I have learned so much from you re Squarespace. Thank you. Quick question, I put a grey bar over text by following your code instructions. However, I want to make the grey bar less wide. How do I do that?

[bananageden]

Hi, Thanks for the tutorial. This isn't working for some reason. Have followed it to a tee but no joy. Does that code still work for you? Thanks

[angelajones]

Thank you! This was very helpful! How would you make the block transparent?

[chitowncrazy]

Very helpful! Thank you. How do I remove padding from sections so I can move the text block closer to the edge of that specific section?

[SurvivingComics]

How do I do this in 7.0 blog posts? Im using the same CSS and its not working.

[madeinLA]

Thanks for this video! It was super helpful. I tried this and noticed it works on desktop but not mobile. Any idea why? Thanks!

[gelatogirl]

Thanks for the tips. What if you need to add columns of text within that text block? I would love to be able to add a background color to multiple columns of text all in one block.

[alexiapersaud]

Thank you so much for the help!! i did run into an issue where i wanted to add a background color to another text on the same page and the blocks connect; i would like them to be separated. do you have any suggestions?

[rappa____]

this has been really helpful! My only question is; what happens when you want to make the colour block sheer? is it more complicated that way?

[hannahtempany]

Hello! Are you able to outline the background colour block? Trying to create some colour block grids

[lindseydean]

I am unable to figure out how to make the text box not stretch across the entire screen/image!