{"id":26182,"date":"2021-06-29T15:00:08","date_gmt":"2021-06-29T13:00:08","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=26182"},"modified":"2021-07-09T14:10:37","modified_gmt":"2021-07-09T12:10:37","slug":"what-is-blockquote-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/what-is-blockquote-in-wordpress\/","title":{"rendered":"What is Blockquote and How to Add It in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]When you want a sentence or two in your text to really pop, you have a couple of style options to do it. You can use bold, italic, or underlines to style the text, as the obvious choices. You can go one step further and color or <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-highlight-text-in-wordpress\/\">highlight the text<\/a>. You might also do something more drastic \u2013 an option called blockquote.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Recently, we\u2019ve released a free plugin called <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/counters\/\">Qi Addons for Elementor<\/a> which contains 60 addons created by our team. Among those addons is the one <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/blockquote\/\">blockquote widget<\/a> \u2013 an addon that lets you easily add and style blockquotes.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>If you want to see the addon in action \u2013 here\u2019s a handy video explaining how to use it to create a simple yet effective blockquote.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]<iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/LxHZ2d9HejY\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;][vc_column_text]For those of you who prefer reading, we\u2019ll use this article to show you the same \u2013 how to create a simple blockquote and get familiar with some of the options this addon has. You\u2019ll read:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-is-a-blockquote\">What Is a Blockquote and What It Looks Like<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-add-a-blockquote-in-wordpress\">How to Add a Blockquote in WordPress<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-edit-the-content-of-a-blockquote\">How to Edit the Content of a Blockquote<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-style-a-blockquote\">How to Style a Blockquote<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-is-a-blockquote\"><\/a>What Is a Blockquote and What Does It Look Like?<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"600\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Blockquote Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-Preview-300x186.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-Preview-768x476.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-Preview-620x384.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Everyone knows what quoting is \u2013 when you take something someone else said and you write it down while acknowledging what you\u2019re doing. Many people encounter quotes and quotations in the schoolroom. Those who don\u2019t can easily get familiar with it by consuming the media.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]When talking about blockquotes, you shouldn\u2019t take the strictest possible sense of the word \u201cquote.\u201d Even though you\u2019re often quoting someone else in the blockquote,<strong> it\u2019s also a great way to shine a light on something important you wrote \u2013 quote your own text.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Blockquotes are, as a general rule, stylized differently than the rest of the text.<\/strong> Often, the text in the blockquote will be in a different font, usually in italic. A bigger font size is also common in blockquotes, as is the use of exaggerated quotation marks or other visual elements &#8211; <strong>blockquotes pull almost every trick in the book to make their contents stand out.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>That\u2019s why we say that a blockquote is a design option for highlighting text.<\/strong> People have been able to add a blockquote using HTML with the tags &lt;blockquote&gt; and &lt;\/blockquote&gt;. Some might have used it just as a convenient way to add some indentation to the text, as that\u2019s how blockquotes were often displayed.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Today, however, blockquotes can be rich and colorful, or simple and solemn.<\/strong> What a blockquote looks like depends on you and the method you\u2019re using to add them in WordPress.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;qi-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-add-a-blockquote-in-wordpress\"><\/a>How to Add a Blockquote in WordPress<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-Preview-2.jpg\" class=\"attachment-full size-full\" alt=\"Blockquote Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-Preview-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-Preview-2-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-Preview-2-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-Preview-2-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you\u2019re interested in adding blockquotes in WordPress with a bit more style than you\u2019d be able to get from an HTML tag, you\u2019ll need to do a couple of things first. If you don\u2019t have <a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" target=\"_blank\" rel=\"noopener\">Elementor<\/a> already installed and activated, that\u2019s something you\u2019ll need to do. The free version will work just fine.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Your next step would then be to install our <a href=\"https:\/\/wordpress.org\/plugins\/qi-addons-for-elementor\/\" target=\"_blank\" rel=\"noopener\">Qi Addons for Elementor<\/a> plugin just like you\u2019d install any other plugin in WordPress. Upon activation, you can create a new post or page, or open an existing one, and you\u2019ll be ready to add a blockquote in WordPress.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can find the widget by searching the left-hand side panel for the term \u201cblockquote.\u201d It will be the red widget you see in the results. Simply dragging it to a free section would be enough to add a blockquote in WordPress. <strong>That\u2019s how we added ours, but we followed that step with one simple edit \u2013 we edited the section choosing the boxed content width and setting it to 735.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"438\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Content-Width.jpg\" class=\"attachment-full size-full\" alt=\"Content Width\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Content-Width.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Content-Width-300x136.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Content-Width-768x347.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Content-Width-620x280.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]That gave us the canvas we\u2019ll use to edit and style the blockquote. You are more than welcome to choose the layout and style you like, or even go into the section\u2019s advanced options.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-edit-the-content-of-a-blockquote\"><\/a>How to Edit the Content of a Blockquote<\/h2>\n<p>[\/vc_column_text][vc_column_text]There are three important things you can do in the Content options. You can choose the layout \u2013 which refers to the position of those quotation marks \u2013 edit the text and choose the icon type.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"528\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-General.jpg\" class=\"attachment-full size-full\" alt=\"Blockquote General\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-General.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-General-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-General-768x418.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-General-620x338.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We chose to stick with the top layout, keeping the quotation marks on top of the text. <strong>We\u2019ve changed lorem ipsum to our own text, and we used an icon we uploaded to our media library.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"527\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-General-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Blockquote General Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-General-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-General-Settings-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-General-Settings-768x418.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-General-Settings-620x337.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Since there\u2019s not much else to do in the Content tab, we moved on to styling our blockquote. No reason to hurry your experimenting with the layouts, text, and icon types \u2013 take your time to find a good match. [\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-style-a-blockquote\"><\/a>How to Style a Blockquote<\/h2>\n<p>[\/vc_column_text][vc_column_text]Moving on to the Style tab, you\u2019ll first encounter options to change the alignment of the text, the type of background, and the border type. The alignment is a straightforward option, but the type of background and the border type hide a plethora of interesting choices you can make. Whether you want to create a color gradient background for your blockquote or a double border, this is where you\u2019ll be able to do it.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>For our blockquote, we just changed the alignment to the center.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"513\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-Alignment.jpg\" class=\"attachment-full size-full\" alt=\"Blockquote Alignment\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-Alignment.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-Alignment-300x159.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-Alignment-768x407.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-Alignment-620x328.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The Text Style card is where you\u2019ll find all the color and typography options for the text. You\u2019d be able to choose the text tag, too. <strong>We opted not to change the color or the default tag, but we did change the font to DM Serif Text and the style to Italic.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"519\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-Typography.jpg\" class=\"attachment-full size-full\" alt=\"Blockquote Typography\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-Typography.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-Typography-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-Typography-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-Typography-620x332.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the Icon Style card, you\u2019ll be able to pick the alignment and size of the icon, as well as its color. <strong>We only decided to change the size of the icon, increasing it to 47 pixels.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"517\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-Icon-Size.jpg\" class=\"attachment-full size-full\" alt=\"Blockquote Icon Size\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-Icon-Size.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-Icon-Size-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-Icon-Size-768x410.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-Icon-Size-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, the Spacing Style card is where you can adjust the holder padding to increase the space around the text, the text margin-top, and the icon margin. <strong>We decided to leave these options be, happy with how our blockquote turned out.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"433\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-Final.jpg\" class=\"attachment-full size-full\" alt=\"Blockquote Final\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-Final.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-Final-300x134.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-Final-768x343.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Blockquote-Final-620x277.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Let\u2019s Wrap It Up!<\/h2>\n<p>[\/vc_column_text][vc_column_text]Whether you\u2019re using them to quote someone else\u2019s words or draw more attention to yours, blockquote is the tool you can use to get the job done. And if it\u2019s the tool you plan to use for your website, our widget will be there with all the options you\u2019ll ever need to customize your blockquote.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Need a way to make some text stand out in your WordPress website? Blockquotes will help you do just that, and we&#8217;ll show you the easiest way to add them!<\/p>\n","protected":false},"author":9295,"featured_media":26502,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,114,4,13],"class_list":["post-26182","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-qi-addons-for-elementor","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/26182","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/9295"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=26182"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/26182\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/26502"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=26182"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=26182"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=26182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}