Use Quote Blocks to add styled quotes and testimonials to your site.
Add a Quote Block
To add a Quote Block:
- Open a page or post editor, then click an insert point. For more detailed steps, visit Adding content with blocks.
- Click Quote.
- In the block editor, enter the quote in the first field.
- Enter its source in the second field.
- Click Design to add an animation.
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.
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:
- Click the Design tab in the block editor.
- Select an effect from the drop-down menu. As you explore options, you'll see previews of how they load.
Choose from:
- 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
Style the quote
How you style the quote depends on your template and version.
Fonts
To style the Quote Block's fonts:
- While editing a page, open Site Styles, then click Fonts.
- Under Global Text Styles, click Assign Styles.
- Scroll to the Quote Block section to style Text and Source.
- To return to Site Styles, click Back, then click Site Styles, or hover over Done and click Save if you're done making style changes.
Colors
To style the Quote Block's colors:
- While editing a page, open Site Styles, then click Colors.
- Hover over your color theme and click the pencil icon.
- Scroll to the Quote Block section to change the Text and Source colors.
- Hover over Done and click Save.
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.
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.
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:
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.