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

One of the most common questions I get about designing in Squarespace is if there is a way to add a text block with a colored background.

Seems simple enough, right?

But unfortunately there’s no built-in solution or block for this in Squarespace. Which honestly, is pretty crazy. The amount of times you need to put a colored background behind a block of text in web design is often enough that there should be a simple option to add it.

There is a solution though, and I’m going to walk you through it today. But be warned, the solution does involve some CSS code!

If you’re new to CSS code, then just know that this is about as basic as it gets, so don’t be afraid of it!

I really love using CSS with Squarespace because you can easily make small but impactful adjustments to your site design, just like adding a background color to a text block! It seems like it should be so simple, and with CSS it’s is! But if you don’t use CSS, it’s literally impossible.

So let’s get started!

 

Here is an example of text with a background color!

This helps the text stand out and is great if you have a busy background image!

And there are a few different ways you can do it. Today I'm going to show you two ways, both involving some basic code. So let's get started!


The first method…

Using a Block Identifier and adding basic CSS

Step 1 : Identify your Block

Each Block on your site has a different identification number. Once you have the identification number of a certain block, you can easily make CSS changes to it over in the Squarespace CSS Editor.

The easiest way to find the block number:

If you’re using Google Chrome, download this Squarespace Block Identifier extension for Chrome. This extension is designed to help you find the Block Identification Number of each Block on your Squarespace Site.

Open up the page with the block you want to identify, click on the Identifier Tool in your Chrome Extensions and it will instantly reveal the Block Identification Numbers (which will be something like #block-53c818fd6d3f39517aed or #block-yui_3_17_2_1_1556302617094_72323)

Click on the Block you want to use and it will automatically copy the Block number for you!

If you don’t use Google Chrome:

Firstly, I recommend downloading it even if it’s just to use this extension, it will save you a bunch of time.

Otherwise, you can right click on the block and then click Inspect. Somewhere in the code for that certain object it will say ID=block etc. Though there are a lot of “ID’s” so make sure you look for the correct one, it needs to start with block.

TIP: Make sure the Block number starts with Block. If it starts with anything else, it’s not the correct ID.


Step 2 : Add your CSS

Once you have found the correct Block ID, make sure you have it copied. Then, head over to Design > Custom CSS.

TIP: I recommend having the page you’re planning to work on (with the said block) open while you are working on the CSS, because when you make the CSS changes you will be able to see them happening on the page.

Paste your Block ID into the CSS editor, and make sure it has a hash (#) at the beginning of it.

Use the following code to add a background to your text block:

#block-53c818fd6d3f39517aed {
background: #f0f0f0;
padding: 50px;
text-align: center;
}


Just replace the Block Id, the color hex code, the padding value and the text alignment value. You should be able to see the changes happening while you adjust this in your CSS editor. If you can’t, it’s likely that you have the Block ID wrong (or maybe you have altered the code, compare it to the code above to make sure you haven’t accidentally deleted or changed something)

Once you’re happy with how your CSS looks make sure to hit Save in the top left hand corner!


The second method…

Using a Code Block and basic HTML

This method may be better or easier in some situations, and it works just as well.


Step 1 : Add a code block

Just like you would add a text block, add a code block instead:

Adding a colored background to a Text Block in Squarespace - Big Cat Creative



Step 2 : Add your Code

Instead of just adding CSS styles to a Text Block like we did above, this time we’re actually going to add our text and our CSS styles within the code box, so everything is contained in the one box.

Here is the code I used for the box at the top of this page:

<div class="grey">
<h2>Type your Heading 2 text in here</h2>
<h3>Type your Heading 3 text in here</h3>
<p>Type your Paragraph text in here</p>
</div>
<style>
.grey { 
background: #f0f0f0; 
padding: 50px; 
text-align: center; 
}
</style>


The code within the <div> tags is the HTML part. The <h2> <h3> and <p> tags indicate Heading 2, Heading 3 and Paragraph text. Type all your text within these tags. You can experiment with these to get the desired look you’re going for.

The code within the <style> tags is the CSS, and this is where you control your background color, padding and anything else you want to add, just like we did in the first method.

The key here is to make sure that div class matches up with the CSS class. For example <div class=”grey”> and the CSS class .grey

You can change this class name to whatever you want, as long as they are the same they will be linked together.

When you’ve pasted the code into the block, make sure to hit save on the Code Block and then save again on the page section.


And that’s it! Pretty simple, right?

Like I said above, learning some basic CSS opens up a whole world of new things you can do with Squarespace design, especially things that should be already included like basic background colors in text blocks!

I’ve tried to keep this guide as straight forward and as copy + paste-able as possible, so hopefully it helped!

Thanks!

 
 

Pin this to Pinterest!

 
Learn how to Add a Background Color to a Text Block in Squarespace with this basic copy and paste CSS code for Squarespace #squarespace Squarespace Tips and Tutorials by Big Cat Creative
 
 

more Squarespace tips