Quote blocks

Highlight important or noteworthy content using unique, stylized text.

Last updated September 10, 2024

Use quote blocks to add styled quotes and testimonials to your site.

Watch a video

Add a quote block

To add a quote block:

  1. Open a page or post editor, click Add Block or an insert point, then click Quote. For more detailed steps, visit Adding content with blocks.
  2. Open the block editor by clicking the pencil icon on the block.
  3. Enter the quote in the first field.
  4. Enter its source in the second field.
  5. Click Design to add an animation or enable a background color (version 7.1 sites only).

Edit an existing quote block

To edit an existing quote block, double-click the block, or click the block once, then click the pencil icon or Edit. This opens the block editor. It's not possible to edit the quote directly on the page as you would a text block.

Style the quote

How you style the quote depends on your template and version.

Fonts

To style the quote block's fonts:

  1. While editing a page, open site styles, then click > next to Fonts.
  2. Click Assign Styles
  3. Scroll to the quote block section to style Text and Source.
  4. To return to site styles, click Back, then click Site Styles. Or, if you're done making changes, click Exit and then Save to close the editor.

Colors

To style the quote block's colors:

  1. While editing a page, open site styles, then click > next to Colors.
  2. Hover over your color theme and click the pencil icon.
  3. Scroll to the quote block section to change the Text and Source colors.
  4. Click Save to save your changes and keep editing, or click Exit and then Save to close the editor.

Other style options

To customize the appearance of the quote block:

  1. In the quote block editor, click Design.
  2. Beside Stroke, enable a solid or dotted line outlining the block. For both solid and dotted lines, set the stroke Color and Thickness
  3. Click the Blend Mode dropdown menu to choose a transparency setting. These effects are ideal if you're overlaying a quote block in front of an image or other visual content.
  4. To blur either the Element or Backdrop, switch the toggle on beside Blur and use the slider to adjust the level of blurriness.

Accessing this feature

Stroke, Blend Mode, and Blur customizations are available for Fluid Engine sections. For sections using the classic editor, only Stroke is available.

Most templates have style options for quote blocks. For templates without style options, the quote block text uses the same style as your body text. See our tips below for other ways to make quotes stand out.

To change the way your quote block looks, use the tweaks below for these template families:

Template family Tweak name

Adirondack

Quote Block

Avenue

n/a

Aviator family

Quote Font, Quote Text 

Bedford

Quote Font, Quote Color 

Brine

Quote Block section (Alignment, Quote Font, Source Font)

Farro

Quote Block section (Alignment, Quote Font, Source Font)

Five

Blockquote

Flatiron

Quote Font, Quote Color, Inline Quote Size

Forte

Quote Block 

Galapagos

n/a

Ishimoto

Quote, Quote Size

Momentum

Quote Block

Montauk

n/a

Native

Quotes, Quotes Size

Pacific

Quote Font, Quote Color

Skye

Quote Block section (Alignment, Font, Font Min, Quote Color)

Supply

n/a

Tremont

Quote Font, Quote Font Min 
Wells Quote, Quote Size
Wexley Quote Font

York

Quote Font, Scale Quote, Quote Min, Quote Text Color, Quote Alignment, Show Quotation Marks, Quote Source Font, Quote Source Color

Animate the quote

Accessing this feature

Quote block animations aren't supported in Fluid Engine. Instead, quote blocks follow site-wide animation settings.

To animate a quote block:

  1. In the quote block editor, click Design.
  2. Select an effect from the dropdown menu. As you select an option, a preview appears on the page.

Choose from:

  • None - No animation even if there are site-wide animation settings
  • Site default - Text matches site-wide animation settings
  • Fade in - Text fades in
  • Slide up - Text slides up from below
  • Focus in - Text looks blurry, then comes into focus
  • Reveal - Text slides outward from the center

Here's an example of a quote block using the Focus in animation.

Quote_block_animations_appear_when_the_block_loads.gif

Other ways to add quotes

Here are some other options for adding quotes to your site and giving them unique formatting.

Format as quote text

To make a quote stand out within a text block, highlight the text and click the quote icon in the text block editor. This indents the quote. Depending on your template, a line may appear on the side and the text may be italicized.

Wrap the text

For a magazine-style quote that stands out on a page, wrap one text block around another. To learn more, visit Creating a pull quote by wrapping text.

pull-quote.png

pull-quote.png

Overlap quote blocks and image blocks

If you're using Fluid Engine, you can place a quote block over an image block to create an image background for the quote. Ensure you have the block background disabled so that the image block behind it isn't covered up.

In the classic editor, it's not possible to overlap blocks. Instead, add an image block with a text overlay, and style that text to look more like a pull quote. Visit Image blocks for examples of each of the different image block options. Here's an example with the poster image block:

image-block-as-quote.png

image-block-as-quote.png

Format as heading text

To give the text a prominent style, add the quote text to a text block, then format it as a heading. In the text block editor, highlight the text and use the formatting dropdown menu to select Heading 2 or Heading 3. Then use the heading 2 or heading 3 options in the site styles panel to change the appearance of the text.

Tip

Because search engines identify content in headings as keyword-rich areas for indexing, styling quotes as headings may interfere with your site's SEO. We only recommend this workaround if your template doesn't have quote block styles and your primary goal is to enhance a quote's design.

Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.