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.” A 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.