How to add a coloured text block to a Squarespace 7.0 webpage

21 Apr

**Make it stand out**

Whatever it is, the way you tell your story online can make all the difference.

Click here

Squarespace is a highly customisable website designing platform that allows you to create awesome looking web pages, either from scratch or by using their many stylised templates.

It is a great option for many types of website, and especially for those wanting to teach online. It is easy to host a teaching course using their member areas feature, and create a state-of-the-art website to promote it, all within their easy-to-use platform.

Since the launch of Squarespace version 7.1, gone are the restrictions applied to previous versions where different design templates offered different functionality - now you can enjoy every feature that Squarespace has to offer, no matter what site template you choose initially.

One of the most useful new additions to the Squarespace toolkit is the ability to split your page into Sections, each able to have a different background colour or image. This allows you to create a multi-zone webpage that is more interesting for your visitors than just a simple white page with text & images on top.

Unfortunately there is no easy way to migrate websites from version 7.0 to 7.1, so many of us are stuck with the functionality offered by the older version.

Text Blocks

Squarespace webpages are built out of content blocks, whether they contain text, an image or even some embedded code. Whilst the font, size and colour of text in text blocks is customisable, unfortunately with the older version of Squarespace (7.0) there is not an option to change the background colour of each specific text block like there is with version 7.1.

There is a workaround, however, that gives us some options when it comes to a content block that contains text and a coloured background…… it isn’t perfect, but is certainly better than nothing.

Our workaround means we can have the following in our box:

Two different text sections with adjustable fonts - a title and subtitle
Any colour or image background we like
A button link if required
Multiple shape outlines from basic rectangle (or with rounded corners) to circles, triangles and more

The main limitation of our workaround is that the text must be centre aligned. Otherwise it is pretty handy!

Choosing our background colour

The first step is to decide which colour we want to use for our block’s background. The way this workaround works, we are going to create an image that contains the background we want to use.

Now this can be an actual image or a plain colour. For the purposes of this example we are going to use the dark blue colour that is part of the colour palette that we are using for our site. I want the coloured text box to match the coloured sections in my website.

To find out what that colour is, on any page, click the ‘Edit’ button in the top left.

Next, open the Site Styles panel by clicking the little paint brush icon top right.

This opens the Site Styles panel. Let’s click ‘Colors’ on that panel.

Now our website’s colour palette opens. Click on it.

The colour picker for our palette opens. Click on the circle at the top that contains the colour we want to use.

Doing that reveals the hexadecimal code for that colour. In my case, the blue is #476C77. Highlight the code for your selected colour, and then click your right mouse button and select ‘Copy’ to copy the code to your computer’s clipboard.

Creating our background image

We need to create a sample jpeg image that only contains our chosen colour. It can be any size - Squarespace will stretch it to fit.

You can use image manipulation/creation software like Photoshop or free Gimp to create this, but if you aren’t familiar with those applications, we can use the Canva free online design platform to do it. Go to canva.com

You can sign up for a free account, but it isn’t necessary for our needs. Scroll down the page and click ‘Create a design’.

This will open the design panel. Now click anywhere on the blank page in the main panel.

This brings up the colour palette icon in the top left of the main design panel - click that.

Finally, the colour picker panel is revealed. In the colour code entry box at the top, add your colour hex code - for me that is #476C77. When your chosen colour appears in the box below, click that box to fill your blank page with that colour.

When the panel has been filled, click the ‘Share’ button in the top right corner of the screen.

Now select ‘Download’.

On the Download pop-up that appears, change the filetype to ‘JPG’ and then click ‘Download’. Wait a moment and the file will be added to your ‘Downloads’ folder.

Creating our coloured text block

OK, so we have our background image file. Now it is time to create our coloured text box. The trick is to use an ‘Image’ block rather than a text block!

When the ‘Add Image’ dialog box appears, click ‘Add an Image’ then choose ‘Upload File’ and browse your computer for the background image that we just made in Canva.

When the background file has uploaded, we can then change the design of the box by clicking the ‘Design’ tab.

First things first, change the format of the image box to ‘Poster’. When you do that, our 2 text sections appear - title & subtitle.

If we want to keep a rectangular/square box, but curve the edges, we can click the dotted cube icon and select the angles of corner radius for each corner.

If we want to use a different shape e.g. a circle, then we can click the ‘Shape’ button and select a shape from the different options displayed. Lets go with a circle. Remember you can drag and drop spacer blocks either side of the shape to change its size.