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!

Read More
All CSS tricks, 7.0, 7.1 CE, 7.1 FE, Cool look, 12 Days of Christmas Beatriz Caraballo All CSS tricks, 7.0, 7.1 CE, 7.1 FE, Cool look, 12 Days of Christmas Beatriz Caraballo

Creating collapsible form sections in Squarespace (7.0, 7.1 CE & 7.1 FE)

Today’s tutorial is a really useful one, especially if you have to deal with large-ish form blocks on a regular basis when building your client sites. We’ll be using a crafty little trick to HIDE parts of a form when the page loads, and then reveal those hidden fields on click, almost like an accordion block!

Read More

Changing the accordion block icon when a dropdown is open (7.0, 7.1 CE & 7.1 FE)

If you want to add a little fun customization to your client’s accordion block, then this tutorial is for you! We'll be looking at how to use two custom icons for the accordion block items in Squarespace: one when the dropdowns are open and a different one when they are closed. Spoiler alert: the customization is easier than you think!

Read More

Adding custom icons to the Accordion Block in Squarespace (7.0, 7.1 CE & 7.1 FE)

In today's tutorial, we'll be looking at how to change the arrow or plus sign inside the accordion block for a custom icon. We'll tackle how to use the same image for ALL accordion items, and how to use a DIFFERENT icon for each individual dropdown!

Read More

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

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, 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.1CE & 7.1FE)

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