animated block on gutenberg

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.

animated block on gutenberg

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.

Leave a comment

echo "";