Adding Text on a Colored Background
Today’s post is another quick Squarespace tutorial that can make a big difference when you design your website!
One of the things that I’ve noticed when designing for clients is that they often want to put text over images. And that’s a good thing - images are a great way to communicate your brand and draw in visitors. But Squarespace doesn’t make it easy to add text that will be legible when you want to use different colors and don’t want an overlay on every image.
So what can you do when you want to add text on top of an image? There are a few solutions, but today I’m focusing on just one: adding a colored background to text.
We’re going to do this using the Squarespace Code Block, so you can add it to any section of your website, including on Index pages with an image as the background.
You can also use this same code to add a single colored block with text (this works great on a Resources page).
Why do it this way?
Before we jump into the code, I want to share more about why this is a good tool to have in your tool belt when designing your website.
Many of my clients want the option to have text on top of an image or solid background. Their first go-to method is to use one of Squarespace’s built-in designs in the Image Block. And that can be a good way to add text, but it’s limited by the Design Settings you choose.
For example, you may have two different images with different background colors or hues. When you choose add text using the Image Block design options, the text color is decided by the Style settings and will be the same for every image on your website.
It’s really hard to find one color that will show up well on top of every image you might use. And even if you add an overlay color, it won’t always allow the text to be legible and can turn down the vibrancy of your images (this is especially true for Index images where the overlay is added to every Index image, even if there isn’t text).
Image One
Image Two
Why not create an image?
The other option clients often ask about is creating the image outside of Squarespace with the text already in place.
For example, you want to create a header image with text and a colored background, so you design the whole thing in Adobe Illustrator and then upload it as one file. This means you have total control over how the image looks, but there are three problems:
The text is part of the image, which means it might get blurry when uploaded.
You lose out on SEO because search engines can’t read images. If your headline is an image file instead of actual text, Google won’t know what it says.
Your image doesn’t look the same on all monitors and devices, so part of your text could be cut off.
So what’s the solution?
When you want to use a solid color background for your text, the option I prefer is to add a Code Block with the text and background to the page and then place it where it needs to be with spacer blocks. That way, it will always be legible and will show up on any device or screen size.
Let’s get to the code
There are a few pieces to this code, so I’m going to break it down below.
<div align="center" style="padding: 30px; background-color: rgba(89,196,192,0.2);">
<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Three</h3>
<p>Paragraph</p>
<p style="color:white;">Paragraph White</p>
</div>Heading One
Heading Two
Heading Three
Paragraph
Paragraph White
Align controls where the text is located. This can be left, right or center.
Padding sets how much padding you want around the text. This makes all the padding the same, but you can also set it separately for each side using padding-left, padding-right, padding-top, and padding-bottom.
Background-color is the color of the block. I recommend using an RGBA color because you can control the opacity (the 0.2 part), but you can use any color identifier.
H1 means to use the styles of Heading 1 that are set in your Style settings.
H2 means to use the styles of Heading 2 that are set in your Style settings.
H3 means to use the styles of Heading 3 that are set in your Style settings.
P means to use the styles of Paragraph that are set in your Style settings.
Color allows you to change the color of any of the above text styles. Do this by adding “style= “color: white”” after the P and before the closing bracket. You can choose any color. This is also where you can make other changes to the text styling such as making it uppercase (text-transform: uppercase;), changing the letter spacing (letter-spacing: 0.5em;), or changing the font size (font-size: 24px;). If you want to see more options, check out this post.
Want to add a button?
One limitation of a colored block and text this way is that there isn’t a built-in button like there are on some of the Image Block options. But there is a way to add a button.
<div align="center" style="padding: 30px; background-color: rgba(255,255,0,0.2);">
<div>
<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Three</h3>
<p>Paragraph</p>
<p style="color:white;">Paragraph White</p>
</div>
<div align="center">
<a href="https://www.lemonandthesea.com" style="border: solid 1px black; padding: 15px;" target="_blank">Button text</a>
</div>
</div> Heading One
Heading Two
Heading Three
Paragraph
Paragraph White
You’ll notice that there is an extra <div>before the text and an extra </div> after the entire code. This is so that the button will show up on top of the colored background instead of below it.
Again, I aligned the button to the center, but you can also set it to the left or right. Here are the other things you’ll need to know:
A href is the link you want the button to go to.
Target is set to _blank so that the link opens in a new page. If you want it to direct people to the new page without opening a new tab, just remove this part.
Style here sets what the border around the button will look like and how much padding will be between the button text and the border. You can learn more about the options for those setting in this post.
Hopefully this will help you take your Squarespace website design to the next level by opening up new options that aren’t built into the platform. Be sure to check out my other Custom CSS posts to learn about other customization you can make.
And if you know your website needs some customization, but you’re intimidated by trying it yourself, get in touch about how we can work together.
