Subscribe on YouTube

Check out our videos on branding, web design, SEO, and online business.

How To Animate Shape Dividers

Home Elementor How To Animate Shape Dividers

 

In this video I will show you how to easily animate your shape dividers in Elementor.

Elementor (Affiliate Link):
https://elementor.com/?ref=4776

CSS Animation Documentation:
https://developer.mozilla.org/en-US/docs/Web/CSS/animation

CSS Code:
body{ overflow-x:hidden}
.elementor-shape{
width: 200%;
animation: shape 10s ease-in-out infinite;
}

@keyframes shape {
0% {left: 0;}
50% {left: -50%;}
100% {left: 0;}
}
@media only screen and (max-width: 767px) {
.elementor-shape {display:none;}
}

Timestamps:

  • 0:00 Introduction
  • 0:19 Backend Settings
  • 0:55 Setup Shape Dividers
  • 1:35 Add Custom CSS Code
  • 6:48 CSS Keyframes
  • 8:37 Testing
  • 9:34 Responsive Modes
  • 10:05 Hide Shape Dividers On Mobile

* Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to continue providing free content and educational resources for you. Thank you for supporting our small business!

More Free Resources

Template Restyles

Get a new website in only 7 days with our new template restyle service. The perfect solution for a new business owner.