Adding animations to design elements on your page can definitely help you increase engagement. There are many animation options available in Divi’s Visual Builder and they’re quite straightforward to use. But you can also get creative with these animations and use them in a unique way. In this post, we’ll handle three examples of colliding animations which we’ll recreate step by step, using Divi’s built-in options only.

Let’s get to it!

Preview

Before we dive into the tutorial, let’s take a quick look at the three examples we’ll recreate within this tutorial.

Example #1: Colliding Text

how-to-apply-colliding-animations-to-design-elements-with-divi How to Apply Colliding Animations to Design Elements with Divi

Example #2: Colliding Dividers

how-to-apply-colliding-animations-to-design-elements-with-divi-1 How to Apply Colliding Animations to Design Elements with Divi

Example #3: Colliding Grid

how-to-apply-colliding-animations-to-design-elements-with-divi-2 How to Apply Colliding Animations to Design Elements with Divi

Hover

how-to-apply-colliding-animations-to-design-elements-with-divi-3 How to Apply Colliding Animations to Design Elements with Divi

Recreate Example #1: Colliding Text

how-to-apply-colliding-animations-to-design-elements-with-divi How to Apply Colliding Animations to Design Elements with Divi

Add Specialty Section

Structure

Let’s get started with the first example! Open a new or existing page and add a new specialty section using the following structure:

how-to-apply-colliding-animations-to-design-elements-with-divi How to Apply Colliding Animations to Design Elements with Divi

Sizing

Without adding any modules or row, open the section settings and enable the ‘Make This Section Fullwidth’ option in the sizing settings.

how-to-apply-colliding-animations-to-design-elements-with-divi-1 How to Apply Colliding Animations to Design Elements with Divi

Add Row #1

Column Structure

Continue by adding a row to the specialty section:

how-to-apply-colliding-animations-to-design-elements-with-divi-2 How to Apply Colliding Animations to Design Elements with Divi

Sizing

Open the row settings and make some changes to the sizing settings.

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

how-to-apply-colliding-animations-to-design-elements-with-divi-3 How to Apply Colliding Animations to Design Elements with Divi

Spacing

Change the custom padding values in the spacing settings as well.

  • Top Padding: 44px
  • Bottom Padding: 0px

how-to-apply-colliding-animations-to-design-elements-with-divi-4 How to Apply Colliding Animations to Design Elements with Divi

Add Text Module to Column 1

Add Content

Continue by adding a Text Module to the first column of the row and add some content.

how-to-apply-colliding-animations-to-design-elements-with-divi-5 How to Apply Colliding Animations to Design Elements with Divi

Heading Text Settings

Change the heading text settings next.

  • Heading Font: Montserrat
  • Heading Font Weight: Light
  • Heading Text Size: 4.4vw (Desktop), 8.2vw (Tablet), 40px (Phone)
  • Heading Line Height: 0.7em

how-to-apply-colliding-animations-to-design-elements-with-divi-6 How to Apply Colliding Animations to Design Elements with Divi

Add Divider Module to Column 1

Visibility

The second module needed in column 1 is a Divider Module. Make sure the divider shows up by enabling the ‘Show Divider’ option.

  • Show Divider: Yes

how-to-apply-colliding-animations-to-design-elements-with-divi-7 How to Apply Colliding Animations to Design Elements with Divi

Color

Move on to the design tab and change the divider color.

  • Color: #000000

how-to-apply-colliding-animations-to-design-elements-with-divi-8 How to Apply Colliding Animations to Design Elements with Divi

Sizing

Decrease the width of the divider as well.

  • Width: 91%

how-to-apply-colliding-animations-to-design-elements-with-divi-9 How to Apply Colliding Animations to Design Elements with Divi

Spacing

And add some top margin to create space between the Divider Module and the Text Module.

  • Top Margin: 30px

how-to-apply-colliding-animations-to-design-elements-with-divi-10 How to Apply Colliding Animations to Design Elements with Divi

Animation

Lastly, add a subtle animation to the Divider Module.

  • Animation Style: Slide
  • Animation Direction: Left

how-to-apply-colliding-animations-to-design-elements-with-divi-11 How to Apply Colliding Animations to Design Elements with Divi

Add Text Module to Column 2

Add Content

Move on to the second column and add the second Text Module with some content of choice.

how-to-apply-colliding-animations-to-design-elements-with-divi-12 How to Apply Colliding Animations to Design Elements with Divi

Heading Text Settings

Change the heading text settings next.

  • Heading Font: Montserrat
  • Heading Font Weight: Light
  • Heading Text Color: #3f46ff
  • Heading Text Size: 3.8vw (Desktop), 6.5vw (Tablet), 40px (Phone)
  • Heading Line Height: 0.8em

how-to-apply-colliding-animations-to-design-elements-with-divi-13 How to Apply Colliding Animations to Design Elements with Divi

Animation

And add an animation to this module as well.

  • Animation Style: Slide
  • Animation Direction: Left
  • Animation Delay: 600ms
  • Animation Intensity: 10%

how-to-apply-colliding-animations-to-design-elements-with-divi-14 How to Apply Colliding Animations to Design Elements with Divi

Add Row #2

Column Structure

Continue by adding another row to the section using the following column structure:

how-to-apply-colliding-animations-to-design-elements-with-divi-15 How to Apply Colliding Animations to Design Elements with Divi

Add Remaining Modules

Add the other modules you want to show up in this new row and modify them to your needs.

how-to-apply-colliding-animations-to-design-elements-with-divi-16 How to Apply Colliding Animations to Design Elements with Divi

Recreate Example #2: Colliding Dividers

how-to-apply-colliding-animations-to-design-elements-with-divi-1 How to Apply Colliding Animations to Design Elements with Divi

Add Specialty Section

Structure

On to the next example! Add a new specialty section using the following structure:

how-to-apply-colliding-animations-to-design-elements-with-divi-17 How to Apply Colliding Animations to Design Elements with Divi

Sizing

Without adding any rows or modules, open the section settings and enable the ‘Make This Section Fullwidth’ option.

  • Make This Section Fullwidth: Yes

how-to-apply-colliding-animations-to-design-elements-with-divi-18 How to Apply Colliding Animations to Design Elements with Divi

Add Row #1

Column Structure

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

how-to-apply-colliding-animations-to-design-elements-with-divi-19 How to Apply Colliding Animations to Design Elements with Divi

Spacing

Open the row settings and modify the custom padding settings.

  • Top Padding: 44px
  • Bottom Padding: 0px

how-to-apply-colliding-animations-to-design-elements-with-divi-20 How to Apply Colliding Animations to Design Elements with Divi

Add Text Module

Add Content

Next, add a Text Module to the row with some content of choice.

how-to-apply-colliding-animations-to-design-elements-with-divi-21 How to Apply Colliding Animations to Design Elements with Divi

Heading Text Settings

Move on to the design tab and change the heading text settings.

  • Heading Font: Montserrat
  • Heading Font Weight: Light
  • Heading Text Size: 70px (Desktop), 50px (Tablet), 40px (Phone)
  • Heading Line Height: 0.8em

how-to-apply-colliding-animations-to-design-elements-with-divi-22 How to Apply Colliding Animations to Design Elements with Divi

Add Row #2

Column Structure

Continue by adding another row using the following column structure:

how-to-apply-colliding-animations-to-design-elements-with-divi-23 How to Apply Colliding Animations to Design Elements with Divi

Sizing

Without adding any modules yet, open the row settings and modify the sizing settings.

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Width: 53% (Desktop), 100% (Tablet & Phone)

how-to-apply-colliding-animations-to-design-elements-with-divi-24 How to Apply Colliding Animations to Design Elements with Divi

Spacing

Change the custom padding values as well.

  • Top Padding: 50px
  • Bottom Padding: 0px

how-to-apply-colliding-animations-to-design-elements-with-divi-25 How to Apply Colliding Animations to Design Elements with Divi

Add Divider Module to Column 1

Visibility

Once you’re done modifying the row settings, go ahead and add a Divider Module to the first column and make sure the divider shows up by enabling the ‘Show Divider’ option.

  • Show Divider: Yes

how-to-apply-colliding-animations-to-design-elements-with-divi-26 How to Apply Colliding Animations to Design Elements with Divi

Color

Change the divider color next.

  • Divider Color: #3f46ff

how-to-apply-colliding-animations-to-design-elements-with-divi-27 How to Apply Colliding Animations to Design Elements with Divi

Styles

And change the divider style in the styles settings.

  • Divider Style: Double

how-to-apply-colliding-animations-to-design-elements-with-divi-28 How to Apply Colliding Animations to Design Elements with Divi

Sizing

Increase the divider weight in the sizing settings too.

  • Divider Weight: 8px

how-to-apply-colliding-animations-to-design-elements-with-divi-29 How to Apply Colliding Animations to Design Elements with Divi

Animation

Lastly, add an animation to the Divider Module.

  • Animation Style: Slide
  • Animation Direction: Right

how-to-apply-colliding-animations-to-design-elements-with-divi-30 How to Apply Colliding Animations to Design Elements with Divi

Clone Divider Module & Place in Column 2

Once you’re done modifying the Divider Module settings, go ahead and clone the module. Place the duplicate in the second column of the row.

how-to-apply-colliding-animations-to-design-elements-with-divi-31 How to Apply Colliding Animations to Design Elements with Divi

Change Animation

To create a colliding effect, change the animation direction of the duplicate Divider Module.

  • Animation Style: Slide
  • Animation Direction: Left

how-to-apply-colliding-animations-to-design-elements-with-divi-32 How to Apply Colliding Animations to Design Elements with Divi

Add Row #3

Column Structure

Continue by adding another row using the following column structure:

how-to-apply-colliding-animations-to-design-elements-with-divi-33 How to Apply Colliding Animations to Design Elements with Divi

Add Remaining Modules

And add as many modules you want to finish the section design.

how-to-apply-colliding-animations-to-design-elements-with-divi-34 How to Apply Colliding Animations to Design Elements with Divi

Recreate Example #3: Colliding Grid

how-to-apply-colliding-animations-to-design-elements-with-divi-2 How to Apply Colliding Animations to Design Elements with Divi

Add New Section

Spacing

On to the next and last example! Add a regular section and open the settings. Go to the spacing settings add some custom padding values:

  • Top Padding: 300px
  • Bottom Padding: 200px

how-to-apply-colliding-animations-to-design-elements-with-divi-35 How to Apply Colliding Animations to Design Elements with Divi

Add Row #1

Column Structure

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

how-to-apply-colliding-animations-to-design-elements-with-divi-36 How to Apply Colliding Animations to Design Elements with Divi

Add Image Module to Column

Upload Shaped Image Overlay

Save the following shaped image overlay to your desktop by right-clicking:

how-to-apply-colliding-animations-to-design-elements-with-divi How to Apply Colliding Animations to Design Elements with Divi

Once you’ve saved the shaped image overlay, go back to your Divi website and add an Image Module to the row. Upload the shaped image overlay file that you can find in your download folder.

how-to-apply-colliding-animations-to-design-elements-with-divi-37 How to Apply Colliding Animations to Design Elements with Divi

Gradient Background

Next, add a gradient background to the module.

  • Color 1: #aa2bff
  • Color 2: #09f7eb

how-to-apply-colliding-animations-to-design-elements-with-divi-38 How to Apply Colliding Animations to Design Elements with Divi

Alignment

Change the image alignment as well.

  • Image Alignment: Center

how-to-apply-colliding-animations-to-design-elements-with-divi-39 How to Apply Colliding Animations to Design Elements with Divi

Sizing

And enable the ‘Force Fullwidth’ option in the sizing settings.

  • Force Fullwidth: Yes

how-to-apply-colliding-animations-to-design-elements-with-divi-40 How to Apply Colliding Animations to Design Elements with Divi

Spacing

Add some custom margin to the module too.

  • Left Margin: 200px
  • Right Margin: 200px

how-to-apply-colliding-animations-to-design-elements-with-divi-41 How to Apply Colliding Animations to Design Elements with Divi

Animation

Lastly, add an animation to the module.

  • Animation Style: Zoom
  • Animation Direction: Center
  • Animation Duration: 3000ms
  • Animation Intensity: 100%

how-to-apply-colliding-animations-to-design-elements-with-divi-42 How to Apply Colliding Animations to Design Elements with Divi

Add Row #2

Column Structure

On to the second row. Use the following column structure:

how-to-apply-colliding-animations-to-design-elements-with-divi-43 How to Apply Colliding Animations to Design Elements with Divi

Sizing

Without adding any modules yet, open the row settings and make some changes to the sizing settings.

  • Use Custom Width: Yes
  • Unit: PX
  • Custom Width: 944px
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

how-to-apply-colliding-animations-to-design-elements-with-divi-44 How to Apply Colliding Animations to Design Elements with Divi

Add Blurb Module to Column 1

Add Content

Continue by adding a Blurb Module to the first column. Enter some content of choice.

how-to-apply-colliding-animations-to-design-elements-with-divi-45 How to Apply Colliding Animations to Design Elements with Divi

Icon

Select an icon next.

how-to-apply-colliding-animations-to-design-elements-with-divi-46 How to Apply Colliding Animations to Design Elements with Divi

Background Color

And add a background color to the module as well.

  • Background Color: rgba(255,255,255,0.83)

how-to-apply-colliding-animations-to-design-elements-with-divi-47 How to Apply Colliding Animations to Design Elements with Divi

Icon Settings

Move on to the design tab and change the icon settings.

  • Icon Color: #000000
  • Icon Placement: Top
  • Use Icon Font Size: Yes
  • Icon Font Size: 73px

how-to-apply-colliding-animations-to-design-elements-with-divi-48 How to Apply Colliding Animations to Design Elements with Divi

Title Text Settings

Modify the title text settings as well.

  • Title Font: Open Sans
  • Title Font Weight: Semi Bold
  • Title Text Alignment: Center
  • Title Text Size: 15px
  • Title Letter Spacing: -1px
  • Title Line Height: 1.8em

how-to-apply-colliding-animations-to-design-elements-with-divi-49 How to Apply Colliding Animations to Design Elements with Divi

Sizing

And decrease the content width in the sizing settings.

  • Content Width: 183px

how-to-apply-colliding-animations-to-design-elements-with-divi-50 How to Apply Colliding Animations to Design Elements with Divi

Spacing

We’ll add some custom top and bottom padding too.

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

how-to-apply-colliding-animations-to-design-elements-with-divi-51 How to Apply Colliding Animations to Design Elements with Divi

Box Shadow

Continue by giving the Blurb Module a subtle box shadow.

  • Box Shadow Blur Strength: 80px
  • Shadow Color: rgba(0,0,0,0.3)

how-to-apply-colliding-animations-to-design-elements-with-divi-52 How to Apply Colliding Animations to Design Elements with Divi

Transitions

And increase the transition duration in the advanced tab.

  • Transition Duration: 600ms

how-to-apply-colliding-animations-to-design-elements-with-divi-53 How to Apply Colliding Animations to Design Elements with Divi

Clone Blurb Module 8 Times & Place 3 Duplicates in Each Remaining Column

Now, once you’re done modifying the first Blurb Module, you can go ahead and clone it 8 times. Place three duplicates in the second column and three in the third. In the next part of this tutorial, we’ll make unique changes to each one of the Blurb Modules. To do that, we’ll follow the numbering below:

how-to-apply-colliding-animations-to-design-elements-with-divi-54 How to Apply Colliding Animations to Design Elements with Divi

Modify Blurb Module #1

Spacing

Open the first Blurb Module and add some negative top margin.

  • Top Margin: -340px (Desktop), 0px (Tablet & Phone)

how-to-apply-colliding-animations-to-design-elements-with-divi-55 How to Apply Colliding Animations to Design Elements with Divi

Hover Spacing

Change the margin values on hover.

  • Top Margin: -380px
  • Bottom Margin: 40px
  • Left Margin: -40px
  • Right Margin: 40px

how-to-apply-colliding-animations-to-design-elements-with-divi-56 How to Apply Colliding Animations to Design Elements with Divi

Rounded Corners

Continue by adding ’30px’ to the top left corner of the module.

how-to-apply-colliding-animations-to-design-elements-with-divi-57 How to Apply Colliding Animations to Design Elements with Divi

Animation

And add an animation.

  • Animation Style: Slide
  • Animation Direction: Left
  • Animation Delay: 200ms

how-to-apply-colliding-animations-to-design-elements-with-divi-58 How to Apply Colliding Animations to Design Elements with Divi

Modify Blurb Module #2

Background Color

Open the second Blurb Module and change the background color.

  • Background Color: rgba(255,255,255,0.93)

how-to-apply-colliding-animations-to-design-elements-with-divi-59 How to Apply Colliding Animations to Design Elements with Divi

Spacing

Continue by adding some negative top margin to the module.

  • Top Margin: -340px (Desktop), 0px (Tablet & Phone)

how-to-apply-colliding-animations-to-design-elements-with-divi-60 How to Apply Colliding Animations to Design Elements with Divi

Hover Spacing

Change these margin values on hover.

  • Top Margin: -380px
  • Bottom Margin: 40px

how-to-apply-colliding-animations-to-design-elements-with-divi-61 How to Apply Colliding Animations to Design Elements with Divi

Animation

And add an animation to the module.

  • Animation Style: Slide
  • Animation Direction: Left
  • Animation Delay: 400ms

how-to-apply-colliding-animations-to-design-elements-with-divi-62 How to Apply Colliding Animations to Design Elements with Divi

Modify Blurb Module #3

Spacing

On to the third Blurb Module. Add some negative top margin.

  • Top Margin: -340px (Desktop), 0px (Tablet & Phone)

how-to-apply-colliding-animations-to-design-elements-with-divi-63 How to Apply Colliding Animations to Design Elements with Divi

Hover Spacing

Modify the margin values on hover.

  • Top Margin: -380px
  • Bottom Margin: 40px
  • Left Margin: 40px
  • Right Margin: -40px

how-to-apply-colliding-animations-to-design-elements-with-divi-64 How to Apply Colliding Animations to Design Elements with Divi

Rounded Corners

Add ’30px’ to the top right corner of the module as well.

how-to-apply-colliding-animations-to-design-elements-with-divi-65 How to Apply Colliding Animations to Design Elements with Divi

Animation

And add an animation.

  • Animation Style: Slide
  • Animation Direction: Left
  • Animation Delay: 600ms

how-to-apply-colliding-animations-to-design-elements-with-divi-66 How to Apply Colliding Animations to Design Elements with Divi

Modify Blurb Module #4

Background Color

On to the fourth module. Open the settings and change the background color.

  • Background Color: rgba(255,255,255,0.93)

how-to-apply-colliding-animations-to-design-elements-with-divi-67 How to Apply Colliding Animations to Design Elements with Divi

Hover Spacing

Add some hover margin values next.

  • Left Margin: -40px
  • Right Margin: 40px

how-to-apply-colliding-animations-to-design-elements-with-divi-68 How to Apply Colliding Animations to Design Elements with Divi

Animation

And add an animation as well.

  • Animation Style: Fade
  • Animation Delay: 800ms

how-to-apply-colliding-animations-to-design-elements-with-divi-69 How to Apply Colliding Animations to Design Elements with Divi

Modify Blurb Module #5

Animation

On to the fifth module. The only thing you’ll need to do here is adding an animation.

  • Animation Style: Fade
  • Animation Delay: 1000ms

how-to-apply-colliding-animations-to-design-elements-with-divi-70 How to Apply Colliding Animations to Design Elements with Divi

Modify Blurb Module #6

Background Color

Continue by opening the sixth module and change the background color.

  • Background Color: rgba(255,255,255,0.93)

how-to-apply-colliding-animations-to-design-elements-with-divi-71 How to Apply Colliding Animations to Design Elements with Divi

Hover Spacing

Change the spacing values on hover as well.

  • Left Margin: 40px
  • Right Margin: -40px

how-to-apply-colliding-animations-to-design-elements-with-divi-72 How to Apply Colliding Animations to Design Elements with Divi

Animation

And add an animation.

  • Animation Style: Fade
  • Animation Delay: 1200ms

how-to-apply-colliding-animations-to-design-elements-with-divi-73 How to Apply Colliding Animations to Design Elements with Divi

Modify Blurb Module #7

Hover Spacing

On to the seventh module. Add some hover margin values to the spacing settings.

  • Top Margin: 40px
  • Left Margin: -40px
  • Right Margin: 40px

how-to-apply-colliding-animations-to-design-elements-with-divi-74 How to Apply Colliding Animations to Design Elements with Divi

Rounded Corners

Continue by adding ’30px’ of border radius to the bottom left corner of the module.

how-to-apply-colliding-animations-to-design-elements-with-divi-75 How to Apply Colliding Animations to Design Elements with Divi

Animation

And add an animation.

  • Animation Style: Slide
  • Animation Direction: Right
  • Animation Delay: 1400ms

how-to-apply-colliding-animations-to-design-elements-with-divi-76 How to Apply Colliding Animations to Design Elements with Divi

Modify Blurb Module #8

Background Color

Continue by opening the eighth module and change the background color.

  • Background Color: rgba(255,255,255,0.93)

how-to-apply-colliding-animations-to-design-elements-with-divi-77 How to Apply Colliding Animations to Design Elements with Divi

Hover Spacing

Add some custom margin on hover to the module next.

  • Top Margin: 40px

how-to-apply-colliding-animations-to-design-elements-with-divi-78 How to Apply Colliding Animations to Design Elements with Divi

Animation

Add an animation to this Blurb Module as well.

  • Animation Style: Slide
  • Animation Direction: Right
  • Animation Delay: 1600ms

how-to-apply-colliding-animations-to-design-elements-with-divi-79 How to Apply Colliding Animations to Design Elements with Divi

Modify Blurb Module #9

Hover Spacing

On to the ninth and last module! Go to the spacing settings and add some custom hover margin values.

  • Top Margin: 40px
  • Left Margin: 40px
  • Right Margin: -40px

how-to-apply-colliding-animations-to-design-elements-with-divi-80 How to Apply Colliding Animations to Design Elements with Divi

Rounded Corners

Add ’30px’ of border radius to the bottom right corner as well.

nca2 How to Apply Colliding Animations to Design Elements with Divi

Animation

And add an animation.

  • Animation Style: Slide
  • Animation Direction: Right
  • Animation Delay: 1800ms

nca3 How to Apply Colliding Animations to Design Elements with Divi

Add Negative Bottom Margin to Image Module in Row #1

Now, to collide the circle we’ve created in the first part of this example and the grid, we’re going to give the Image Module (containing the shaped image overlay) some negative bottom margin.

  • Bottom Margin: -520px

nca4 How to Apply Colliding Animations to Design Elements with Divi

Preview

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

Example #1: Colliding Dividers

how-to-apply-colliding-animations-to-design-elements-with-divi How to Apply Colliding Animations to Design Elements with Divi

Example #2: Colliding Text

how-to-apply-colliding-animations-to-design-elements-with-divi-1 How to Apply Colliding Animations to Design Elements with Divi

Example #3: Colliding Grid

how-to-apply-colliding-animations-to-design-elements-with-divi-2 How to Apply Colliding Animations to Design Elements with Divi

Hover

how-to-apply-colliding-animations-to-design-elements-with-divi-3 How to Apply Colliding Animations to Design Elements with Divi

Final Thoughts

Adding animations to your pages can help create more interaction between your visitors and you. Of course, you can just use the animation settings you have within the Visual Builder, but you can also take it one step further by applying colliding animations to design elements which will help you achieve stunning results. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

SEO News and More

SEO News and More

Share This