In this Part 2 of 3 of a mini-series ‘Styling Typography in Divi’, the post will explore 4 Ways to Style Divi block quotes. This entire series will also cover ways to style Number and Bullet Lists, Image Captions, Headings, and Texts in mobile devices. The series pulls together essential but often overlooked text elements in web design, and provide copy-and-paste CSS codes to implement them easily on Elegant Themes’ Divi WordPress site. Let’s get started!


Block quotes or pull quotes are used commonly in online articles as a means to break up the monotony of long articles and to capture a reader’s attention with an important quote or key point. A well-designed block quote creates visual interest and adds a professional look to the article. Yet, the design of it is often overlooked, and common in the case for Divi users, since the option to customise it in the settings is unavailable. To do so, one has to add additional styling rules and codes to customise them.

Block quotes or pull quotes are used commonly in online articles as a means to break up the monotony of long articles and to capture a reader’s attention with an important quote or key point.

View a Live Demo

This tutorial covers 4 ways to style Divi block quotes:

  1. The Basic Large Quote
  2. The Duo-tone Colour Quote
  3. The Curve Block Quote
  4. The Speech Bubble Quote

In addition, the article covers:

  1. How to Add the CSS codes on Divi
  2. Tips for Designing Block Quotes
  3. Additional Design References

This article will demonstrate how to use the < blockquote > tag and add custom CSS to style them in Elegant Themes’ Divi.

The Basic Divi Block Quote

WordPress and Digital Marketing Tutorials - Divi Tutorials - Style Divi Block Quotes - Standard Divi Block Quote - Leow Hou Teng

The Standard Divi Block Quote

The basic Divi block quote has a border and an indentation on the left. The codes associated with the < blockquote > tag is displayed below. In order to style the blockquote, one has to ‘undo’ these CSS attributes before styling them.

/*---[Original Divi Block Quote Styling]---*/
blockquote {
  margin: 20px 0 30px;
  padding-left: 20px;
  border-left: 5px solid;
  border-color: #2ea3f2;
}

 

4 Ways to Style Divi Block Quotes

The Basic Large Quote

WordPress and Digital Marketing Tutorials - Divi Tutorials - Style Divi Block Quotes - Basic Large Quote - Leow Hou Teng

The Basic Large Quote

Continue Reading

The design, Basic Large Quote, is adapted from Think with Google and can be seen throughout this website. As it is clean and simple, it is suitable for most websites. The CSS class ‘basic-quote’ can be removed to overwrite the original < blockquote > styling.

/*---[The Basic Large Quote]---*/
/*Undos OriginL Block quote styling*/
blockquote.basic-quote {
  border: none;
  padding-left: 0;
}
blockquote.basic-quote p {
  color: #119ad7;
  font-family: Lato, sans-serif;
  font-size: 30px!important;
  line-height: 38px;
  font-weight: 300;
}
/*Author Styling*/
.basic-author {
  font-size: 16px!important;
  line-height: 18px;
  box-shadow: 0 -6px #119ad7;
  padding-top: 20px;
}
/*Oranisation or Source*/
.basic-organisation {
  font-size: 12px!important;
  line-height: 10px;
  color: #119ad7;
}

 

The Duo-Tone Colour Quote

WordPress and Digital Marketing Tutorials - Divi Tutorials - Style Divi Block Quotes - Duo Tone Block Quote - Leow Hou Teng

The Duo-tone Colour Quote

The Duo-Tone Colour Quote features a quotation mark with two colours, achieved by adding a gradient without blending the colours.

/*---[The Duo-Tone Colour Quote]---*/
blockquote.colour-quote p {
  font-size: 22px;
  line-height: 35px;
  font-style: italic;
  letter-spacing: 1px;
  color: #666;
  font-weight: 300;
  margin-top: -50px;
}
blockquote.colour-quote {
  position: relative;
  border-left: none;
}
/*Quotation Mark*/
blockquote.colour-quote:before {
  content: "\201C";
  font-size: 175px;
  font-family: 'Alegreya', serif;
  background: -webkit-linear-gradient(180deg, #119ad7 60%, #263C67 40%);/*Change the Colours here*/
  -webkit-background-clip: text;
  color: transparent;
}
/*Author*/
.colour-author {
  padding-left: 20px;
  font-size: 18px;
  text-transform: uppercase;
  line-height: 1em;
}
/*Source or Organisation*/
.colour-org {
  padding-left: 20px;
  font-size: 12px;
  font-style: italic;
  line-height: 1em;
}
/*Mobile Settings Add CSS Class colour-wrap to Text Module*/
@media all and (min-width: 700px) {
.colour-wrap {
  float: left;
  margin: 20px 20px 20px -10%;
}
blockquote.colour-quote {
  padding: 0 20px;
  max-width: 300px;
}
}

 

The Curve Block Quote

WordPress and Digital Marketing Tutorials - Divi Tutorials - Style Divi Block Quotes - Curve Block Quote - Leow Hou Teng

The Curve Quote

The Curve Block Quote is seemingly more complex, but the codes are similar to the previous example. As the design is a lot fancier, it should only be applied to a selected section of a website. A design reference can be found on Tympanus.net.

/*---[The Curve Block Quote]---*/
/*Add CSS Class curved-wrapped to Text Module*/
.curved-wrapped {
  width: 300px;
  margin-left: 50px;
}

@media all and (min-width: 700px) {
.curved-wrapped {
  float: left;
}
}
/*Paragraph Styling*/
blockquote.curved-quote p {
  font-family: Baskerville, Georgia, serif;
  font-size: 28px;
  font-style: italic;
  display: inline;
  color: rgba(235,150,108,0.8);
  text-shadow: 0 1px 1px rgba(255,255,255,0.5);
  line-height: 46px;
  position: absolute;
  top: 45%;
  left: 50%!important;
  transform: translate(-50%, -50%);
  width: 250px!important;
}
/*Curve Line*/
blockquote.curved-quote {
  width: 500px;
  height: 500px;
  border-radius: 50%;
  border-left: 5px solid rgba(235,150,108,0.1);
  top: 0px;
  margin-left: -50px;
}
/*Circle Icon Requires FontAwesome on your Site*/
blockquote.curved-quote:after {
  font-family: 'FontAwesome';
  background: rgba(235,150,108,0.8);
  width: 130px;
  height: 130px;
  border-radius: 50%;
  content: '\f10e';
  position: absolute;
  font-size: 70px;
  line-height: 130px;
  text-align: center;
  top: 0px;
  left: 50%;
  margin-left: -65px;
  color: rgba(255,255,255,0.5);
  text-shadow: 0 1px 1px rgba(255,255,255,0.1);
}
/*Author Styling*/
.curve-author {
  text-transform: uppercase;
  font-size: 16px;
  padding-top: 10px;
  font-weight: bold;
  color: #d48158;
  text-shadow: 0 1px 1px rgba(255,255,255,0.1);
  position: absolute;
  left: 20px;
  margin-top: -200px;
  box-shadow: 0 -6px #EEA884;
}
/*Oranisation or Source*/
.curve-author cite {
  color: #d7aa94;
  font-style: italic;
  font-size: 12px;
  position: relative;
  top: 30px;
}

 

READ  12 Content Marketing Ideas for Creating Engaging Content

The Speech Bubble Quote

WordPress and Digital Marketing Tutorials - Divi Tutorials - Style Divi Block Quotes - Speech Bubble Quote - Leow Hou Teng

The Bubble Speech Quote

The Speech Bubble Quote, another adaptation from Tympanus.net, may be a good design for a pull quote or a testimonial from a customer.

/*---[The Speech Bubble Quote]---*/
/*Add Class speech-bubble-wrap to Text Module*/
.speech-bubble-wrap {
  width: 500px;
  max-width: 100%;
  -webkit-filter: drop-shadow(-5px 4px 20px rgba(0,0,0,0.3));
  filter: drop-shadow(-5px 4px 20px rgba(0,0,0,0.3));
}

@media all and (min-width: 700px) {
.speech-bubble-wrap {
  float: left;
  padding: 40px;
}
}
blockquote.speech-bubble {
  background: #fff;
  padding: 30px;
  border-radius: 5px;
  box-shadow: inset 0 2px 0 rgba(188, 147, 200, 0.7);
  border-left: none;
}
blockquote.speech-bubble p {
  font-family: 'Alegreya', serif;
  font-size: 24px;
  color: #b4b4b4;
  font-weight: 400;
  line-height: 40px;
  font-style: italic;
  text-indent: 100px;
  position: relative;
}
/*Quotation Mark Styling*/
blockquote.speech-bubble p:before {
  content: '\201C';
  font-family: serif;
  font-style: normal;
  font-weight: 700;
  position: absolute;
  font-size: 175px;
  top: 0px;
  left: -105px;
  color: rgba(188, 147, 200, 1);
  text-shadow: 7px 14px 10px rgba(0, 0, 0, 0.1);
}
/*Tip of Bubble*/
blockquote.speech-bubble:before {
  border-top-color: rgba(0,0,0,0.01)!important;
  border-width: 11px!important;
  left: 65%;
  margin-left: -11px;
}
blockquote.speech-bubble:after {
  border-top-color: #ffffff!important;
  border-width: 10px!important;
  left: 65%;
  margin-left: -10px;
}
blockquote.speech-bubble:before, blockquote.speech-bubble:after {
  bottom: 30px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
/*Author Styling*/
.bubble-author {
  font-family: 'Alegreya SC', serif;
  font-weight: 700;
  font-size: 18px;
  color: rgba(188, 147, 200, 1);
  text-shadow: 0 1px 1px rgba(255,255,255,0.7);
  line-height: 0.1em;
  text-align: right;
  padding-right: 100px;
}
/*Organisation or Source*/
.bubble-author cite {
  font-family: 'Alegreya', serif;
  font-weight: 700;
  font-size: 14px;
  font-style: italic;
  color: #bebebe;
  text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
/*Thumbnail Styling*/
div.bubble-thumb {
  display: block;
  width: 70px;
  height: 70px;
  border: 5px solid #fff;
  border-radius: 50%;
  background: url(YOUR image URL here) no-repeat center center;/*Change the image URL here*/
  position: absolute;
  right: 10px;
  bottom: -25px;
  box-shadow: inset 1px 1px 4px rgba(0,0,0,0.5), 0 2px 3px rgba(0,0,0,0.6);
}

 

How to Add the CSS Codes on Divi

Open the Text Module, in the Advanced Tab, add one of the following CSS Classes:

  • curved-wrapped
  • colour-wrap
  • speech-bubble-wrap

These classes define the width and positioning of the quotes. If a 100% width is preferred, change the attributes accordingly.

WordPress and Digital Marketing Tutorials - Divi Tutorials - Style Divi Block Quotes - Instructions for Adding a CSS Class - Leow Hou Teng

Add a CSS Class to the Text Module

In the Text Module, select the text and click on the blockquote button. The text should be indented with a border on the left.

WordPress and Digital Marketing Tutorials - Divi Tutorials - Style Divi Block Quotes - Instructions for Adding a Blockquote - Leow Hou Teng.jpg

Highlight the text and click on the Block Quote Button

Toggle from ‘Visual’ to ‘Text’ to reveal the HTML codes. Add the relevant CSS Classes within the < blockquote > tag. Similarly, add a class to the < p > tag for Authors and Organisation/Source.

<blockquote class="colour-quote">If you don't know where you are going, any road will get you there.</blockquote>
<p class="colour-author">LEWIS CARROLL</p>
<p class="colour-org">Alice's Adventures in Wonderland</p>
WordPress and Digital Marketing Tutorials - Divi Tutorials - Style Divi Block Quotes - Instructions for Duo Tone Block Quote- Leow Hou Teng

Add Classes to the block quotes, author, and organisation

Copy the CSS codes from above and include it in the Divi Theme Options > Custom CSS or apply it to only a single page, in the Divi Builder Settings > Custom CSS.

WordPress and Digital Marketing Tutorials - Divi Tutorials - Style Divi Block Quotes - Instructions for Adding Custom CSS - Leow Hou Teng

Add CSS to Custom CSS box in Divi Theme Options

Tips for Designing Divi Block Quotes

While this article covers 4 ways to style Divi block quotes, explore other ways of doing so. While designing the block quotes, consider the following points:

  1. Indent the text
  2. Make the text large
  3. Choose a different font, consider Condensed, Thin, Bold fonts as a means to differentiate it from the body text
  4. Add a quotation symbol or an icon
    1. Use an icon font to keep the symbol looking crisp on retina displays.
  5. Style the source name
  6. Check for responsiveness on mobile devices.

Additional Design Reference

For additional reference on how to style Divi block quotes and other websites, refer to the following websites.

  1. Blockquotes In WordPress: Everything You Need To Know by Elegant Themes
  2. How to Add Pull Quotes to Divi Posts and Pages (with 5 different styles) by Elegant Themes
  3. Modern Block Quotes Style by Tympanus.net

Hou Teng

Hou Teng

Art Director, Digital Marketing Strategist at LeowHouTeng.com
Hou Teng is a Singaporean graphic designer, specialising in both print and web. After graduating from Nanyang Technological University, School of Art, Design & Media, he has worked in advertising and launched an education startup as a side project. He has also worked briefly in a renovation start-up in Shen Zhen, China. While his strengths are in branding and layout design, he is also skilled in digital imaging, web design (HTML & CSS), WordPress content management and administration, search engine optimisation, and digital marketing.
Hou Teng