The Codebase

Browse all Resources!

Look up that Squarespace tutorial, plugin, snippet or course that’s gonna help you customize your current personal or client project.

Looping rotating words effect for headings in Squarespace (7.0, 7.1 CE & 7.1 FE)

Want to create a looping rotating effect for a heading on your client project? Then take a look at how you can easily achieve that with an awesome plugin!

Read More

Add custom bullet points to text blocks and image blocks in Squarespace (7.0, 7.1 CE & 7.1 FE)

Want to create branded bullet points for your client’s site? Then take a look at this tutorial to learn how you can make that happen, only with CSS, for both text blocks and image blocks!

Read More
All CSS tricks, Fonts, Cool look, 7.0, 7.1, 7.1 CE, 7.1 FE Beatriz Caraballo All CSS tricks, Fonts, Cool look, 7.0, 7.1, 7.1 CE, 7.1 FE Beatriz Caraballo

Turning a header into outline text in Squarespace (7.0, 7.1 cE & 7.1 FE)

Today’s tutorial is a fun little trick inspired by a question asked by a member inside the Club. We’ll be looking at how you can turn any heading on your client’s site into outline text! This will be a quick one, so let’s dive right into it!

Read More
All CSS tricks, Fonts, Background, 7.0, 7.1, 7.1 CE, 7.1 FE, Title/Caption Beatriz Caraballo All CSS tricks, Fonts, Background, 7.0, 7.1, 7.1 CE, 7.1 FE, Title/Caption Beatriz Caraballo

Adding an image behind a heading in Squarespace (7.0, 7.1 CE & 7.1 FE)

For today’s CSS trick, we’ll go through how you can add an image as a background to headings on your site, so you can create a more custom design without having to sacrifice the benefits of using real text!

Read More
All CSS tricks, Customization tips, 7.0, 7.1, 7.1 CE, 7.1 FE, Fonts, Spacing Beatriz Caraballo All CSS tricks, Customization tips, 7.0, 7.1, 7.1 CE, 7.1 FE, Fonts, Spacing Beatriz Caraballo

How to create a multi-column text block in Squarespace, without using separate blocks (7.0, 7.1 CE & 7.1 FE)

This depends on the font you’re using and the styles you’ve set for it, but most often than not, you feel you need just a bit more space between both columns. The problem is if you shove a spacer in there, the gap looks more like an airport runway than anything else.

Read More
All CSS tricks, Fonts, Gradient, 7.0, 7.1, 7.1 CE, 7.1 FE, Title/Caption Beatriz Caraballo All CSS tricks, Fonts, Gradient, 7.0, 7.1, 7.1 CE, 7.1 FE, Title/Caption Beatriz Caraballo

Add a gradient in Squarespace to only one word in your heading (7.0, 7.1 CE & 7.1 FE)

Let’s give a gradient to a single word in your heading! The method is pretty simple, however we have to tackle some compatibility issues to make sure the word is readable in as many browsers as possible. So, why don’t we get started?

Read More

Creating vertical text in Squarespace (7.0, 7.1 CE & 7.1 FE)

Oh I know you wanna jump in the vertical text wagon. In fact, you probably already did! Right now you may be using images to contain your vertical text because let’s face it… it’s way easier than figuring out how to it with code.

Read More
All CSS tricks, Fonts, Highlight, 7.0, 7.1, 7.1 CE, 7.1 FE, Title/Caption Beatriz Caraballo All CSS tricks, Fonts, Highlight, 7.0, 7.1, 7.1 CE, 7.1 FE, Title/Caption Beatriz Caraballo

How to create a low highlight behind your text (7.0, 7.1 CE & 7.1 FE)

Wondering how to create that cool low highlight that you see behind headings and links all around the interwebs? Then keep reading 'cause I'm gonna show you how to nail it! We're going to be adding the highlight background to one word in a heading…

Read More

How to remove automatic hyphens in Squarespace (7.0 & 7.1)

When I talked about changing the size of mobile fonts in Squarespace at the very end of the post I gave you a quick tip on how to turn off automatic hyphenation. However, I wanted to do a separate post about it since there are some things you should…

Read More

Change the size of mobile fonts in Squarespace (7.0, 7.1 CE & 7.1 FE)

Not feeling happy with how Squarespace is resizing your fonts in mobile? Then let's do something about it shall we? In today's quick tutorial I'm going to show you how you can easily change the size of your fonts in mobile view. Let's go!

Read More
All CSS tricks, Fonts, Cool look, 7.0, 7.1 CE, Title/Caption Beatriz Caraballo All CSS tricks, Fonts, Cool look, 7.0, 7.1 CE, Title/Caption Beatriz Caraballo

How to overlap headings in Squarespace (7.0 & 7.1 CE)

I'm a big fan of overlapping text on purpose to create cool-looking headers, I feel this gives a more interesting look to a rather "standard" section of your website without overthinking it. So, if you love mixing fonts and want to add a unique touch to…

Read More
All CSS tricks, Customization tips, Fonts, 7.0, 7.1, 7.1 CE, 7.1 FE Beatriz Caraballo All CSS tricks, Customization tips, Fonts, 7.0, 7.1, 7.1 CE, 7.1 FE Beatriz Caraballo

Add another heading to Squarespace without using code blocks (7.0, 7.1 CE & 7.1 FE)

So, you want to be able to add a custom h4, h5 or h6 to your Squarespace site, or even better, be able to add a specific font WITHIN one of the default Squarespace headings without having to add a code block with HTML,  every single time?

Read More