{"id":12733,"date":"2015-09-06T11:00:47","date_gmt":"2015-09-06T16:00:47","guid":{"rendered":"https:\/\/getflywheel.com\/?p=12733"},"modified":"2024-02-08T11:43:07","modified_gmt":"2024-02-08T17:43:07","slug":"how-to-style-blockquotes-in-wordpress","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-style-blockquotes-in-wordpress\/","title":{"rendered":"Simple Ways to Style Blockquotes in WordPress"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Blockquotes are excellent at making a piece of information stand out. That&#8217;s why they&#8217;re typically reserved for longer quotes in your post; they put emphasis on the words while also providing a visual break from all the text. By default, WordPress, your theme, or maybe even a plugin will apply very basic CSS properties to blockquotes. For many people, that works just fine.&nbsp;But blockquotes are also a fun opportunity to apply some brand-specific elements to a site (think colors, shapes, textures, etc.).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To change the default CSS associated with blockquotes, you can do one of two things. The first, if you&#8217;re lucky, is&nbsp;to simply add code to the Custom CSS box provided by your theme. If you&#8217;re not as fortunate, however, you&#8217;ll need to edit your theme&#8217;s stylesheet, which means you really should create a child theme first.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once you&#8217;re ready, here are some simple ways to style your blockquotes in WordPress to make them stand out.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Changing the Text<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">One of the easiest ways to make one block of text stand out from another is simply to change the appearance of the text. This could be the size, color, or even the font itself. Here&#8217;s an example that combines all of these changes.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/09\/style-blockquotes-wordpress-text.png\" alt=\"style-blockquotes-wordpress-text\" class=\"wp-image-12757\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>blockquote {\nmax-width: 600px;\nmargin: 20px;\npadding: 20px;\ntext-align: center;\nfont-family: serif;\nfont-size: 22px;\ncolor: #38b6cd;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">2. Adding Shapes<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">One of my favorite ways to style a blockquote is to add very simple and elegant shapes to&nbsp;&#8220;block&#8221; the quote (pun intended). Here are a couple different examples of this:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/09\/style-bloclquotes-wordpress-lines.png\" alt=\"style-bloclquotes-wordpress-lines\" class=\"wp-image-12754\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>blockquote {\nmax-width: 600px;\nmargin: 20px;\npadding: 20px;\ntext-align: center;\nfont-family: sans-serif;\nfont-size: 16px;\ncolor: #7f7f7f;\nborder-top: 2px solid #38b6cd;\nborder-bottom: 2px solid #38b6cd;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/09\/style-blockquotes-wordpress-side-shape.png\" alt=\"style-blockquotes-wordpress-side-shape\" class=\"wp-image-12752\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>blockquote {\n max-width: 600px;\n margin: 20px;\n padding: 10px;\n text-align: center;\n font-family: sans-serif;\n font-size: 16px;\n color: #7f7f7f;\n border-left: 6px solid #38b6cd;\n border-top-left-radius: 20px;\n border-bottom-left-radius: 20px;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">3. Creating a&nbsp;Background<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If you want an approach that&#8217;s a little more bold, add a background color to your blockquotes.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/09\/style-blockquotes-wordpress-background.png\" alt=\"style-blockquotes-wordpress-background\" class=\"wp-image-12758\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>blockquote {\nmax-width: 600px;\nmargin: 20px;\npadding: 20px;\ntext-align: center;\nfont-family: sans-serif;\nfont-size: 16px;\ncolor: #ffffff;\nbackground-color: #38b6cd;\nborder-radius: 20px;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Of course, if you still want a background color but don&#8217;t want it to look too bold, just choose a more subtle color.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/09\/style-blockquotes-wordpress-light-background.png\" alt=\"style-blockquotes-wordpress-light-background\" class=\"wp-image-12756\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>blockquote {\nmax-width: 600px;\nmargin: 20px;\npadding: 20px;\ntext-align: center;\nfont-family: sans-serif;\nfont-size: 16px;\ncolor: #5e5d5d;\nbackground-color: #f1fbff;\nborder-radius: 20px;\n}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator aligncenter has-alpha-channel-opacity\" \/>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">This is just the tip of the iceberg when it comes to styling your blockquotes. To make sure all your designs load and perform exactly as expected, make sure you&#8217;re working with a high-quality <a href=\"https:\/\/wpengine.com\/wordpress-hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress hosting<\/a> provider!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Blockquotes are a great way to call out important information. <\/p>\n","protected":false},"author":1,"featured_media":149409,"template":"","resource-topic":[1396],"resource-role":[1397],"resource-type":[916],"class_list":["post-12733","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Simple Ways to Style Blockquotes in WordPress<\/title>\n<meta name=\"description\" content=\"Blockquotes are a great way to call out important information in an article. Here&#039;s how you style them in specific ways.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Simple Ways to Style Blockquotes in WordPress\" \/>\n<meta property=\"og:description\" content=\"Blockquotes are a great way to call out important information in an article. Here&#039;s how you style them in specific ways.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-style-blockquotes-in-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-08T17:43:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2015\/09\/blockquote-header.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Simple Ways to Style Blockquotes in WordPress\" \/>\n<meta name=\"twitter:description\" content=\"Blockquotes are a great way to call out important information in an article. Here&#039;s how you style them in specific ways.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2015\/09\/blockquote-header.png\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-style-blockquotes-in-wordpress\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-style-blockquotes-in-wordpress\/\",\"name\":\"Simple Ways to Style Blockquotes in WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2015-09-06T16:00:47+00:00\",\"dateModified\":\"2024-02-08T17:43:07+00:00\",\"description\":\"Blockquotes are a great way to call out important information in an article. Here's how you style them in specific ways.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-style-blockquotes-in-wordpress\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-style-blockquotes-in-wordpress\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-style-blockquotes-in-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Simple Ways to Style Blockquotes in WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Simple Ways to Style Blockquotes in WordPress","description":"Blockquotes are a great way to call out important information in an article. Here's how you style them in specific ways.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"Simple Ways to Style Blockquotes in WordPress","og_description":"Blockquotes are a great way to call out important information in an article. Here's how you style them in specific ways.","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-style-blockquotes-in-wordpress\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2024-02-08T17:43:07+00:00","og_image":[{"width":1100,"height":500,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2015\/09\/blockquote-header.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_title":"Simple Ways to Style Blockquotes in WordPress","twitter_description":"Blockquotes are a great way to call out important information in an article. Here's how you style them in specific ways.","twitter_image":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2015\/09\/blockquote-header.png","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-style-blockquotes-in-wordpress\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-style-blockquotes-in-wordpress\/","name":"Simple Ways to Style Blockquotes in WordPress","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2015-09-06T16:00:47+00:00","dateModified":"2024-02-08T17:43:07+00:00","description":"Blockquotes are a great way to call out important information in an article. Here's how you style them in specific ways.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-style-blockquotes-in-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/how-to-style-blockquotes-in-wordpress\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-style-blockquotes-in-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"Simple Ways to Style Blockquotes in WordPress"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2015\/09\/Blockquote_343x245.png","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Designer","topic":"<strong>Topics:<\/strong> Design","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/12733","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/149409"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=12733"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=12733"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=12733"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=12733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}