How do I add a block quote in Webflow?

Add the quote element, not a decorated paragraph

A block quote is the element for a longer quotation that should stand apart from the paragraphs around it. Webflow describes it as a quotation from an outside source, such as a sentence from a book or an article. It is not a style you paint on a normal paragraph to make a tip look important.

Drag a Block quote from the Add panel onto the page, the same way you drag other elements. You can also place it in the Navigator.

Use it when the words are a quotation. Webflow's accessibility note says screen reader users can jump between block quotes. If you use the element as decoration, those jumps land on text that was never a quote. A callout that is your own sentence should be a paragraph or a heading. The heading guide is how to keep that heading honest.

Example: an about page needs one sentence from a published city guide, set apart under the intro. Drag a Block quote there. Do not drag a paragraph and add a border only to imitate a quote, if the sentence is a real quotation and you want it in the quote structure. Do not use a block quote for 'Free shipping this week' if that line is your own notice.

Type a real quotation

Double-click the block quote to edit it, or select it and press Enter. Paste the excerpt. Like other text elements, the words you type are the content. The element does not fetch the source for you.

Keep the quotation accurate. Paste the sentence you have the right to use, and do not invent a review, a client name, or a result. If you are quoting your own page's headline back to the visitor, it is usually a heading, not a quotation from an outside source.

Example: the quote reads 'The lobby faces the river, and the stairs are at the back of the hall.' That sentence is from the city guide you are allowed to quote. The paragraph under it is your own direction: 'We are the second door after those stairs.' The direction stays a paragraph. Only the guide's sentence sits in the block quote.

The block quote article does not describe a separate name field. If the name is part of the quotation, type it there. If it is your caption, put it in a paragraph under the element.

Change the border on this quote or on every quote

A block quote arrives with padding and a left border, so it is already distinct from a paragraph. You can change those styles or build on them. The border is the line on the left. The border guide is width, style, and color if you want a different line. Padding is the space inside the quote, between the words and that line.

Style one quote with a class when only this page should change. Select the element, open the Selector, and name the class. Set the border and the padding on that class. A second quote on another page does not pick up the class unless you apply it.

All Block quotes changes the default for every block quote on the site. Select any block quote, click the Selector field, choose All Block quotes from the HTML tag menu, and then set the styles. Use the tag when every quotation should share the same line and the same spacing. Use a class when one quote is the exception.

Example: the about page quote uses a class with a thin left border and a little extra padding. A second quote in the footer keeps the default, because it does not have that class, and you did not style All Block quotes. If the footer quote changed too, the tag was styled. Move the exception back onto the class.

Keep CMS quotes in rich text

A quotation inside a blog post or another Collection item belongs in that item's rich text, not in a Block quote element you only placed on a static page. Rich text can hold a block quote inside the field. The rich text guide is how that field is styled on the template.

Use the Block quote element when the quotation is part of a page you design directly: an about page, a landing page, or a section that is not a CMS item. Use the field when each post has its own excerpt and an editor will type it on the item.

Example: the about page has one city-guide sentence in a Block quote element. The journal posts quote interviews inside each item's rich text. You do not paste every interview into a Block quote on the template, because the next post would show the same words. The template's rich text element is connected to the field. The about page's Block quote is not.

If you need the same quotation on every blog post, that is a static element on the template, and a Block quote can sit there. It will repeat on every item. Do that only when the quotation is truly shared. A line that changes per story stays in the field.

Check the published page

Publish, then read the page. The quotation should be the sentence you pasted. The left border and the padding should match the class, or the tag if you styled every quote.

A real quotation stays in the block quote, and your own tips stay paragraphs or headings. If a notice is inside a block quote only to borrow the border, move the notice out and put the border on a class on a paragraph instead.

A quotation on a page you already have is ordinary content work. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Additional work is $75 per hour and starts only after you approve a written estimate.