How to Apply Colliding Animations to Design Elements with Divi

January 24, 2019

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 Theme Builder Layout

Example #2: Colliding Dividers

how-to-apply-colliding-animations-to-design-elements-with-divi-1 Theme Builder Layout

Example #3: Colliding Grid

how-to-apply-colliding-animations-to-design-elements-with-divi-2 Theme Builder Layout

Hover

how-to-apply-colliding-animations-to-design-elements-with-divi-3 Theme Builder Layout

Recreate Example #1: Colliding Text

how-to-apply-colliding-animations-to-design-elements-with-divi Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

Sizing

Decrease the width of the divider as well.

  • Width: 91%

how-to-apply-colliding-animations-to-design-elements-with-divi-9 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

Recreate Example #2: Colliding Dividers

how-to-apply-colliding-animations-to-design-elements-with-divi-1 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

Color

Change the divider color next.

  • Divider Color: #3f46ff

how-to-apply-colliding-animations-to-design-elements-with-divi-27 Theme Builder Layout

Styles

And change the divider style in the styles settings.

  • Divider Style: Double

how-to-apply-colliding-animations-to-design-elements-with-divi-28 Theme Builder Layout

Sizing

Increase the divider weight in the sizing settings too.

  • Divider Weight: 8px

how-to-apply-colliding-animations-to-design-elements-with-divi-29 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

Recreate Example #3: Colliding Grid

how-to-apply-colliding-animations-to-design-elements-with-divi-2 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

Alignment

Change the image alignment as well.

  • Image Alignment: Center

how-to-apply-colliding-animations-to-design-elements-with-divi-39 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

Icon

Select an icon next.

how-to-apply-colliding-animations-to-design-elements-with-divi-46 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

Sizing

And decrease the content width in the sizing settings.

  • Content Width: 183px

how-to-apply-colliding-animations-to-design-elements-with-divi-50 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

Transitions

And increase the transition duration in the advanced tab.

  • Transition Duration: 600ms

how-to-apply-colliding-animations-to-design-elements-with-divi-53 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

Animation

And add an animation as well.

  • Animation Style: Fade
  • Animation Delay: 800ms

how-to-apply-colliding-animations-to-design-elements-with-divi-69 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

Animation

And add an animation.

  • Animation Style: Fade
  • Animation Delay: 1200ms

how-to-apply-colliding-animations-to-design-elements-with-divi-73 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

Rounded Corners

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

nca2 Theme Builder Layout

Animation

And add an animation.

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

nca3 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

Example #2: Colliding Text

how-to-apply-colliding-animations-to-design-elements-with-divi-1 Theme Builder Layout

Example #3: Colliding Grid

how-to-apply-colliding-animations-to-design-elements-with-divi-2 Theme Builder Layout

Hover

how-to-apply-colliding-animations-to-design-elements-with-divi-3 Theme Builder Layout

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!

Share this article:
 

eHost-square-ad Theme Builder Layout

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

SHARE IT HERE:

Related Posts

inserting-special-characters-into-the-block-editor Theme Builder Layout

Inserting Special Characters Into the Block Editor

For users of the Classic WordPress editor who often needed to insert special characters into their posts, life was once simple. Click the “Ω” button in the editor to open a modal with a list of characters not found on a standard keyboard. The user then only needed to...

review-divi-business-course-by-divi-space Theme Builder Layout

Review: Divi Business Course by Divi Space

Divi Business Course is an 8-week course that teaches how to start and run a Divi web design business and take the business to 6 figures per year. The course is dripped over the 8 weeks and includes live coaching calls, a Facebook group, and lots of documents to help...

metrilo-for-woocommerce-an-overview-and-review Theme Builder Layout

Metrilo for WooCommerce: An Overview and Review

Metrilo for WooCommerce is a growth tool for ecommerce brands that combines in-depth data with customer retention strategies. Analytics tell you all about your marketing and sales efforts, and customer engagement tools maximize the customer experience and encourage...

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.