How To Customize Blockquotes Style in WordPress Themes

Quotes are often the most memorable part of your article. They are also the most shared part of any blog post or page. This is why newspapers and mainstream media sites customize their blockquote style to make it stand out.

We have added blockquote styles to highlight valuable quotes and expert advice on our website. This choice has proven effective in capturing the reader’s attention and emphasizing on key takeaways.

In this article, we will show you how to easily customize blockquotes style in WordPress themes.

Why Use And Customize Blockquotes Style in WordPress?

Using blockquotes in your content can improve the user experience on your WordPress website. You can use them to make a selected section of text stand out from the rest of the content and grab your readers’ attention.

For instance, you can use blockquotes for quotations from authors and influencers, citations from publications, testimonials from your customers, or highlight valuable information to your WordPress blog visitors.

Another benefit of using blockquotes is that they can increase social engagement. Allowing users to share a quote on Twitter or Facebook can help you get more followers and improve your brand’s social media visibility.

By default, WordPress offers a Quote block in the content editor. To add it, simply head over to the WordPress editor and insert the Quote block where you want in the content.

However, the default quote block doesn’t offer a lot of options for customization. You can only change the size of the text and choose from the default styles in WordPress.

That said, let’s take a look at how you can customize blockquotes style in WordPress themes. We will show you how to change the style of blockquotes using a WordPress plugin and also using custom CSS:

Method 1: Customize Blockquotes Style Using a Plugin

An easy way to customize the blockquotes on your WordPress website is by using a plugin like Spectra – WordPress Gutenberg Blocks. It’s a free WordPress plugin that adds additional blocks in the WordPress content editor, including customizable blockquotes.

For more information, you can check out our detailed Spectra review.

First, you’ll need to install and activate the Spectra – WordPress Gutenberg Blocks plugin. For more details, please see our step-by-step guide on how to install a WordPress plugin.

Upon activation, visit the Spectra » Blocks page from the WordPress admin sidebar.

Here, you will see that the plugin has activated all the additional blocks, including the Blockquote block by default.

From here, you can deactivate all the unnecessary blocks by toggling the switch next to these options.

After that, open a page or post of your liking in the block editor.

Next, click the ‘+’ button in the top left corner of the screen to add the Blockquote block anywhere in your content.

After that, you can enter the text in the Blockquote area.

Once you’ve done that, you can configure the Blockquote layout from the panel on the right.

From here, you can choose the ‘Border’ option for a simple layout and the ‘Quotation’ option if you want to add quotation marks, select text alignment, and more.

You can also add an author image to further style your Blockquote block.

Next, switch to the ‘Style’ tab in the block panel to change the quote icon size, background size, and more.

You can also change the quote color, typography, author color, and spacing of your block from this tab.

Finally, click the ‘Publish’ or ‘Update’ button at the top to store your settings.

Now, you can visit your WordPress blog to view the Blockquote block in action.

Method 2: Add Custom CSS to Customize Blockquotes Style Using WPCode

If you don’t want to use a WordPress plugin, then adding custom CSS is another way to customize your blockquote.

The easiest way to add custom CSS code to your website is the WPCode plugin, which is the best code snippets plugin on the market.

First, you need to install and activate the WPCode plugin. For detailed instructions, you may want to see our beginner’s guide on how to install a WordPress plugin.

Note: WPCode also has a free version. However, you will need the premium plan of the plugin to unlock the ‘CSS Snippet’ option.

Upon activation, visit the Code Snippets » + Add Snippet page from the WordPress admin sidebar.

Next, click on the ‘Use Snippet’ button under the ‘Add Your Custom Code (New Snippet)’ option.

This will take you to the ‘Create Custom Snippet’ page, where you can start by typing a name for your code snippet.

Next, select ‘CSS Snippet’ as the code type from the dropdown menu in the right corner of the screen.

After that, you can enter any of the following custom CSS code snippets into the ‘Code Preview’ box to change the look and style of the blockquote.

Keep in mind that these settings will change the appearance of the default ‘Quote’ block in WordPress.

Here are some blockquote styles you can use on your website.

1. Classic CSS Blockquote

Usually, people use CSS background-image to add large quotation marks in blockquotes. In this example, we have used CSS to add large quotation marks.

blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
width: 450px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
background:#ececec;
}

blockquote:before {
display: block;
content: “201C”;
font-size: 80px;
position: absolute;
left: -10px;
top: -10px;
color: #7a7a7a;
}

blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}