How to add and style block quotes

Block quotes in rich text fields let you add visual flair to text-based content, and offer you lots of design options. Here’s how to use them.

You can see block quotes in action on the Webflow Blog:

Note: Technically, block quotes should be used to cite long quotations from other texts, but you can use them to highlight your own content (these are properly called “pull quotes.”)

Step 1: Add a Rich Text Field to the page

A common way of adding a block quote is within a Rich Text Field, so before you do anything else, drag a Rich Text Field from the Add panel on the left on to your canvas.

Keep in mind that you can also add a block quote by dragging in the Block quote element itself (located in the Typography section).

Step 2: Add a Class (or don’t)

After adding the Rich Text Field, you have two options:

1. You can either add a block quote and create a style for it that will control every block quote on the site
2. Or you can add a class to your Rich Text Field, and style your block quote just for this context

Let’s walk through each option.

Option 1: Style all block quotes on your site

To get started, highlight some text in a rich text field and click the quotation mark icon to create a block quote.

Then, select the block quote and click the Select a Tag field in the Styles panel. Select All Blockquotes and style away. Just note you’re styling an element-based class, so any changes you make here will affect all block quotes across your site.

Option 2: Style block quotes for a particular Rich Text Field

Before adding a block quote, add a class to the rich text field that you want the block quote displayed in. In this example we’ll give it a class of blog-post.

With a class added to the rich text field, we can now select the snippet of text we wish to add a block quote to.

Simply highlight the text, and select the quotations icon.

Now, instead of styling all block quotes, we’ll choose to Nest selector inside of blog-post. This allows us to create a style that will only affect block quotes inside of a rich text field with the class name of blog-post.

Step 3: Add block quotes wherever you want

Now, whenever you add a block quote to a rich text field, it will take on the style you created!

And that’s it. Happy designing!

How to edit block quotes in dynamic context

You may notice that the steps above won’t work for block quotes inside rich text fields. Because you cannot select, highlight or click on a block quote that is within a dynamic rich text field, following the steps listed above will not work.

In order to style elements within a dynamic rich text field, you first need to do so outside of dynamic context. This means to drag in a rich text field that is yet to be connected to any dynamic content, and then proceed to make the necessary style changes by following the steps listed above.