Subscribe on YouTube

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

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

Continue Reading...

* 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!

Template Restyles

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