Welcome to Thesis Theme Tools!

We're marking our one year anniversary with a complete redesign!
Come celebrate with us as we look forward to another great year of stimulating and useful articles -- and of course, our new skins!

Make Your Pullquotes More Attractive

by Mike Nichols

What’s a pullquote? You’ve seen it often in magazines and newspapers. It’s a few words set apart from the rest of the text that summarizes or comments on the paragraph. It’s usually in larger or distinct letters. The following paragraph has a pullquote:

Greeking is a printer’s term used since the 1500′s

Lorem ipsum dolor sit amet, con sectetuer adipiscing elit, sed diam nonnumy nibh euismod tempor incidunt ut labore et dolore magna ali quarn erat volupat. Ut wisi enim ad minim venian, quis nostrud exerci tation ullamcorper suscipit laboris nisl ut aliquip ex ea commodo consequat. Duis autem vel eum irure dolore in henderit in vulputate velit esse consequat.

The purpose of a pullquote (also known as a “lift-out quote” or “call-out”) is to lead readers into the post and to highlight a key topic. They also dress up your post and make it more visually appealing.

This article contains these sections:

  • A short piece of code that will make your pullquotes more attractive
  • How to put pullquotes into your post
  • Seven tips on how to use pullquotes effectively

Thesis has built-in pullquotes

Thesis has pullquotes built in, but they are plain and need dressing up a bit. Following is a simple bit of code that will make your pullquotes more distinctive, with a double bar above and below. The pullquote above shows you how it looks.

All you have to do is to put the following code into your custom.css file. You may change the properties if you wish, but I’ve found this combination to be attractive:

/* pullquotes with double bar above and below */
.custom blockquote.left, .custom blockquote.right {
   width: 200px;
   margin: 5px 15px 5px 0;
   padding: 5px 0;
   border: 3px double #AAAAAA;
   border-width: 3px 0;
   font-size: 1.4em;
   text-align: center;
}
.custom blockquote.left { float: left; }
.custom blockquote.right { float: right; }

How to use the pullquotes

When editing your post in WordPress’ editor:

1. Go over to the HTML editor by clicking on the HTML tab at the top of the editor screen.

2. Find the pullquote text.

3. If you want to have the pullquote on the right of the paragraph, wrap it in the the following code:

<blockquote class="right">PULLQUOTE-TEXT</blockquote>

4. If you want to have the pullquote on the left of the paragraph, wrap it in the the following code:

<blockquote class="left">PULLQUOTE-TEXT</blockquote>

That’s it!

Tips on using pullquotes

1. Don’t use too many pullquotes. They should call attention to the main idea in a section of text, not every paragraph. If you use too many, your page will look cluttered.

2. Alternate left and right pullquotes. This is not absolutely necessary, but looks nicer.

3. Choose the appropriate snippets for pullquotes. One role of pullquotes is to not only quote the text but to use text that pulls the reader into the text. Select dramatic, thought-provoking, or enticing excerpts to use as pullquotes.

4. Keep pullquotes brief and to the point. Make the pullquote a quick bite of information, a teaser. Don’t give away too much of the story in the pullquote. Include only single thought or theme in each pullquote.

5. Keep pullquotes short. Keep the length of pull-quotes to 2 or 3 lines. Make sure the paragraph you’re pullquoting is long enough so that the pullquote doesn’t hang over into the next paragraph.

6. Add the pullquote text after you have finished writing the post. Identify the sections in your posts, and use a pullquote to call attention to the section.

7. Write the pullquote right at the beginning of the paragraph, letting it run into the beginning of the paragraph text. It looks a mess, but the WordPress editor won’t place it right unless you do. It should look like this:

Greeking is a printer's term used since the 1500'sLorem ipsum dolor sit amet, con sectetuer...

I hope this article has been of use to you. Please feel free to write a comment, or to email me using the “Contact” tab at the top of the page.

Share and Enjoy:
  • StumbleUpon
  • Digg
  • del.icio.us
  • Technorati
  • Facebook
  • MySpace
  • FriendFeed
  • Sphinn
  • LinkedIn
  • Twitter
  • email
  • Print
  • PDF
Related Articles category Tags: , , ,
Related Articles
  • Visit My Other Site!