Getting Geared Up With Elementor Motion Effects

A World Webscapes Tutorial

April 7, 2019

Getting Geared Up With Elementor Motion Effects

Creating a static page element with motion effects from Elementor Pro.

Table of Contents

Tools Used

Elementor

Difficulty

Difficulty 89%

Get Started Now

How to use the Elementor motion effects and custom positioning tools for a static rotating effect.

Create A New Section On Your Page

Create a new section on your page. Make it sticky to the top.

Add In An Inner Section

Add an inner section widget with the default two columns.

Add Your First Gear Image

Create a gear in Photoshop or any paint program. Add it to our media library.

Set Position As Needed

Here is where we get tricky. Notice the “warning label.” Custom position takes practice. And will need adjustment for devices. For the sake of this tutorial, the demo gears will only show up on desktops.

Create A Spinning Effect

Use the rotate motion effects to set the spin, let’s turn it up to 11.

Repeat For Second Gear

Repeat all the above steps for the second gear.

Set Size And Position Offset

We need to change the size of the image and the positioning to get the effect that you want.

Reverse The Spin Effect

Reverse the spin to make the gears work together as best you can.

Add Your Popup Links

Link two popup templates to the images. We have explained that in other tutorials and will not repeat that lesson.

Save And View Your Page

Save and view your page. You will need to adjust your settings a few times to get things all working.

Bonus In The Read More