Many content writers are expert in writing a lengthy and researched content. However, they miss an interactive part in the article for engaging users. WordPress Gutenberg editor has many blocks that you can use to create attractive piece of content. You do not need to have any additional software and format directly on the online post editor with in-built blocks. Quotes are one such interactive block you can use to insert important text to highlight. In this article, let us explore how to create blockquotes in WordPress and customize to create attraction.
Related: Blockquote elements for Bootstrap site.
Create Blockquotes in WordPress
Login to your WordPress admin panel and go to your post editor. you can create a new post by going to “Posts > Add New” or edit any of your existing post to insert blockquote element. WordPress Gutenberg editor offers three similar blocks for inserting blockquotes – Quote, Pullquote and Verse.
All these blocks are in-built with Gutenberg editor and you can insert anywhere on your post content. You can use all these blocks for inserting an important saying from you or someone, a proverb or a section on your article.
Highlight your own text as a pullquote.
Inserting Blockquotes in Content
Click on the + icon and choose “Browse All” button. insert a quote block.
The quote block contains two parts – quote and citation.
After typing quote / citation, select the quote / cite. Click on the three dots button on the block and select “Text Color”. Now you can apply different colors to your quote / cite text. Also, you can link the citation text to internal or external link.
Similarly, you can change the style to larger from the sidebar block setting.
Click on the “Preview” button to view the quotes on how it looks like. You can setup the “Default Style” from the sidebar to “Large” or “Default” so the quote by default will be a in the selected style and you do not need to change it every time.
Remember, the style of the quotes depend on your theme’s style. Therefore, same quotes block may look different on different sites or with different themes.
Related: How to create blockquote element in Weebly site?
Creating Pullquote in Content
Frankly, pullquote is what we like more than the quote block. After inserting a pullquote, you can make it a solid color style to add background color. This is super useful to showcase an extract from your article so that users can remember the highlighted content.
If you have a lengthy content, add the pullquote and text alongside using Columns block like below.
Inserting Verse Block
Similarly, you can insert verse block to showcase attractive piece from your content. As you can see, verse block does not have any special settings.
In most themes, we have noticed the verse block is actually using preformatted style. In this case, you will see the same effect of preformatted text for verse also.
Using Custom Blockquotes
WordPress allows you to customize the blocks in different ways.
1. Using Custom CSS with Quote Block
add custom CSS class under “Advanced” section on the block’s setting. For example, you can add the class name as blockquotecss in “Advanced” section.
And insert the following custom CSS under “Appearance > Customize > Additional CSS” section.
.blockquotecss {
font-family: monospace;
padding: 25px !important;
}
In the above example, we have used monospace as font family and force 25px padding using !important attribute. Since, block style depends on the theme, in most cases it is difficult to overwrite using the additional CSS. You can find appropriate styles and customize the quote, pullquote and verse blocks on your site.
2. Using Block Quote from Patterns
WordPress introduced “Patterns” from version 5.5. You can insert grouped blocks with custom style and quote with image blocks is one of the default patterns available for you. Press enter key or create a paragraph block and type /quote to filter all quote blocks. Alternatively, click on the + icon on the top left corner of the editor and choose quote block under “Patterns” section.
It will look something like below and we have added a background color to the predefined quote pattern block.
Success or failure is not what you achieve, it’s how you live.
— webnots.com
This will save you lot of time and you can create a reusable block to use anywhere on your site with the same design.
3. Using Custom HTML Block
Using custom CSS in customizer is a good option. However, WordPress will load the custom CSS on each page of your site regardless of whether the page has blockquote or not. Therefore, you can use Custom HTML element to add custom blockquotes which will be loaded only on that page.
Use Custom HTML to have customized blockquote on a single post.
Insert a Custom HTML element on your content area and paste the following code under HTML section.
<style>
.webnots_quote {
background: #c97e69 none repeat scroll 0 0;
border-color: #808080;
border-style: inset;
border-width: 0 0 0 20px;
color: #ffffff;
font-size: 20px;
padding: 20px;
font-family: monospace;
}
</style>
<blockquote class="webnots_quote">
"Success or failure is not what you achieve, it’s how you live."
</blockquote>
It should look like below on the editor:
Now, click on the “Preview” on the block to view the instant preview of the blockquote inside Custom HTML block. It should look like below:
As mentioned, the code will load only on the page where you insert this custom quote. In addition, you can easily customize the code to show different styles of the quotes. For example, change the border width to right side by using “border-width: 0 20px 0 0;”.
You can mix and match the styles to create different styles of block quotes as shown in the demo page here.
Final Words
Many webmasters do not use Gutenberg blocks on the content. We have shown examples of how to use blockquotes like quote, pullquote and verse blocks. In addition, you can also use custom HTML block to insert your own blockquote styles. We recommend you using blockquotes to showcase important content that you want the reader to remember after reading lengthy article.
