Using Pullquotes to Emphasize an Idea

by Alex on October 28, 2009

Lists, images, bold, italics are all ways we know to make our ideas stand out in posts. But, a greater method to really make a single idea (or just an intelligent sounding sentence) stand out from the rest of your text is by using something called a pullquote

Surprisingly I do not see many bloggers use the pullquote feature on their blog, but I do see it a lot on news sites. Basically, what a pullquote is a line of text taken out of a paragraph and placed aside so it is more visible. If you want an example of what one looks like in action, look below.

This is an example of a pullquote aligned to the right.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

How to setup a pullquote

Setting up a pullquote requires a little bit of CSS and one HTML tag to wrap text around in your post editor.

  1. Add CSS
  2. Just add a little CSS code to your style sheet. Edit as you need:

    blockquote.pull {
         float: right;   /* can be easily floated to left or right */
         margin: 0 0 0.5em 0.5em;  /* margin added to the RIGHT and BOTTOM so the text doesn't smash together */
         width: 45%;
    }
    
  3. The HTML to use in your post
  4. When you want to activate the pullquote in a post just wrap your text in this code: <blockquote class="pull">Text Here</blockquote>

    Pullquotes really add a nice unique touch to the formatting of your posts.

    The Thesis theme for WordPress has many great styles built in to enhance the structure of your content area. Pullquotes are built right in as well.

{ 1 comment… read it below or add one }

1 Bible Money Matters November 10, 2009 at 11:33 am

Love this idea – implementing it now!

Thanks!
.-= Bible Money Matters“s last blog ..2 Compelling Reasons To Buy The Most Expensive House In Your Neighborhood =-.

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Previous post:

Next post:

subs