How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

February 4, 2020

When you’re streamlining the way you create blog posts on your website, chances are high you’ll want to include an attractive CTA somewhere inside your post. Now, with Divi’s new Gutenberg layout block integration, you can easily add a new Divi-built block anywhere inside your Gutenberg blog post. This allows you to keep the overall blog post content inside the Gutenberg environment, while still building a custom Divi CTA using Divi-s built-in options. Best of both worlds! In this tutorial, we’ll show you how to add an inline & animated Divi CTA layout block to your Gutenberg post. We’ll share the Divi CTA layout block’s 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.

Desktop

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Mobile

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-1 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Download The Inline & Animated Divi CTA Layout Block for FREE

To lay your hands on the free hero sections, 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-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

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

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-1 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog 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-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-2 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog 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 Divi CTA Layout Block to your blog post. That’s it!

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-3 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-4 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Let’s Start Recreating!

Use Third Theme Builder Pack Post Template

Download Third Theme Builder Pack

Time to start creating from scratch! First of all, the design we’re recreating matches the third theme builder pack that was released on the Divi blog. Go to the post and download the JSON files of this theme builder pack.

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-5 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Go to Divi Theme Builder

Once you’ve downloaded the third theme builder pack, you can go to the Divi Theme Builder.

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-6 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Upload Post Template

Upload the theme builder pack’s post template by clicking on the icon in the top right corner.

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-7 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Then, select the post template and click on ‘Import Divi Theme Builder Templates’. Make sure you save the theme builder changes as well. At this point, we’ve assigned the theme builder pack’s blog post template to all our posts.

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-8 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Open Existing Gutenberg Post or Create New One

The next step is adding the Divi CTA layout block to our Gutenberg post. To do that, open an existing post or create a new one.

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-9 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Add New Inline Divi Block

Once inside the post, you’ll be able to add a new Divi layout block.

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-10 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Build New Layout Inside Divi Block

Then, you’ll get two options. Select the ‘Build New Layout’ option.

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-11 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Section Settings

Spacing

Once inside the Divi layout block editor, you’ll notice a section. Open that section and add some custom margin values to create space around the section container.

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

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-12 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Add Row #1

Column Structure

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

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-13 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Sizing

Without adding any modules yet, open the row settings and increase the width and max width.

  • Width: 100%
  • Max Width: 100%

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-14 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Add Divider #1 to Column

Visibility

Time to add modules, starting with a Divider Module. Make sure the ‘Show Divider’ option is enabled.

  • Show Divider: Yes

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-15 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Line

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

  • Line Color: #fc526e
  • Line Style: Solid
  • Line Position: Top

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-16 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Sizing

Modify the sizing settings too.

  • Divider Weight: 3px
  • Width: 30%
  • Module Alignment: Right
  • Height: 3px

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-17 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Animation

And modify the animation settings accordingly:

  • Animation Style: Slide
  • Animation Direction: Left
  • Animation Duration: 2000ms
  • Animation Delay: 500ms
  • Animation Intensity: 100%
  • Animation Starting Opacity: 100%

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-18 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Add Divider #2 to Column

Visibility

On to the next Divider Module. Again, make sure the ‘Show Divider’ option is enabled.

  • Show Divider: Yes

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-19 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Line

Then, go to the module’s design tab and change the line settings as follows:

  • Line Color: #e1e3e8
  • Line Style: Solid
  • Line Position: Top

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-20 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Sizing

Modify the module’s sizing settings next.

  • Divider Weight: 3px
  • Height: 3px

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-21 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Spacing

Add some custom spacing values too.

  • Left Margin: 10%
  • Right Margin: -20%

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-22 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Animation

And complete the module’s settings by modifying the animation settings as follows:

  • Animation Style: Slide
  • Animation Direction: Left
  • Animation Duration: 2000ms
  • Animation Delay: 500ms
  • Animation Intensity: 100%
  • Animation Starting Opacity: 100%

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-23 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Add Divider #3 to Column

Visibility

On to the next and last Divider Module we need in this row. Make sure the ‘Show Divider’ option is enabled.

  • Show Divider: Yes

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-24 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Line

Then, go to the design tab and change the line settings as follows:

  • Line Color: #fc526e
  • Line Style: Solid
  • Line Position: Top

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-25 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Sizing

Modify the module’s sizing too.

  • Divider Weight: 3px
  • Height: 3px

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-26 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Spacing

Along with the spacing settings.

  • Bottom Margin: 100px
  • Left Margin: -20%
  • Right Margin: 10%

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-27 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Animation

And complete the module’s settings by changing the animation settings.

  • Animation Style: Slide
  • Animation Direction: Right
  • Animation Duration: 2000ms
  • Animation Intensity: 100%
  • Animation Starting Opacity: 100%

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-28 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Add Row #2

Column Structure

Add another row to the section using the following column structure:

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-29 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Sizing

Without adding any modules yet, open the row settings and change the sizing settings as follows:

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Width: 70%
  • Row Alignment: Center

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-30 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Add Text Module #1 to Column

Add H2 Content

Then, add a first Text Module to the row’s column with some H2 content of your choice.

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-31 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

H2 Text Settings

Move on to the design tab and modify the H2 text settings accordingly:

  • Heading 2 Text Color: #fc526e
  • Heading 2 Text Size: 28px

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-32 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Spacing

Add some custom padding values next.

  • Top Padding: 50px
  • Bottom Padding: 50px
  • Left Padding: 50px

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-33 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Border

We’re using a left border too.

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

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-34 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Animation

And complete the module’s settings by adding a custom animation.

  • Animation Style: Flip
  • Animation Direction: Center
  • Animation Delay: 1500ms

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-35 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Add Text Module #2 to Column

Add Content

Add another Text Module right below the previous one with some content of your choice.

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-36 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Spacing

Move on the module’s design tab and modify the padding values accordingly:

  • Top Padding: 50px
  • Bottom Padding: 50px
  • Right Padding: 50px

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-37 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Border

Add a top and right border next.

  • Top & Right Border: 2px
  • Top & Right Border Color: #fc526e

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-38 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Animation

And complete the module’s settings by modifying the animation settings as follows:

  • Animation Style: Flip
  • Animation Direction: Center
  • Animation Delay: 1700ms

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-39 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Add Button Module to Column

Add Copy

The next and last module we need in this row is a Button Module. Add some copy of your choice.

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-40 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Button Settings

Move on to the module’s design tab and modify the button settings as follows:

  • Use Custom Styles For Button: Yes
  • Button Text Size: 13px
  • Button Text Color: #ffffff
  • Gradient Color 1: #ff5b84
  • Gradient Color 2: #f94857
  • Gradient Type: Linear
  • Gradient Direction: 165deg
  • Button Border Width: 0px

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-41 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

  • Button Border Radius: 0px
  • Button Letter Spacing: 1px
  • Button Font: Montserrat
  • Button Font Weight: Semi Bold
  • Button Font Style: Uppercase

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-42 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Spacing

Add some custom top and bottom padding next.

  • Top Padding: 16px
  • Bottom Padding: 16px

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-43 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Animation

And complete the module’s settings by adding the following animation:

  • Animation Style: Flip
  • Animation Delay: 1900ms

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-44 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Clone Row #1 & Place at Bottom of Section

Once you’ve completed the first and second row, you can clone the first row and place the duplicate at the bottom of the section.

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-45 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Change Divider Order

Switch places for the first and last Divider Modules.

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-46 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Change Divider #1 Spacing

Then, open the first Divider Module in your row and modify the spacing settings.

  • Top Margin: 100px
  • Left Margin: 10%
  • Right Margin: -20%

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-47 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Change Divider #2 Spacing

Change the second Divider Module’s spacing settings too.

  • Left Margin: -20%
  • Right Margin: 10%

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-48 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Change Divider #3 Sizing

Then, open the third Divider Module and use left module alignment in the sizing settings.

  • Module Alignment: Left

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-49 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Remove Divider #3 Animation Delay

Remove the third Divider Module’s animation delay as well and you’re set! Once you’ve completed the Divi CTA layout block, make sure you save the changes and update your post.

  • Animation Delay: 0ms

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-50 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Preview

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

Desktop

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Mobile

how-to-add-an-inline-animated-divi-cta-layout-block-to-your-gutenberg-blog-post-1 How to Add an Inline & Animated Divi CTA Layout Block to Your Gutenberg Blog Post

Final Thoughts

In this post, we’ve shown you how to take advantage of Divi’s new Gutenberg integration and add an inline & animated Divi CTA layout block to your Gutenberg blog post. This is a great way to highlight your CTA of choice while visitors are reading your blog post content. You were able to download the Divi CTA layout block’s JSON file for free as well! If you have any questions, 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 Stack and Animate Text using Divi Scroll Effects

How to Stack and Animate Text using Divi Scroll Effects

Using Divi’s scroll effects to stack and animate text on scroll is a unique design technique that can be used to bring life to your page headings. The trick is to use Divi’s position options to stack letters absolutely so that they sit directly on top of each other....

How to Hire a Virtual Assistant for Your Business

How to Hire a Virtual Assistant for Your Business

Busy professionals can always use more hours in their day, and deciding to hire a virtual assistant (VA) is one of the best and most recommended ways to create that time. VAs provide just about every type of support service you can think of that can be performed...

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.