How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

February 13, 2020

When writing a blog post, you’ll often find yourself wanting to quote someone or highlight a sentence used in a regular paragraph. Now, within the Gutenberg editor, you can add a quote block right off the bat, but it doesn’t provide you with as much design freedom as you’d potentially want. With Divi’s layout blocks, that’s not a problem anymore. You can easily build a particular block with Divi while still maintaining the Gutenberg environment elsewhere. In this tutorial, we’ll show you how to add inline highlighted quotes to your blog posts using Divi. You’ll be able to download the JSON file for free as well!

Let’s get to it.

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Example #1

Desktop

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Mobile

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-1 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Example #2

Desktop

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-2 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Mobile

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-3 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Download The Divi-Built Highlighted Quotes Layouts for FREE

To lay your hands on the free Divi-built highlighted quotes layouts, you will first need to download them using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Importing The Layout Block JSON

Upload Layout to Divi Library

To import the JSON file you were able to download above, go to your Divi Library in the backend of your WordPress dashboard and click on ‘Import & Export’.

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Then, select the JSON file inside your download folder and click on ‘Import Divi Builder Layouts’.

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-1 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Add New Divi Block Block Inside Gutenberg Post

Once your layout has been imported, you can go to your Gutenberg post and add a new Divi layout block.

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-2 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Import JSON File From Saved Layouts

Then, click on ‘Load From Library’, navigate to ‘Your Saved Layouts’ and select the layout to import the highlighted quotes layout to your blog post. That’s it!

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-3 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-4 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

General Steps

Use Simple & UX-Friendly Blog Post Template

Download Template

To define the style of this tutorial, we’ll use a post template of a previous post. Go to that post and download the template.

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-5 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Go to Divi Theme Builder

Then, go to the Divi Theme Builder.

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-6 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Upload Post Template

Click on the icon in the top right corner, go to the import tab and import the post template you’ve downloaded in the first step of this tutorial.

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-7 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Open Existing Gutenberg Post or Create New One

Once you’ve set a post template, you can create a new Gutenberg post or open an existing one.

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-8 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Add New Inline Divi Block

Add a new Divi block somewhere inside your post.

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-9 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Build New Layout Inside Divi Block

Once you’ve added the block, you’ll get two options. Pick the one that says ‘Build New Layout’.

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-10 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Recreate Example #1

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Section Settings

Spacing

Once you’re inside the Divi layout block editor, you’ll notice a section. To recreate the first example design, open the section settings and modify the margin values accordingly:

  • Top Margin: 50px
  • Bottom Margin: 50px
  • Left Margin: -5%
  • Right Margin: -5%

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-11 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Border

Add a left border to the section next.

  • Left Border Width: 2px
  • Left Border Color: #000000

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-12 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Animation

And use the following animation settings:

  • Animation Style: Slide
  • Animation Direction: Down
  • Animation Duration: 1500ms
  • Animation Intensity: 200%
  • Animation Starting Opacity: 100%
  • Animation Speed Curve: Ease-In-Out

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-13 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Add New Row

Column Structure

Continue by adding a new row to the section using the following column structure:

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-14 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Sizing

Open the row settings and change the sizing settings accordingly:

  • Width: 90%
  • Max Width: 100%

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-15 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Animation

Complete the row settings by changing the animation settings as follows:

  • Animation Style: Fade
  • Animation Delay: 1500ms
  • Animation Speed Curve: Ease-In-Out

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-16 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Add Text Module to Column

Insert H3 Content

The only module we need is a Text Module. Insert the H3 highlighted quote content.

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-17 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

H3 Text Settings

Complete the module settings by modifying the H3 text settings as follows:

  • H3 Font Style: Italic
  • H3 Text Size: 2.1rem (Desktop), 1.5rem (Tablet), 1.3rem (Phone)
  • H3 Line Height: 1.5em

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-18 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Recreate Example #2

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-2 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Section Settings

Spacing

Want to recreate the second design example instead? Open the section settings and modify the spacing values as follows:

  • Top Margin: 50px
  • Bottom Margin: 50px
  • Left Margin: -5%
  • Right Margin: -5%
  • Top Padding: 0px
  • Bottom Padding: 0px

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-19 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Add New Row

Column Structure

Then, add a new row using the following column structure:

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-20 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Sizing

Without adding any modules yet, open the row settings and allow the row to take up the entire section container’s width.

  • Width: 100%
  • Max Width: 100%

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-21 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Add Text Module #1 to Column

Add Content

Time to add modules, starting with a first Text Module. Add a quote to the content box.

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-22 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Text Settings

Move on to the design tab and change the text settings as follows:

  • Text Font: Playfair Display
  • Text Color: #eaeaea
  • Text Size: 500px
  • Text Line Height: 0em

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-23 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Spacing

We’re adding some top margin too.

  • Top Margin: 150px

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-24 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Animation

Then, we’ll change the animation settings.

  • Animation Style: Flip
  • Animation Direction: Center
  • Animation Delay: 500ms
  • Animation Intensity: 200%
  • Animation Speed Curve: Ease-In-Out

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-25 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Position

We’ll make sure the quote is placed in the row container’s top left corner by modifying the position settings as well.

  • Position: Absolute
  • Location: Top Left

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-26 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Add Text Module #2 to Column

Add H3 Content

On to the next Text Module. Add the H3 highlighted quote content to the content box.

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-27 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

H3 Text Settings

Move on to the module’s design tab and change the H3 text settings as follows:

  • Heading 3 Font Style: Italic
  • Heading 3 Text Size: 2.6rem (Desktop), 1.7rem (Tablet), 1.3rem (Phone)
  • Heading 3 Line Height: 1.4em

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-28 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Spacing

Add some custom margin values across different screen sizes too.

  • Top Margin: 150px
  • Bottom Margin: 150px
  • Left Margin: 150px (Desktop), 70px (Tablet), 30px (Phone)
  • Right Margin: 150px (Desktop), 70px (Tablet), 30px (Phone)

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-29 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Animation

And complete the module settings by changing the animation settings as follows:

  • Animation Style: Fade
  • Animation Delay: 2000ms
  • Animation Speed Curve: Ease-In-Out

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-30 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Add Text Module #3 to Column

Add Content

On to the next and last module, which is another Text Module. Add a quote symbol to the content box.

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-31 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Text Settings

Move on to the module’s design tab and change the text settings.

  • Text Font: Playfair Display
  • Text Color: #eaeaea
  • Text Size: 500px
  • Text Line Height: 0em
  • Text Alignment: Right

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-32 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Animation

Use the following animation settings next:

  • Animation Style: Flip
  • Animation Direction: Center
  • Animation Delay: 1000ms
  • Animation Intensity: 200%
  • Animation Speed Curve: Ease-In-Out

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-33 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Position

And make sure the quote is placed in the row container’s bottom right corner.

  • Position: Absolute
  • Location: Bottom Right

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-34 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Save Quote Layouts to Divi Library for Reuse

Once you’ve completed the quote layout of your choice, make sure you save it to your Divi Library so you can use it for future posts as well!

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-35 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.

Example #1

Desktop

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Mobile

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-1 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Example #2

Desktop

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-2 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Mobile

how-to-add-divi-built-highlighted-quotes-throughout-your-gutenberg-post-3 How to Add Divi-Built Highlighted Quotes Throughout Your Gutenberg Post

Final Thoughts

In this post, we’ve shown you how to get creative with Divi’s layout blocks. More specifically, we’ve shown you how to add animated highlighted quotes throughout your Gutenberg blog post. The design possibilities are endless, but we’ve provided you with two examples you can get started with. You were able to download the JSON files for free as well! If you have any questions or suggestions, feel free to leave a comment in the comment section below.

If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.


Source

Share this article:
 

eHost managed wordpress hosting

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

SHARE IT HERE:

Related Posts

How to Add Slide-In Product Info to Your Divi Product Page

How to Add Slide-In Product Info to Your Divi Product Page

The way you design your product pages says a lot about your shop in general. Your product page’s design is an important part of the purchase experience, so going the extra mile is often worth it. If you’re looking to create a product page that is a bit more...

Divi Ghoster 4.0 – Changes & New Features

Divi Ghoster 4.0 – Changes & New Features

In our last email, we announced that the new Divi Ghoster was coming soon. Divi Ghoster makes it easy for Divi (and Extra!) users to completely rebrand the theme without any coding. This is great news for developers who build client sites! And today, we’re excited to...

Get ALL Your SEO, WordPress & Divi News

Join Our Daily Roundup

SEO News and More

SEO News and More

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.