Tips & Tricks: Pull-Out Quotes

Here is the way you can do it!

In your blogging, have you ever wanted to highlight a short statement or quote and place it into a box on either the left or right of the page with the rest of your article wrapping nicely around it?

Here is how to do it.styles

  1. Start a new paragraph.
  2. Place your cursor somewhere in that paragraph (do not select any part of the paragraph).
  3. On the menu bar of the WordPress editor you will see a button that is called “Styles”.  It is a drop-down list of all the different formatting styles that are used on this site.  Only a few of the styles in that list are useful for formatting the text in your blog.  Select a style.  In the screen shot to the left you can see the list dropped down and the style “LeftOpaqueQuoteBox” selected.  That defines the style that you see in blue on the image.
  4. To remove a style, place your cursor in the paragraph and click on the word “Styles” at the top of the drop-down list.

Note that the editor will show what the styled paragraph will look like once it is published on the web.

Here is a list of the styles that you can use for formatting paragraphs as pull-out quotes. These are available for use both in Posts as well as in Pages.

  • LeftQuoteBox
  • RightQuoteBox
  • BlueOpaqueQuoteBox
  • LeftOpaqueQuoteBox
  • RightOpaqueQuoteBox
  • alert
  • alert_red
  • alert_blue

Please do not use any styles other than the ones listed here.  Other ones were not meant for formatting paragraphs and the results could range from funny to catastrophic.

Here are some of the styles available and a sample of each.

This is what an alert looks like!

This is a sample of the Right Opaque Quote Box

“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

This is a sample of the Left Opaque Quote Box

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?”

This is what an alert_red looks like!

“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.

This is what an alert_blue looks like!

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.”

Here is a good use for the alert pull-out

SORRY! This page is still under construction! We hope to have it completed by…

Leave a Reply

Your email address will not be published. Required fields are marked *