A Guide to Squarespace Quote Blocks

Last Edited Time

Jun 25, 2025 09:35 PM

Do not index

Suggested Tag

Squarespace

quote blocks

testimonials

Tags Synced

AI summary

Use Squarespace quote blocks to showcase testimonials effectively by styling them properly, avoiding common mistakes, and ensuring consistency across devices. Utilize the Fluid Engine for advanced features like layering over images and site-wide animations.

Last edited by

Platform

Squarespace

How to Use Squarespace Quote Blocks Properly

Quote blocks in Squarespace are brilliant for showcasing testimonials, client feedback, or memorable quotes. They're also one of the most misunderstood blocks on the platform. Here's how to use them properly and avoid the common mistakes I see every week.

Adding Quote Blocks to Your Site

Open your page editor and click an insert point (the plus icons between sections). Select Quote from the block menu.

You'll get two fields:

Quote text - the main quote

Source - who said it (optional)

Don't just dump a quote in and leave it. The real power comes from styling it properly.

Quick Edit Tip

Unlike text blocks, you can't edit quotes directly on the page. You need to click the block once, then hit the pencil icon to open the editor. Or double-click the block to go straight into edit mode.

Styling Quote Blocks

This is where most people go wrong. The styling options depend on which part of Squarespace you're using.

Fonts and Colours

Go to Site Styles (the paintbrush icon in your page editor). Look for sections called Fonts or Colours. Here you can change:

Quote text font and size

Source text styling

Text colours

Background colours

The exact options depend on your template, so don't panic if yours looks different from someone else's.

Fluid Engine vs Classic Editor

Fluid Engine sections (the newer, flexible layout system) give you more options:

Stroke borders (solid or dotted lines around the block)

Transparency settings

Blur effects

Better spacing controls

Classic editor areas (like Blog posts and Events) only offer basic stroke settings. You're limited to what the template provides.

Template-Specific Options

Some templates have special quote block tweaks. For example:

Adirondack has a dedicated "Quote Block" styling section

Aviator uses "Quote Font" and "Quote Text" controls

Check your Site Styles to see what your template offers.

Advanced Techniques

Layering with Images

In Fluid Engine, you can layer quote blocks over image blocks. This creates those Instagram-style quote graphics you see everywhere.

Here's how:

Add an image block

Add a quote block in the same section

Drag the quote block over the image

In the quote block settings, make sure the background is transparent

This won't work in classic editor areas. The blocks will just stack vertically.

Animations

Fluid Engine doesn't support animations inside quote blocks themselves. But you can use site-wide animation settings to make quotes fade in or slide up as people scroll.

Go to Site Styles > Animation to set this up. It affects all blocks, not just quotes.

Common Mistakes to Avoid

Don't use quote blocks for regular text. I see this constantly. Quote blocks are for actual quotes or testimonials, not just text you want to style differently.

Keep your styling consistent. If you're using quotes throughout your site, make sure they all look similar. Pick one font combination and stick with it.

Test on mobile. Quote blocks can look great on desktop but become unreadable on phones if the text is too small or the contrast is poor.

Quick Answers

Can I change fonts and colours in quote blocks? Yes, through Site Styles. The exact options depend on your template.

Do animations work in quote blocks? Not directly in Fluid Engine. Use site-wide animation settings instead.

Can I put quote blocks over images? Yes, but only in Fluid Engine sections. Classic editor areas don't support this.

Key Terms

Quote Block - Squarespace's formatted block for displaying quotes and testimonials

Fluid Engine - Squarespace's newer, flexible layout system (used in most page sections)

Site Styles - The design panel where you control fonts, colours, and spacing across your site

The Bottom Line

Quote blocks work best when you keep them simple and consistent. Don't overthink the styling, and always check how they look on different devices. Used properly, they can add real personality to your site without looking like you're trying too hard.