.png?table=block&id=218105a2-9d95-81fd-9361-d180e015b96f&cache=v2)
Last Edited Time
Jun 25, 2025 09:35 PM
Do not index
Do not index
Suggested Tag
Image Blocks
Squarespace Image Customization
Squarespace Tips
Tags Synced
Tags Synced
AI summary
Learn to add, edit, and style image blocks in Squarespace using Fluid Engine and Classic Editor. Explore various layouts, resizing techniques, animations, and the importance of alt text for accessibility and SEO. Experiment with different options to enhance your site's visual appeal.
Last edited by
Platform
Category
Topic
How to Use Squarespace Image Blocks (Complete Guide)
Learn how to add, edit, and style image blocks in Squarespace. Make your site look professional with the right techniques.
TL;DR: Key Points
- Add and edit images using the Image block in both Fluid Engine and Classic Editor
- Choose from different layouts like Poster, Card, and Stack to match your content
- Resize images by dragging corners in Fluid Engine or using spacer blocks in Classic Editor
- Add animations and effects to make your images more engaging
- Use alt text to improve accessibility and SEO
Adding and Editing Images
To add an image to your Squarespace site, edit any page or post and click the '+' button to add a block. Select 'Image' from the menu.
You can upload images from:
- Your computer or mobile device
- Your existing image library
- Squarespace's stock photo collection (Getty Images)
Once uploaded, click on the image to access editing options like cropping, filters, and design settings.
Layout Options for Image Blocks
Squarespace gives you several layout choices for image blocks:
Inline - Places the image within your content flow
Poster - Creates a full-width banner style
Card - Adds a subtle border and shadow
Overlap - Lets text overlap the image
Collage - Combines multiple images
Stack - Arranges images vertically
Each layout works differently with text, so try a few to see what fits your content best.
Resizing and Shaping Images
In Fluid Engine (7.1 sites): Click and drag the corners or sides of your image block. It's that simple.
In Classic Editor (7.0 sites): Use spacer blocks above and below your image to control its size and positioning. You can also adjust the image block's width settings.
Important note: Spacer blocks still exist in Squarespace 7.1, but only in Blog and Events sections (which use the older 7.0 engine). For regular pages in 7.1, you won't need them.
Adding Effects and Animation
Both editors let you add visual effects to images:
Fluid Engine: Go to Site Styles > Animations to enable site-wide animations, or use the Design tab for individual image effects.
Classic Editor: Use the Design tab within each image block to add animations and hover effects.
Popular effects include:
- Fade in on scroll
- Slide in from sides
- Scale on hover
- Blur to sharp transition
FAQs
How do I resize images in Fluid Engine?
Click and drag from the corners or sides of the image block. Use the 'Fill' option in the Design tab if you need to crop the image to fit specific dimensions.
Can I add text directly on image blocks?
Yes. In Classic Editor, use the built-in caption options. In Fluid Engine, overlay a text block on top of your image block for more control.
Can I add animations to images?
Yes. Enable animations in Site Styles (Fluid Engine) or use the animation options in the Design tab of each image block (Classic Editor).
Jargon Buster
Fluid Engine - Squarespace's modern drag-and-drop editor (used in 7.1 templates)
Classic Editor - The original Squarespace editor (used in 7.0 templates and some 7.1 sections)
Spacer Blocks - Empty blocks used to create space between elements (mainly in 7.0 sites)
Alt Text - Descriptive text that explains what's in your image (important for accessibility and SEO)
Final Thoughts
Getting the most from Squarespace image blocks isn't complicated, but knowing which tools to use makes a big difference. Whether you're working with the flexible Fluid Engine or the more structured Classic Editor, the key is experimenting with different layouts and effects until you find what works for your content.
Don't forget to add alt text to your images - it helps people using screen readers understand your content and gives search engines context about your images. Both are good for your site's performance.