How to Add Images to Blog Posts in Squarespace

If you're new to Squarespace and trying to add images to your blog posts, you might be wondering why it works differently than the rest of your website. Unlike regular pages, which use Fluid Engine, blog posts in Squarespace use the Classic Editor.

This means you can’t just drag and drop images as easily, but don’t worry—adding images to blog posts is simple once you know how. In this tutorial, I’ll walk you through how to add and format images in Squarespace blog posts, including how to stack images beside each other or align them with text.

Watch the video

Check out the YouTube video below. 👇🏼

Why is the Classic Editor Different?

Unlike the Fluid Engine used on most pages, the Classic Editor is used for blog posts because blogs tend to be text-heavy. Squarespace hasn't yet optimized Fluid Engine for long-form content, so the process for adding images works differently inside blog posts.

But with a few simple steps, you can still make beautiful, well-structured blog layouts with images!

Step 1: Enter Edit Mode in a Blog Post

  1. Go to Pages and navigate to your blog.

  2. Click on any blog post to open it.

  3. Click Edit to enter the Classic Editor.

Now you’re ready to start adding images!

Step 2: Add an Image Below a Paragraph

  1. Hover between text blocks and click the Plus (+) Button.

  2. Select Image from the available block options.

  3. Click the Plus (+) Button inside the image block to upload an image.

  4. Choose an image from your computer, the Squarespace Library, or stock images.

Once added, the image will automatically take up the full width of the text area.

Step 3: Adjust Image Placement & Size

By default, images span the entire width of the text area. If you want to resize an image, you’ll need to stack it beside text or another image.

How to Stack Images Side-by-Side

  1. Add another Image Block below the first image.

  2. Click and drag the second image beside the first image.

  3. The images will now be stacked next to each other, resizing to fit.

How to Stack an Image Beside Text

  1. Click and drag the image block next to a paragraph of text.

  2. The image will snap into place beside the text.

  3. Adjust the placement by dragging it higher or lower.

💡 Pro Tip: If you can’t get the image to align correctly, try dragging it slightly left or right until it snaps into place.

Step 4: Remove Image Captions (Optional)

By default, Squarespace adds a caption area below images. If you don’t need this:

  1. Click on the image.

  2. Click the Pencil Icon (Settings).

  3. Toggle "Caption" to Off.

This will remove the caption space, giving you a cleaner layout.

Final Thoughts

Adding images to blog posts in Squarespace works a little differently than adding images to regular pages, but once you get used to the Classic Editor workflow, it’s easy to create visually appealing blog layouts.

Use the Plus (+) Button to insert images.
Stack images beside each other for better layouts.
Align images next to text for a professional look.
Turn off captions if you don’t need them.

If you found this tutorial helpful, be sure to subscribe to my newsletter below for more Squarespace tips. And if you’d like a professionally designed Squarespace website, feel free to reach out!

 

📨 Join my mailing list to get Squarespace tips & tricks right in your inbox

 
Squarespace Web Designer - Bryan Jernigan

Your Designer

I'm Bryan, a Squarespace web designer and founder of Abound Web Design. I have worked with all types of businesses and organizations from preschools to publishing companies to chiropractic clinics and everything in between. If you want to discuss a potential project, you can email me at bryan@aboundwebdesign or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

Bryan Jernigan

Freelance web designer for Abound Web Design LLC

https://www.aboundwebdesign.com
Previous
Previous

Squarespace's New Pricing Plans – What You Need to Know

Next
Next

How to Use Follow-Up Questions in Squarespace Forms