Sure, Divi section dividers are already great, but you’ll get that extra “wow” factor when you animate them. When you’re done, you should get a result like you see on our home page –

This involves just a couple quick steps – modifying the CSS, and pasting into your custom CSS section in Divi, then adding an ID to the section you want to animate.

STEP 1 – Modify CSS Code

First – Download the CSS Source Files hereĀ 

You shouldn’t need to make any modifications to this file. If you want to change the speed of the animation, change every instance of “150” either up or down depending if you want it faster or slower. Copy this CSS and paste it into your Divi Custom CSS area on the Divi Theme Options page, or wherever you like to put your CSS.

STEP 2 – Add ID to your Section

Open up the Advanced tab on the section you want to animate.

In the CSS ID field, add bg-animate-top to animate the top section divider or bg-animate-bottom to animate the bottom section divider.

After doing that, save your changes and your background should now be moving!

Other Posts

  • This field is for validation purposes and should be left unchanged.