Want to apply a scroll effect in Elementor?
One of the compelling things when designing a page or template using Elementor is that you can apply certain animation effects to the page or template you are working on. One of them is a scroll effect which we will cover in this article.
The scroll effect itself is a feature available on Elementor Pro. So you need to upgrade your Elementor to the pro version in case you haven't done so.
What is the scroll effect?
This is a type of animation effect that occurs when users scroll their mouse over a page. Whether up or down. The effect may vary depending on your setting. Elementor itself offers 6 effect options:
- Vertical scroll: the object will move vertically when scrolling the mouse
- Scrolling horizontal: the object will move horizontally when scrolling the mouse
- Transparency: Object will appear as transparent before mouse scroll
- Blurry: Object will appear blurry before mouse scroll
- Ladder: The object will appear in a certain scale before the mouse scroll
You can apply a scroll effect whether on a section, a column or a widget.
How to Apply Scroll Effect in Elementor
As we mentioned, scroll effect is one of the features of Elementor Pro. In other words, you must be using Elementor Pro to use this feature.
In this tutorial, we will show you how to apply a horizontal scroll effect. As the name suggests, this effect will apply vertical motion to an object when the mouse is scrolled. This effect is excellent when combined with Lottie.
Below is an example before applying the horizontal scroll effect.
And here is the example after applying the horizontal scroll.
Note: The following tutorial uses Lottie.
Added scroll effect
Again, you can apply the scroll effect to a section, column, or widget.
First, select an element (section, column or widget) on which you want to apply the scroll effect and go to the tab Advanced in the left panel and open the section Movement Effects.
Activate option Scroll effects.
Since we want to apply the horizontal scroll effect, click on the pencil icon on the option Horizontal scroll to make settings such as direction (left or right), speed and window (the area visible to the user).
You can apply multiple scroll effects if you want. Just click the pencil icon on other scroll effect options to apply other scroll effects.
That's it. Once the page is complete, you can publish / update it. You can also disable the scroll effect on a certain type of device. Simply remove the device on which you want to disable the scroll effect by clicking on the icon X right away Apply effects to .
Get Elementor Pro Now!!!
Conclusion
Here ! That's it for this article that shows you how apply scroll effect in Elementor. If you have any concerns about how to get there let us know within Comments.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
