Designer Pull Quotes Made Simple

I’m always looking for ways to enhance my blog articles easily. I may be lazy, but I also like small changes that have big impact.

Pull quotes are a fun and, more importantly, easy way to give a more professional or journalistic look to your posts or pages.  I’ve read several blogs recently which gave tips and suggestions on how to use them in your posts.

[pullquote]Pull quotes are used to pull a text passage out of the reader’s flow and give it a more dominant position in the post or the article.[/pullquote]What are pull quotes? The short definition of Pull quotes is that they are simply short excerpts from the text you are presenting. They are used to pull a text passage out of the reader’s flow and give it a more dominant position in the post or the article. I take that to mean any important key phrase or special point you want your reader to take away from the article.

I have put together a couple of screencasts showing you the basics and how to make them useful to your blog. I’ve also included a few image files to get you started.

Why Would I Want To Use Them?

Sometimes things are easier to understand if you can see them in action. If you want plenty of visual examples you can read more about pull quotes on Smashing Magazine’s site.

Another benefit of pull quotes is that since many people (me at least) skim-read content on the web, you can give them a few summarized highlights of your article and if they read at least that, you are lucky.  So it can enhance your readability without requiring you to change your approach to presenting your content. It can also give a reader an idea if they want to devote the time to reading the article. Either way seems like a win.

You don’t need to know the definition of pull quotes to recognize them, you see them all the time in newspapers and magazines.  On the web their use seems to be less common, but they appear to be gaining in popularity.

Easy Install With A Plugin

Fortunately for us, they are quite easy to implement thanks to yet another WordPress plugin.  The plugin I’m using here is called Simple Pull Quotes and the plugin is just that. You can get this plugin either from the WordPress repository or from the author’s site.

Three things to keep in mind when using pull quotes is that they shouldn’t be used too often, they shouldn’t be too large and they shouldn’t be included for the wrong purposes. In most cases an ordinary article should have at most 1-2 pull quotes, otherwise they lose their appeal and the article becomes harder to scan.

However if you’re trying to emphasize a key point, or a key word, then this is an easy way to do it without seeming too spammy.  So they can only help your on-page SEO.

In this first video below I go over some of the basics of using the plugin.

[youtube]http://www.youtube.com/watch?v=ezARJn-kfzc[/youtube]

How To Easily Make Them Unique

In the second video I demonstrate a few ways you can quickly and easily style your pull quotes to look different than the standard out-of-the-box installation.  This will help give your quotes a unique look that blends in with your website theme.

[youtube]http://www.youtube.com/watch?v=kaQIWssYkQk[/youtube]

Some Examples

Here are some cut & paste examples of CSS styling I added in the second video. Just drop this into the plugin’s CSS file, upload the images and off you go.

Darker gray quote:

Dark Gray Pull Quote

width:200px;
float:right;
border-top:3px #868686 solid;
background: #fff top left no-repeat url("../images/gray-quotes.png");
text-indent:10px;
padding:15px 6px 10px 10px;
margin:10px 0 10px 10px;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;

Orange background blue text:

Orange Blue Pull Quote

width:200px;
float:right;
background: #ffbd54 url("../images/orange-quote.jpg") no-repeat 5px 5px;
color: #3140f3;
padding: 5px 10px 5px 35px;
margin:10px 0 10px 10px;

Red quote & border no shadow:

Red Pull Quotes

Oh my, oh my!

width:200px;
float:right;
border:1px solid #f00;
background: #FFDFDF top left no-repeat url("../images/red-quote.png");
text-indent:30px;
padding:10px;
margin:10px 0 10px 10px;

Centered text top borders:

Centered Pull Quote
width:200px;
float:right;
border-top:1px solid #333;
border-bottom: 1px solid #333
background: #fff;
text-align:center;
padding: 5px;
margin:10px 0 10px 10px;
font-family: serif;
font-size: larger;

Put them to work

[pullquote]If you have used pull quotes on your blog and have anything to add, please feel free to leave a comment.[/pullquote]

As demonstrated, you can easily add impact to your next blog post with a pull quote (or two) and provide your readers with an easy way to get the meaning from your text, hopefully giving them more incentive to read the full article.

Here are the image files used above which you can try out, plus a couple of bonus images thrown in for good measure. (Click icon to download.)
mac_zip_icon

[Image Attribution: CC License]

Get The Next Article Sent to Your Inbox

Don’t miss the fun! Join the other awesome folks who subscribe to improve their website and content. No lame spam will be sent!

* indicates required

2 comments… add one

  • Hi Jim – and thanks for the hint, did not know the plugin before.

    One question, maybe you have found a way to do this:
    is it possible to use left and right pullquotes with this plugin?
    Thesis “vanilla pullquotes” support blockquotes class right and class left, is something like that possible with the plugin as well?

    Cheers
    Martin AKA TheShamanMarketer

    • Jim September 7, 10:11 am

      Good question, one I’ve thought about.

      As far as I know there is no built-in way to allow left aligned quotes. This is definitely a limitation, but you could easily work around this

      The other solution is to built it yourself. If you follow Chris Pearson’s guide, he outlines an easy way to give you right or left aligned quotes, but it will require embedding HTML in your posts or pages which you may or may not want to do.

      Also, if you wanted either right or left alignment on a single page (not both) you could give the post/page a special CSS class to override the float. Playing around with the plugin’s CSS file is an easy way to make simple changes like this, or you can do it via the custom.css.

      For now it’s manual, but I might contact the plugin author and see if they could add a simple way to allow specify alignment.

      I hope this helps! Let me know if you come up with a better solution.

Leave a Comment