In this tutorial, we’ll create a popup with a mouse track effect that you can add to your WordPress website using Elementor.
You’ll learn how to: ✔︎ Create a mouse track effect animation ✔︎ Use position absolute ✔︎ Set conditions and triggers
hey everyone had asked from elemental here today we will create a cool lost in space sign a pop-up using mouse track effect let’s dig in in finder search for pop-up and then you pop up and give it a name I’m going to create my own pop-up so let’s just close this first let’s set up the size of the pop-up in the setting tab under layout change the width to 600 pixel and in the height drop-down menu choose custom then change the height to square shape okay now let’s change the background of the pop-up under the style tab click on the classic background type and choose a background image change the position to center Center choose no-repeat and set the size to cover cool so all the pop-up settings already let’s start working on the inside open a new section with one column drag in a heading widget and a button widget type all the text that you need and give it some style okay now we can start working on the background click on the section handle to enter its settings then under style choose classic background and add an image change the position to center Center choose no-repeat and set the size to cover now let’s go back to the Layout tab you want the image to cover the whole square go to the height drop-down menu and choose min height then make sure that the height is 600 pixel so it will match our popup settings now let’s start adding our planets and give them an absolute position so we could place them wherever we want in the composition so the design is ready now we can move on to the mouse effect click on one of them then under the Advanced tab click on motion effects and switch on the mouse effects now click on the mouse track editing button and change the direction to direct and the speed to 0.3 each plant will have a different speed so each plant will move differently from the one next to it let’s do another one click on the pink planet and under the Advanced tab motion effects switch on the mouse effects and click on the mouse track editing button I’m going to keep the direction here opposite and change the speed to 0.8 now we have a cool interaction between the planets let’s keep doing the same thing on the other images so all our planets are moving but the stars in the background aren’t let’s give them some motion to click on the section handle there are turret settings then under style switch the mouse effects to own click on the mouse track editing button keep the direction opposite and change the speed to 0.4 so it won’t be too fast coupe so our pop up is ready let’s click on publish and set the conditions and triggers let’s set it on the entire side and the trigger on page load after 3 seconds click on save and close and let’s see it in action awesome I hope you enjoyed this tutorial don’t forget to subscribe to our YouTube channel to get all the latest updates and tutorials bye
Elementor is the leading website builder platform for professionals on WordPress. Elementor serves web professionals, including developers, designers and marketers, and boasts a new website created every 10 seconds on its platform.