Animated block on Gutenberg: when you streamline the way you create blog posts on your website, there’s a good chance you want to include an engaging CTA somewhere in your post. 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 overall content of the blog post in the Gutenberg environment while continuing to create a personalized Divi CTA using Divi-s built-in options. The best of both worlds! In this tutorial, we’ll show you how to add an animated online Divi CTA layout block to your Gutenberg post.
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 go to your Gutenberg post 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!
Use the post template from 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 recreate corresponds to the third theme creation pack that was published on the Divi blog. Go to the article and download the JSON files for this theme builder pack.
Go to Divi Theme Builder
Once you have downloaded the third theme creation pack, you can access the Divi Theme Builder.
Download the post 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 Builder Pack to all of our posts.
Open an existing Gutenberg post 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 Parameters
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.
- Top margin: 50px
- Bottom margin: 50px
- Left margin: -10%
- Right margin: -10%
Add row # 1
Column structure
Continue by adding a new row using the column structure.
Sizing
Without adding any modules yet, open the row settings 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: top
Sizing
Also, change the sizing parameters.
- Divider Weight: 3px
- Width: 30%
- Module alignment: 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 divisor # 2 to the 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: top
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 settings by changing the animation settings 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 polish your animation.
Add row # 2
Column structure
Add another row to the section using the column structure:
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%
- Line alignment: center
Add text module # 1 to column
Add H2 content
Then add a first text module to the column of the row with the H2 content of your choice.
H2 text parameters
Switch to the Design tab and change the H2 text settings accordingly:
- Text color of heading 2: # fc526e
- Header 2 Text size: 28px
Spacing
Then add custom padding values.
- Top padding: 50px
- Bottom padding: 50px
- Left padding: 50px
Frontier
We also use a left border.
- Left border width: 2px
- Left border color: # fc526e
Animation
And complete the module settings by adding custom animation.
- Animation Style: Flip
- Animation direction: Center
- Animation delay: 1500 ms
Add text module # 2 to column
Add content
Add another text module just below the previous one with content of your choice.
Spacing
Move to the module’s design tab and change the padding values accordingly:
- Top padding: 50px
- Bottom padding: 50px
- Right padding: 50px
Border
Then add a top and right border.
- Top and right border: 2 pixels
- Top and right border-color: # fc526e
Animation
And complete the module settings by changing the animation settings 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
- Gradient color 1: # ff5b84
- Gradient color 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 top and bottom padding.
- Top padding: 16px
- Bottom padding: 16px
Animation
And complete the module parameters by adding the following animation:
- Animation Style: Flip
- Animation delay: 1900 ms
Clone row # 1 and place it at the bottom of the section
Once you have completed the first and second row, you can clone the first row and place the duplicate at the bottom of the section.
Read more: How to add subscription forms on Gutenberg with Divi
Change the order of separators
Change places for the first and last separation modules
Final thoughts for the animated block on Gutenberg
In this article, we have shown you how to take advantage of Divi’s new Gutenberg integration and add an online and animated Divi CTA presentation block to your Gutenberg blog post. This is a great way to highlight your Call to Action of choice while visitors are reading your blog post content.
For website maintenance service contact us.