With Elementor you can add cool Motion Effects to your website.
It’s very easy to do and in this tutorial I will explain exactly how it’s done.
By adding these you can make the website stand out more. This gives the website a modern look and also a better user experience.
So let’s get right into it!
Watch tutorial on YouTube
Add motion effects with Elementor
After you’re done with designing the pages, posts, archive page, search results pages, error 404 page and the header and footer, it’s time to finish it off with some cool motion effects.
I’ll give an example on the homepage, so from the WordPress dashboard I go to Pages.
After that I go to Home and click on Edit With Elementor.
The effects you can add are called Motion Effects. As I mentioned and you can apply them to Sections, Columns or Widgets.
You can do all the Motion Effects settings on the Advanced tab.
To give an example I select the first Section and go to the Advanced tab.
Here you will see the option Motion Effects. Over at the Entrance Animation you will see that Default is now indicated.
You can see an overview of all effects by clicking on the arrow down and there are many options available.
For example, if I select Fade In, you can see that the Section will fade in every time after the page is loaded.
Other Motion Effects I often use are Slide into Left, Slide in Right and the Zoom In Up.
There are so many effects to choose from that you just have see which one you like.
You can also set the Animation Duration at the option in the menu.
I set it to Slow to make the effect appear smoother and I choose the first option Fade in Entrance Animaton.
As I mentioned you can also add Motion Effects to a Column or Widget and it works exactly the same way.
If I select the Column in the first Section and go to the Advanced tab you can edit the Motion Effects.
At the Entrance Animation options you can add the Motion Effect and it will be applied only to the selected Column.
I will also show you how to add the Motion Effect to a Widget.
So now I go to the Heading widget and I select it.
Again I go to the Advanced tab and here you also see the Motion Effects option and you select an effect again.
After you are done don’t forget to click the Update button at the bottom of the page to save the changes.
This way you have a good idea of how it works and how you can add cool effects to your website.
My advice is not to exaggerate it and don’t add effects to every section, column and widget on the page. Because then it quickly becomes too much and it can also have an impact on the loading time of the page.
So for the website I’m making for this tutorial I will only add a Motion Effect to all the sections for every page and post.
After that’s done I’m completely done with setting up this website!
Watch the video on YouTube to see the the result.
Don’t forget to like and subscribe to the YouTube channel. I would appreciate that very much!
In the next tutorial I will explain how to set up an Email account for your website.
Check out this tutorial to learn the Elementor basics in 7 minutes.
In other tutorials I have explained how to create cool effects such as: