In this video I will show you how to easily animate your shape dividers in Elementor.
Elementor (Affiliate Link):
https://wicky.co/get-elementor
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
