Squarespace CSS tricks
The Blog
Explore the Squarespace tutorials and tips available on the site to tackle that customization or fix you’re after!
And if you can’t find what you’re looking for:
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!
Add multi-line descriptions to any Gallery Section in 7.1
In today’s post, I want to show you a super easy workaround to display a title AND a short description in your 7.1 Gallery Section captions! This little trick works for all of the different Gallery Section layouts, but we’ll be breaking down the logic behind the tweak for the Slideshow: Reel layout.
Adding an image behind a heading in Squarespace
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!
Adding an overlapping tilted text to an image
You’ve probably seen inspirational websites on Pinterest *cough* Showit sites *cough* that include images with overlapping titles or phrases, that look slightly tilted. In Squarespace, you can absolutely achieve that look by simply adding the text to the image itself, but let’s see if we can achieve it without relying on Photoshop…
Adding an extra title and overlapping the button of an overlap image block
If you’re into overlapping stuff in your client sites, I know you’re going to really enjoy today’s fun tutorial. It’s all about taking the overlap image block design one step further, with very little code, to create a look I’m 90% sure you’ve seen before while perusing Pinterest: an image with an overlapping title, a secondary title, text and an overlapping button.
Add a gradient in Squarespace to only one word in your heading
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?
Creating vertical text in Squarespace
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.
How to create a low highlight behind your text
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…
How to overlap headings in Squarespace
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…