Hello, my friend. In this quick tutorial, I’ll show you how to style the blockquote of your Extra theme. By default, it has a simple style. So, let’s add more customization to it!

This tutorial works for the Divi theme too. The only difference is that Divi already has some custom style for the blockquote.

The blockquote is a great way to add good design to an important text of your website or blog with only the click of a button.

This is the same technique that I currently use in blog.youdivi.com website.

Without further ado, let’s start!

How to customize blockquote


When you’ll customize a class in CSS you target it using .class-name. To style the blockquote you just need to write blockquote and start adding your properties.

Let’s do differently in this tutorial. Let’s use the Chrome DevTools to see our edits, and then simply copy and paste into our Custom CSS of the Divi or Extra theme.


Add the following code inside Extra> Theme Options > Custom CSS.

/* -- Blockquote -- */
blockquote {
    border-left: 5px solid #3F51B5;
    padding: 0 70px 0 15px !important;
    background: transparent;
    transition: .3s all;
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 20px;

blockquote:hover {
    border-left: 10px solid #3F51B5;
    transition: .3s all;

This CSS will add some style to the blockquote and create a micro-animation when hovering the element.

I love how micro-animations or micro-interactions have such a giant impact in layouts and designs.

Remember to check out the video tutorial on how to customize blockquote – I think it’s easier to follow up and completely understand how it’s done.

You’re free to copy this code and use in all your websites. But, I encourage you to try your own edits playing with the CSS. Only when you explore and have fun you’re really learning.


Did you like this tutorial on how to customize blockquote in Extra and Divi theme?

Comment if you have any feedback or suggestion. If you liked it remember to subscribe for more tutorials like this.

See ya!