Adding pull quotes in Gutenberg

by Aug 9, 2018WordPress Tutorials - WP Tutorials, Gutenberg, WordPress 5.0

Pull Quotes are an important feature in many online publishing platforms.  In the new Gutenberg editor for WordPress, this is made really simple and intuitive. 

The look of the pull quote on the front of your site is still determined by your particular theme setup, but implementing it will be the same across most themes.

1. The first step is to open  Gutenberg Editor |  and click add new button

Step 1 image

2. Click Blocks and scroll down to pullquote blocks-  which are different than your regular  quote blocks because they give you the ability to add a caption

Step 2 image

3. Click Pullquote

Step 3 image

4. Type  in your text / Write quote… along with the caption at the bottom

Step 4 image

5. Next you can customize your text or add css to it as well as add hyperlinks

Step 5 image

6. Click Save

Step 6 image

7. That’s it. You’re done.

Step 7 image

Here’s an interactive tutorial

Step 1 Hover your mouse over the Add Block icon (the plus sign in the upper left hand corner within the Gutenberg editor).

Step 2 Select Blocks. Then scroll to Common Blocks. Under that section you will see Quote. Select Quote.
Hint: You can also type “Quote” in the search bar to quickly get to the button option.

gutenberg quote

Step 3 The quote edit window will appear. From here, you’ll be able to select how your quote will align with your other blocks. Enter the text for your quote, and style the text (bold, italicize, add a strike through). You also have an option to add css classes to the quote.

A pull quote created using the Gutenberg Block Editor

Copyright ByRivers Tech LLC/ WP-Tutoring.Com All Rights Reserved.

  • Get Expert WordPress Help Right Now!

  • Please enter your phone number so we can fully discuss your needs.
  • This field is for validation purposes and should be left unchanged.


Submit a Comment

Your email address will not be published. Required fields are marked *

Access Our WordPress Training Academy Videos

View our FREE WordPress 6.4 Course.  Learn about the exciting new features available in this release!