Rotating Content Blocks in Squarespace with CSS
This tutorial was recorded in Squarespace 7.1 but also applies to legacy sites built on version 7. For more information, visit insidethesquare.co/themes
If you're a Squarespace user, chances are you know the power of customizing your site to make it look just how you want it.
But did you know that you can also rotate content blocks on your Squarespace page using CSS?
That's right—with just a little bit of code, you can give your page a new dynamic look!
In this Squarespace tutorial, you’ll learn how to use some simple CSS to rotate literally anything on your Squarespace website!
We’ll rotate an image based on its block ID, and then a specific type of text using its selector.
Here is a step-by-step tutorial video to walk you through the process while the codes needed are listed below:
Here’s how to get started:
To start, we'll be using the transform property.
The transform:rotate() property allows us to rotate our block by any number of degrees, positive or negative.
This is what that property looks like when you want to rotate something 45 degrees clockwise:
transform:rotate(45)
Next, we’ll begin rotating our content block with CSS but we first need to find its selector or its unique block ID.
→ To grab my list of selectors for Squarespace, click here.
→ Not sure how to get a block id? Here is a link to the free Chrome extension that I use to easily get block ID information. I’m not affiliated with this extension or who made it, just a fan!
Once we have that information, all we need to do is add the following line of code into our Custom CSS Editor (under Design > Custom CSS):
#block-123456 {transform: rotate(90deg)}
This will rotate our content block 90 degrees clockwise, and that's all there is to it!
With just one simple line of code, we can quickly create a custom design element for our Squarespace site.
So go ahead and give it a try, and most importantly, have fun with your Squarespace website.
