How To Add Quote In WordPress

add quote

Quotes are considered the valuable and memorable part of your article. These parts are also the most shared part of any presentation or post. Adding procedure of Quote has been changed in the new Block editor. 

If you don’t know how to add quote in WordPress, then you are in the right place. In this post, I am going to show you how to Add quote in WordPress and customize with custom CSS. 

Let’s begin then. 

How To Add Quote In WordPress

Adding a quote is very easy in WordPress. Earlier in the classic editor, you had to use custom coding to add quote, but now only block editor is enough. 

To add quote in WordPress at first, open the page or post where you want to add a quote. Now click the Add block (+) button to add a block and search for ‘Quote’. 

Click on it, and it will be added in your post. Now write whatever you need to inside the quote field.  

That’s all. There’s nothing you need to do except styling. You can also add citations below the quote. 

Styling

You may add a different style to your blockquote with custom CSS. Just add the following custom code to your blockquote.

Simple Blockquote

blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 500px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
border-left:3px dashed #c1c1c1;
background:#eee;
}
 
blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
  
blockquote cite:before {
content: "\2014 \2009";
}

White Blue and Oragne Blockquote

blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 450px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #FFF;
border-left:5px solid #FF7F00;
background:#4b8baf;
}
 
blockquote cite {
color: #efefef;
font-size: 14px;
display: block;
margin-top: 5px;
}
  
blockquote cite:before {
content: "\2014 \2009";
}

Using Gradient as Background for Blockquote

blockquote {
width: 450px;
color:#FFF;
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "\2014 \2009";
}

Round Corder Blockquote

blockquote {
width: 450px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "\2014 \2009";
}

Conclusion

So, now you can add quote in the WordPress site of your, right? Well, it all up to you now. Go and add Blockquotes and style theme using custom CSS. If you have any suggestions or questions, feel free to tell us. Don’t forget to leave your thoughts in the comment box below. 

close

Easy WP Tweaks

10X Your Site Growth!

Join the growing library of Easy WP Tweaks to grow your WordPress site.

Leave a Comment

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

Copy link
Powered by Social Snap