Feb 4, 2014 / Advanced

Quick Tip: The Art of the Pull Quote

In today’s quick tip, we’re going to talk about a device that can help you emphasize key points and add visual interest and variety to your blog posts and editorial calendar. Say hello to the pull quote.

What’s a pull quote?

A pull quote is a visually distinct excerpt that helps break up the layout of a blog post. (See what we did there?)

A pull quote is a visually distinct excerpt that helps break up the layout of a blog post. Its styling emphasizes the words contained within it. Here’s a sample pull quote from our blogger profile on Christy of Running on Sober. This Leonard Cohen quote resonated with Christy and amplifies one of the key messages of the profile, that we must celebrate ourselves for who we are and forget trying to be perfect.

I like to use the Text Editor when I write posts. To create this pull quote, I surrounded the text I wanted to emphasize with the blockquote element, like so:

<blockquote>This text will appear in a blockquote.</blockquote>

This is how the blockquoted text looks on the right, in the image below. It’s important to note that blockquote styles are different in each theme. Your blockquote may not look exactly like the one below.

cohenquote

If you’re using the Visual Editor, no sweat. Highlight the words you’d like to blockquote and then click on the quote icon:

visualeditor

Quote Post Format At Your Service

My notebook collects passages from books and articles that I’ve found particularly insightful or interesting. While I use the blockquote element extensively, the quote post format is another way to publish quotes quickly. Currently, 134 WordPress.com themes support post formats. The quote post format styles quotes distinctly, so that they stand out from regular posts. To use the quote post format, select Quote in the Format box while creating a post in your dashboard. Note also that the look of the quote post format varies from theme to theme.

quotepostformat

It’s your turn

In your next post, why not give the quote post format a whirl or blockquote a key passage that you want readers to remember. Have fun experimenting! Here are a few ideas on how you can put pull quotes to work on your blog. Be sure to share your ideas on using pull quotes in the comments.

  • Highlight quotations that emphasize or or offer insight into your topic.
  • Pull the most important idea out of your post to highlight it.
  • Use pull quotes to break up the layout of longer posts.
  • Use blockquotes to publish quotes that resonate with you as a way to add variety to your editorial calendar.
Show Comments

60 Comments

Comments are closed.

Close Comments

Comments

    1. Hi there, @The Novice Gardener — you’d need a Custom Design upgrade to change the default size of the type that appears in blockquotes.

      Instead of spending any hard-earned cash though, what you can do is create a new blog to use for testing. You can pop a few posts into it, add some blockquotes and then switch themes to see how blockquotes look in different themes. That way, you can play around and test themes and make a switch on your primary site when you’ve found a theme you like better. I have a test blog here, (http://gusstevens.wordpress.com) that I use all the time to test things out before making changes on my other sites.

      Like

    1. I used pull quotes on my last post, but Now after reading this I, I am not sure if I used the best quotes from my piece to pull from.
      http://watersaltsky.com/?p=150

      Also, I couldn’t get the block quote to work properly. It would start a quote but then wouldn’t end it. I finally ended up using a plug-in, but it seems like I shouldn’t have needed one?

      Like

      1. Hi @Watersalt — you’ve got a self-hosted WordPress.org site. My sense is that your theme should support blockquote by default. For any specific questions, you’ll want to search the WordPress.org forums and post a question if you don’t see an answer to your concern: http://wordpress.org/support/

        Like

  9. This is so cool and I’m excited to try it out. Is it possible to get it to be right or left aligned or is that just dependent on the type of theme I have? In visual editor I “hit” the quote button and it worked. I then went back to try to get it to right align. The words inside were right aligned, but I could not get the “box” to appear on the right as in your example above.

    Like

    1. Hi @Susan, you’d need to add some custom CSS to your stylesheet to be able to right or left-align blockquotes. This would require a Custom Design upgrade.

      The blockquote in our post above aligns right thanks to some custom CSS designer @shaunandrews put into place for us.

      Like

    2. Hi Susan, I was curious about that too, so I’m glad you asked. I see Krista answered (thanks!)

      I’ll share a comment from Ben Huberman from the editorial calendar post Krista linked to above, to illustrate that blockquotes can be used in comments as well:

      Blockquotes are available in all themes in the visual editor, you just need to highlight the desired text and click the quotation mark icon.
      The breakout quote effect in this post (the text box you mention) is specific to this blog’s theme.

      Thanks for the tip (and the mention), Krista, helpful info! -christy

      Like

    1. I respectfully disagree, M.R.! I’ve read your work and by no means might you be confused with unintelligent. Glad the post was of help to you.

      Like

      2. @Generation Frugal — unfortunately, it’s not possible to change the code into an image automatically, though you can use the blockquote element in a text widget. To get some help, I recommend posting on the WordPress.com Forums. The forums are tended by super knowledgeable volunteers and WordPress.com staff who can help you to achieve the effect you’re aiming for.

        Like

    1. Hi @Marie — I see the blockquote in your post. Note that blockquotes don’t have the ability to align right or left of text in your post. You’d need to get a Custom Design upgrade to be able to write specific CSS to create this effect.

      Like

  24. Is it just me or is the block quote and pull quote two different things? I use block quotes frequently and the tag noted does not create a pull quote. I have used three different themes and none would create a pull quote by using the blockquote tag.

    Like

    1. A blockquote element can be used to create a pull quote effect. (You’re right when you say that essentially, they’re two different things.) A pull quote breaks up the flow of text, adding emphasis to the words you select to place inside them. The blockquote element is a default style that everyone can use to achieve this effect.

      Like

    1. Nicely done! I like how you’ve used the song lyrics to emphasize what struck a chord with you about the concert Billy Joel’s powers of observation.

      Like

  26. I’ve explored most of the themes that I’ve used and yes it varies how quote post format and blockquotes look like. I also learned to make adjustments, especially with the font size of the blockquotes. Here’s a tip. In visual editor, higlight your quote, click Blockquote icon and go to the format, from paragraph, address, preformatted to headings in different sizes, see the changes how your blockquote will look like and click how big you want the text, well this applies to the headings format only as for my Suits theme. Again, it varies from theme to theme so I agree that you should have a test blog or preview your post always. Happy blogging!

    Like