Author: Donjete Vuniqi
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.
Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.
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.
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’.
Then, select the JSON file inside your download folder and click on ‘Import Divi Builder Layouts’.
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.
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!
Use Simple & UX-Friendly Blog Post 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.
Go to Divi Theme Builder
Then, go to the Divi Theme Builder.
Upload Post Template
Click on the icon in the top right corner, go to the import tab and import