Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Quote Blocks

Use Quote Blocks to add styled quotes and testimonials to your site.

Add a Quote Block

To add a Quote Block:

  1. Open a page or post editor, then click an Insert Point or the +. (For more detailed steps, visit Adding blocks.)
  2. Select Quote from the menu.
  3. In the block editor, enter the quote in the first box.
  4. Enter its source in the second box.
  5. Click Animations to add an animation.
  6. Click Apply to publish your changes.
  1. Tap the Pages icon.
  2. Tap the title of the page you want to edit.
  3. Tap Edit or the pencil icon in the top-right corner.
  4. Tap the + icon in the top-right corner to open the block menu.
  5. Tap Quote to add a Quote Block.
  6. Enter the quote under Quote.
  7. Enter the source under Source.
  8. Tap Done or  to save your changes.

It's not currently possible to add animations to Quote Blocks in the app. Use a computer to add animations instead.

Add animation

Add visual effects to your Quote Blocks with animations. Visitors see the animation when they load or refresh the page.

To add an animation:

  1. Click Edit on the Quote Block, then click the Animations tab.
  2. Select an effect from the Animate Quote Block drop-down menu. As you explore options, you'll see previews of how they load.

Choose from:

  • Fade In - Text fades in
  • Focus In - Text looks blurry, then comes into focus
  • Slide Up - Text slides up from below
  • Reveal - Text slides outward from the center

Style the quote

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

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.

quote-text.png

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

Add text to an Image Block

To create a quote with a background image, add an Image Block with a text overlay, and style that text. Visit Using 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

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 drop-down 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.
Was this article helpful?
68 out of 176 found this helpful