How to rotate an image title in Squarespace 7.1

Adding stylish, eye-catching effects to your Squarespace website is a great way to enhance its visual appeal—and rotating your image title or caption is one of those simple customizations that can make a big impact.

In this tutorial, we'll show you how to rotate the title or caption of an image in Squarespace 7.1 using custom CSS. This effect works great for modern, minimalistic designs and can help give your website a unique and polished look. Note this will only work in Squarespace 7.1 and NOT Squarespace 7.1 Fluid Engine.

Table of Contents

• Why Rotate an Image Title

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

Why Rotate an Image Title?

Rotating an image title can:

• Add visual interest and break up uniform layouts

• Help emphasize important text or labels

• Support creative or editorial-style designs

• Give your site a more custom, designer feel

Complexity: Easy

---

Step-by-Step Instructions

Step 1: To rotate the image title on Squarespace 7.1, from the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the code below.

.image-title {
  transform:rotate(10deg)
}

Here we use the transform property and then specify the degrees the text is to be rotated. Here we specified 10deg. You may want to use 20deg or -10deg (which will render the image anti clock wise).

A useful tool you can use to identify the #collection-id, #block-id and section[data-section-id="xxxxxxx"] is a Chrome Extension called Squarespace ID Finder.

Lavender Fields

Somewhere in the UK

Lavender Fields

Somewhere in the UK

Lavender Fields

Somewhere in the UK.

Lavender Fields

Somewhere in the UK

---

Step 2: To apply to all the images on a page

#collection-id .image-title {

transform:rotate(10deg)

}

To apply to all the images in a section

#collection-id {

#page .page-section:nth-of-type(1) {

.image-title {

transform:rotate(10deg) } }

}

Step 3: To apply to an individual image

#block-id .image-title {

transform:rotate(10deg)

}

If you wish to apply this to a specific image type then use the code below.

image card -> .design-layout-card.image-title {transform:rotate(10deg)}
image poster -> .design-layout-poster.image-title {transform:rotate(10deg)}
image overlap -> .design-layout-overlap.image-title {transform:rotate(10deg)}
image collage -> .design-layout-collage.image-title {transform:rotate(10deg)}

Key Takeaways

• Rotating an image title in Squarespace requires custom CSS.

• Use .image-title or specific block IDs to target captions.

• Rotation adds a modern and creative flair to your images.

• Make sure the caption display is enabled in the image block settings.

FAQs

Can I rotate the title for gallery images too?
This tutorial applies to Image Blocks. For Galleries, different class names are used, and you'll need to inspect the element or ask for a tailored snippet.

Will the rotation work on mobile?
Yes, but you may need to add responsive media queries if it looks off. You can hide or adjust the rotation for smaller screens like this:

@media (max-width: 600px) { .image-title { transform: rotate(0deg); } }

What if I want to rotate the image itself?
You can use .sqs-block-image img as a selector instead of .image-caption.

---

---

Conclusion

Rotating image titles on Squarespace 7.1 is a great way to add stylish, editorial touches to your website. With just a few lines of CSS, you can create a more dynamic layout that draws the viewer’s eye.

---

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

---

All work in this guide is provided ‘as-is’. Other than as provided this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, you can book our consultation services.