How to Overlap Text onto Images in Squarespace

So, let's say you want to make your images and captions a little more attractive on Squarespace.

You've uploaded a nice photo, but you don't want a simple caption just underneath that photo. You want something bold and striking - something that demands to be read and encourages your audience to take some kind of action. 

In this brief tutorial, I'll show you how to overlap your text over your images in Squarespace.


1. Using the '+' sign in the upper right-hand corner, drag and drop an Image block to wherever you'd like to locate your image. Upload your photo into the image block.

Screen Shot 2017-12-15 at 9.53.45 AM.png

2. Once your image has been uploaded onto your webpage, head over to the 'Design' tab on your image Edit options. Select "Overlap."

 

Screen Shot 2017-12-15 at 9.54.27 AM.png

3. Once you've selected 'Overlap,' you will be prompted to write in your text over the image where it says 'Write here...' (don't worry - if you don't like the font, size, or color - we can edit those later!) I've written a nice little reminder over my image...

Screen Shot 2017-12-15 at 9.55.23 AM.png
 

Screen Shot 2017-12-15 at 9.56.15 AM.png

4. Once you've written your text into the 'Write here...' section, you can begin styling the text to make it more visually appealing. To do this, head over to your side panel on the left-hand side, click back to 'Home,' and choose 'Design' ⟶ 'Style Editor.'

Screen Shot 2017-12-15 at 9.56.05 AM.png

5. Once you've selected 'Style Editor,' scroll your cursor over to the overlapped text you've just created and click on it. This will prompt your Style Editor to focus on 'Image Block: Overlap,' which will allow you to choose a different font, font size/weight, font color, etc.

Go ahead and experiment a little bit to see what works best with your overall brand or website mood!

Screen Shot 2017-12-15 at 9.56.22 AM.png

Before (with text under image)

Screen Shot 2017-12-15 at 9.54.17 AM.png

After (with text overlap)

Screen Shot 2017-12-15 at 9.58.19 AM.png

And here's the finished product of my beautiful text overlap (complete with an inspirational message brought to you by some hip 90s rap that just happens to work will with this collaborative image... thanks Vanilla Ice!) 

I ended up just changing my font color from a light pink to a deeper brown color, decreased the font size, and changed the font. Totally different feel!