Adding Pull quotes to Divi Posts and Pages (5 different styles)

 

A pull quote is similar to a blockquote in the way that it blocks out a quote to make t stand out from the rest of the paragraph. A basic difference between a “pull quote” and a “blockquote” is the content being used. A pull quote repeats an important quote already mentioned in the past. A blockquote pulls from an external source. Different styles can be added to give a unique styled pull quotes and this blog gives you a walk through it. This can be achieved through blockquote tag and custom CSS.  It is up to you to use them as pull quotes or blockquotes.

Adding The Custom CSS For Your Pull Quote

The pull quotes can be styled and positioned using only CSS. To implement the style of your pull quotes, just go to Divi -> Theme Options, and under General settings, add the given CSS in the Custom CSS box:

Setting up the Post or Page

You have your CSS placed. Now, it is time to add your page or post. We will be using a post as an example over here. From The Dashboard, navigate to Divi -> Posts  -> Add New  We can start with either Default Builder or Divi Builder, Here I will be using Divi Builder.  Click on the Divi Builder button. From the default standard section, choose edit row Module Settings Under General Settings, change the following: Use Custom Width: YES Custom Width: 600px Save and Exit.   If you don’t understand the previous points, please follow the image.

 

 

 

 

 

 

 

 

 

 

 

 

 

Next, Insert a fullwidth column to your row. Then add a Text Module to your fullwidth column. In the Text module settings, make sure you click on the “Text”  tab in the editor box, then, add about 3-4 sentences of text. Highlight the block of text you want to use for the pull quote and click the B-QUOTE shortcode button to wrap the text in the blockquote tag. Please see the below images for more clarification.

 

Now, we are ready to add unique classes to your blockquote tag that will style your pull quote based on custom CSS you entered earlier.

Adding and Styling your pull quotes with blockquote tags

 

Pull Quote Left

To add a pull quote to the left, simply add this blockquote

 

<blockquote class=”et-pullquote left”>Weclome to WordPress Learning !!beautiful designs, powerful features, and the freedom to build anything you want. WordPress is both free and priceless at the same time.</blockquote>

 

This is the result: WordPress started in 2003 with a single bit of code to enhance the typography of everyday writing and with fewer users than you can count on your fingers and toes. Since then it has grown to be the largest self-hosted blogging tool in the world, used on millions of sites and seen by tens of millions of people every day.

Weclome to WordPress Learning !!beautiful designs, powerful features, and the freedom to build anything you want.

Everything you see here, from the documentation to the code itself, was created by and for the community. WordPress is an Open Source project, which means there are hundreds of people all over the world working on it. (More than most commercial platforms.) It also means you are free to use it for anything from your recipe site to a Fortune 500 web site without paying anyone a license fee and a number of other important freedoms.

Note: If you replace the word “left” with “right”, then the quotes will appear in the right. The color of the left border on the pull quote is going to be what you like, you can easily change them. To change the same, go to Divi -> Theme Customizer -> General Settings -> Layout Settings and change the theme accent color options. Please follow the following image:

Adding Pull Quotes with a Large Open Quotation

Add this blockquote for a left aligned pull quote with a large open quotation:

 

<blockquote class=”et-pullquote left quote”>Weclome to WordPress Learning !!beautiful designs, powerful features, and the freedom to build anything you want. WordPress is both free and priceless at the same time.</blockquote>

 

WordPress started in 2003 with a single bit of code to enhance the typography of everyday writing and with fewer users than you can count on your fingers and toes. Since then it has grown to be the largest self-hosted blogging tool in the world, used on millions of sites and seen by tens of millions of people every day.

Weclome to WordPress Learning !!beautiful designs, powerful features, and the freedom to build anything you want.

Everything you see here, from the documentation to the code itself, was created by and for the community. WordPress is an Open Source project, which means there are hundreds of people all over the world working on it. (More than most commercial platforms.) It also means you are free to use it for anything from your recipe site to a Fortune 500 web site without paying anyone a license fee and a number of other important freedoms.

Adding Pull Quotes with Top Border

Add this blockquote for a left aligned pull quote with a top border:

 

<blockquote class=”et-pullquote left topborder“>Weclome to WordPress Learning !!beautiful designs, powerful features, and the freedom to build anything you want. WordPress is both free and priceless at the same time.</blockquote>

 

WordPress started in 2003 with a single bit of code to enhance the typography of everyday writing and with fewer users than you can count on your fingers and toes. Since then it has grown to be the largest self-hosted blogging tool in the world, used on millions of sites and seen by tens of millions of people every day.

Weclome to WordPress Learning !!beautiful designs, powerful features, and the freedom to build anything you want.

Everything you see here, from the documentation to the code itself, was created by and for the community. WordPress is an Open Source project, which means there are hundreds of people all over the world working on it. (More than most commercial platforms.) It also means you are free to use it for anything from your recipe site to a Fortune 500 web site without paying anyone a license fee and a number of other important freedoms.

Adding Pull Quotes with Dark Background

Add this blockquote for a left aligned pull quote with a dark background:

 

<blockquote class=”et-pullquote left dark”>Weclome to WordPress Learning !!beautiful designs, powerful features, and the freedom to build anything you want. WordPress is both free and priceless at the same time.</blockquote>

 

WordPress started in 2003 with a single bit of code to enhance the typography of everyday writing and with fewer users than you can count on your fingers and toes. Since then it has grown to be the largest self-hosted blogging tool in the world, used on millions of sites and seen by tens of millions of people every day.

Weclome to WordPress Learning !!beautiful designs, powerful features, and the freedom to build anything you want.

Everything you see here, from the documentation to the code itself, was created by and for the community. WordPress is an Open Source project, which means there are hundreds of people all over the world working on it. (More than most commercial platforms.) It also means you are free to use it for anything from your recipe site to a Fortune 500 web site without paying anyone a license fee and a number of other important freedoms.

Changing your pull quotes to fullwidth

The pull quotes we saw have a max width of 300px. In order to make them full width and extension of the contest section, replace the following CSS:

Following is a sample image of how the screen looks: