Grabbing Attention with a Quote: Adding pull quotes to your blog

“This is a far better post than I have ever posted before”

While putting out my latest post, on blogging and community, I popped out a sentence that was important and, in my opinion, kind of funny. In magazines that sort of statement would be highlighted as one of those quotes that stands out in the overall text.   You don’t see it too much in blogging but you do now and then, and I thought I should figure out how to use it.

It’s Called a Pull Quote

So I googled, and found out that this sort of highlighted text is called a “pull quote.”  There is a good description in Wikipedia here. If you are like me, you have been seeing them your whole life but never really thought about how to use them and how impactful they can be.  But now that we are blogging, self-publishing your own content, this seems like a good tool to know more about.

The key purpose is to highlight a thought or point that pulls the reader into the text.  Now the name makes sense. It also is a quick way to add a break to a lot of text without having an image to stick in there. This is especially true if you jazz it up a bit.  Two birds with one stone.

Plug it In

So how do you add pull quotes? The easiest way is to find a plugin that adds them for you.  If you don’t know CSS and are on a platform that supports plugins, this is the way to go.  A quick search for WordPress plugins shows four options, two of which are well used.   Install and read the directions and boom, you have block quotes.

Or Div it Up

If you need more control or, like me, you are using a free blogging platform that does not support plugins, then you simply need to add a block with some CSS formatting.  Don’t worry, it’s not that hard.

“This is a fantastic pull quote, it will pull almost anyone into the text!”

Put the text you want pulled out on your blog. Then go to the HTML tab of your editor.  Put

in front of your text and

after. This tells HTML that the text within is to be treated as a block.  Next, we want to format it by specifying a width, some decorations, text alignment, and spacing.

The section on formatting in Better Blogging for your Business goes into more detail on how to do this. But for the purposes of this article we can keep it simple and use the following to start:

blogging-pulltext-html-code.PNG

Change my quote with your quote and you will have what you need.  If you know CSS, add and change as needed.  And if you are comfortable with setting such things up,  add the final style to your stylesheet and you can easily use it over and over again.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s