When you streamline the way you create blog posts on your Website, chances are you want to include an attractive CTA somewhere in your article. Now with Divi's new Gutenberg Layout Block integration, you can easily add a new Divi-built block anywhere in your Gutenberg blog post. This allows you to keep the contents overall blog post in the Gutenberg environment, while continuing to create a custom Divi CTA using Divi-s built-in options. The 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 will also share the Divi CTA layout block JSON file for free!
Let's go.
Possible Outcome
Before we dive into the tutorial, let's take a look at the result on different screen sizes.
Importing the JSON layout block
Download the layout in the Divi library
To import the JSON file that you were able to download above, go to your Divi library in the backend of your WordPress dashboard and click on 'Import and export'.
Then select the JSON file in your download folder and click on "Import Divi Builder Layouts".
Add a new Divi Block inside Gutenberg
Once your layout has been imported, you can access your Gutenberg message and add a new Divi layout block.
Import a JSON file from saved presentations
Then click on "Load from library", go to "Your saved layouts" and select the layout to import the Divi CTA layout block into your blog post. That's it!
Let's start recreating!
Use the publishing template for the third theme pack
Use the Third Theme Builder Pack
It's time to start creating from scratch! First of all, the design that we are recreating corresponds to the third theme creation pack which was published on the Divi blog. Go to the article and download the JSON files for this theme creation pack.
Go to Divi Theme Builder
Once you have downloaded the third theme creation pack, you can access the Divi Theme Builder.
Download the publication template
Download the Theme Builder Pack post template by clicking the icon in the upper right corner.
Then select the post template and click on "Import Divi Theme Builder templates". Make sure to save the changes to the theme builder as well. At this point, we've assigned the blog post template from the Theme Building Pack to all of our posts.
Open an existing Gutenberg publication or create a new one
The next step is to add the Divi CTA layout block to our Gutenberg post. To do this, open an existing article or create a new one.
Add a new Divi block online
Once inside the message, you can add a new Divi layout block.
Create a new layout inside the Divi block
Then you will have two options. Select the option "Create a new layout".
Section settings
Spacing
Once inside the Divi layout block editor, you will notice a section. Open this section and add custom margin values to create space around the section container.
- Upper margin: 50px
- Bottom margin: 50px
- Left margin: -10%
- Right margin: -10%
Add line # 1
Column structure
Continue adding a new row using the following column structure:
sizing
Without adding more modules, open the line parameters and increase the width and maximum width.
- Width: 100%
- Max width: 100%
Add Separator # 1 to the column
Visibility
It's time to add modules, starting with a separation module. Make sure the “Show Separator” option is enabled.
- Show separator: Yes
Line
Switch to the module design tab and change the row settings as follows:
- Line color: # fc526e
- Line style: solid
- Line position: high
sizing
Also change the sizing parameters.
- Divider weight: 3px
- Width: 30%
- Alignment of the module: right
- Height: 3px
Animation
And change the animation settings accordingly:
- Animation Style: Slide
- Animation direction: left
- Animation duration: 2000ms
- Animation delay: 500 ms
- Animation intensity: 100%
- Animation start opacity: 0%
Add divider # 2 to column
Visibility
Let's move on to the next separation module. Again, make sure the “Show Separator” option is turned on.
- Show separator: Yes
Line
Then go to the module design tab and change the row settings as follows:
- Line color: # e1e3e8
- Line style: solid
- Line position: high
sizing
Then modify the module sizing parameters.
- Divider weight: 3px
- Height: 3px
Spacing
Also add custom spacing values.
- Left margin: 10%
- Right margin: -20%
Animation
And complete the module parameters by changing the animation parameters as follows:
- Animation Style: Slide
- Animation direction: left
- Animation duration: 2000ms
- Animation delay: 500 ms
- Animation intensity: 100%
- Animation start opacity: 100%
You can add as many separators as you want to tweak your animation.
Add a line # 2
Column structure
Add another row to the section using the following column structure:
sizing
Without adding more modules, open the line parameters and modify the sizing parameters as follows:
- Use a custom gutter width: Yes
- Gutter width: 1
- Width: 70%
- Line alignment: center
Add text module # 1 to column
Add H2 content
Next, add a first text module to the row column with contents H2 of your choice.
H2 text settings
Switch to the design tab and change the H2 text settings accordingly:
- Text color of item 2: # fc526e
- Header 2 Text size: 28px
Spacing
Then add custom fill values.
- Upper padding: 50px
- Bottom padding: 50px
- Left padding: 50px
Border
We also use a left border.
- Left border width: 2px
- Left border color: # fc526e
Animation
And complete the module parameters by adding a personalized animation.
- Animation Style: Flip
- Animation direction: Center
- Animation delay: 1500 ms
Add text module # 2 to the column
Add content
Add another text module just below the previous one with contents of your choice.
Spacing
Move to the module design tab and change the padding values accordingly:
- Upper padding: 50px
- Bottom padding: 50px
- Right padding: 50px
border
Then add an upper and right border.
- Top and right border: 2 pixels
- Color of upper and right border: # fc526e
Animation
And complete the module parameters by changing the animation parameters as follows:
- Animation Style: Flip
- Animation direction: Center
- Animation delay: 1700 ms
Add a button module to the column
Add a copy
The next and final module we need in this row is a button module. Add a copy of your choice.
Button settings
Switch to the module design tab and change the button settings as follows:
- Use custom styles for the button: Yes
- Button text size: 13px
- Button text color: #ffffff
- Color gradient 1: # ff5b84
- Color gradient 2: # f94857
- Gradient type: linear
- Gradient direction: 165deg
- Button border width: 0px
- Button border radius: 0px
- Button letter spacing: 1px
- Button font: Montserrat
- Button font weight: Semi bold
- Button font style: uppercase
Spacing
Then add custom upper and lower padding.
- Upper padding: 16px
- Bottom padding: 16px
Animation
And complete the module parameters by adding the following animation:
- Animation Style: Flip
- Animation delay: 1900 ms
Clone line # 1 and place it at the bottom of the section
Once you've finished the first and second lines, you can clone the first line and place the duplicate at the bottom of the section.
Change the order of separators
Change places for the first and last separation modules.
Latest Thoughts
In this article, we've shown you how to take advantage of Divi's new Gutenberg integration and add an inline, animated Divi CTA pitch block to your Gutenberg blog post. This is a great way to highlight your Call to Action of choice while visiteurs read the content of your blog post.
