Jazz up Your Blog With Custom Block Quotes
I recently spent an evening customizing the CSS style of my block quotes for this blog, so I wanted to show you how to do the same thing. While most themes nowadays come with a block quote style built in, it’s one of those subtle things that I like to customize to make the style more my own. With custom block quotes, you can jazz up your blog so that your content pops!
What are block quotes used for?
First, what is a block quote? Block quotes are set off from the main text in some way, whether by indentation, a different font size or color or other stylistic choices. Block quotes can be used for actual quotes, for testimonials, or to emphasize an important point.
Technically, there is a difference between block quotes and pull quotes. Block quotes are typically used when there are long blocks of text that are quoted from someone else. Pull quotes, while also set apart from the main body of text, are usually shorter and are used to emphasize your own writing.
However, most people on the web treat block quotes and pull quotes the same. There is a blockquote button built into WordPress, so when I say block quote, please understand that I’m referring to anytime you use the blockquote button to set off text.
Another advantage of block quotes, depending on how they are styled, is that they can break up long blocks of text with some visual oomph. That makes it more likely that people will continue to read your whole post.
Add a block quote to your post
Before we get into changing your style, let’s add a block quote to your post. This could not be easier. Simply select the text that you want to place in a block quote. Then click the quote icon from the Visual editor.
Choose a style for your custom block quotes
You are limited only by your imagination in how you style your block quotes. Here are four examples that are easy to implement, along with the code used to create each one. Feel free to use these examples to create your own custom block quotes. Simply choose a code snippet and copy/paste it into your blog’s stylesheet (instructions in the next section).
Don’t be afraid to play around with different options. You can mix and match to make your block quote look like you want. But be sure and make a backup copy of your style sheet first!
Classic block quote
This is an example of a classic block quote with a quotation mark to the left. It’s simple and elegant.
Classic block quote CSS code:
blockquote,
blockquote::before {
color: #999;
}
blockquote {
margin: 0;
padding: 24px 40px;
}
blockquote::before {
content: "\201C";
display: block;
font-size: 30px;
height: 0;
left: -20px;
position: relative;
top: -10px;
}
Block quote with borders
You can also make a custom block quote with top and bottom borders. This block quote stands out on the page more than a classic block quote.
Block quote with borders CSS code:
blockquote,
blockquote::before {
color: #999;}
blockquote {
margin: 0px 0px 20px 0px;
padding: 40px 40px 20px 50px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
blockquote::before {
content: "\201C";
display: block;
font-size: 30px;
height: 0;
left: -20px;
position: relative;
top: -10px;
}
Block quote with background color
If you really want your block quote to stand out, you can change the background color (and, of course, you would use one of your brand colors).
Block quote with background color CSS code:
blockquote,
blockquote::before {
color: #fff;
}
blockquote {
margin: 0;
padding: 40px 40px 20px 50px;
background-color: #5cc8cb;
}
blockquote::before {
content: "\201C";
display: block;
font-size: 30px;
height: 0;
left: -20px;
position: relative;
top: -10px;
}
Block quote with colored borders & prominent quotation mark
For my block quote style, I wanted something that wasn’t quite so bold, but that did include a spot of brand color. So I used color for the borders and the quotation mark. I also changed the size and font-family of the quotation mark, because I wanted it to stand out more (and I thought this one was prettier).
Block quote with colored borders & prominent quotation mark CSS code:
blockquote,
blockquote::before {
color: #999;
}
blockquote {
margin: 0px 0px 20px 0px;
padding: 40px 40px 20px 50px;
border-top: 1px solid #5cc8cb;
border-bottom: 1px solid #5cc8cb;
}
blockquote::before {
content: "\201C";
display: block;
color: #5cc8cb;
font-family: Georgia, serif;
font-size: 80px;
height: 0;
left: -50px;
position: relative;
top: -10px;
}
Add the CSS code to your style sheet in WordPress
Now that you’ve decided on a style for your custom block quotes, you need to add the code to your style sheet. Before you make any changes to your style sheet, make a backup copy. That way, if you accidentally mess something up, you can restore the backup.
From your WordPress dashboard, click on Appearance, then click on Editor. Select your style sheet in the right sidebar.
Find the code for your current block quote, then replace it with your new custom code. If you are copying a code snippet from this post, then make your selection starting with the word blockquote and ending with the last brace (i.e. everything that is in the gray box).
There you have it. This is all you need to do to jazz up your blog with custom block quotes. Now you can use block quotes to emphasize text, highlight quotations and testimonials, and create a more pleasing visual experience for your readers.
Want to remember this? Save Jazz up Your Blog With Custom Block Quotes to your favorite Pinterest Board.
FREE Biz Planning Workbook
Download your free printable Business Planning Workbook for solopreneurs. Set your goals. Make your plans. Stay focused!
