Howto: Using Pullquotes

Pullquotes are those floating quotations that print magazine loves to use to highlight intresting or controversial (or both!) things in an article.

floating quotations that print magazine loves

They are pretty popular online too, so Notes Blog Core has built-in support for them.

There are two ways you can use the pullquotes. Either you use the pull shortcode, or you hand-code the HTML into your post. Both will get the same effect, so it is really a matter of taste.

The shortcode model

Let’s start with the easy way, being the pull shortcode. This is how you use it to float a quote to the right:

[pull float="alignright"]Here is my magnificent quote[/pull]

The float attribute is necessary so that the pullquote will know if it should go to the left or right. It takes either the alignleft class, or the alignright one. Never both.

This is what it would look like, floating to the left:

[pull float="alignleft"]Here is my magnificent quote[/pull]

See there, just changing float="alignright" to float="alignleft" changes the position. Also, remember that you need to close the pull shortcode! That’s important.

The HTML way

If you like, you can get the exact same effect with HTML. This is how you use it to float the pullquote to the right:

[html]
<blockquote class="pullquote alignright">Here is my magnificent quote</blockquote>
[/html]

So it is really a blockquote with the pullquote class, and then either alignleft or alignright for the positioning. Here’s the same but floating to the left:

[html]
<blockquote class="pullquote alignleft">Here is my magnificent quote</blockquote>
[/html]

Simple enough, right? Now put those pullquotes to good use to add some visual appeal to your excellent posts!