Peter
Before we begin
01
Note that the page transitions feature is only available in Elementor Pro version 3.6 and above. If you don’t have Elementor pro, kindly use my affiliate link to get your license at no extra cost to you.
If you have your Elmentor Pro ready, what you need to do next is enable your page transitions. To do this, go to your WordPress dashboard, under Elementor > settings, find the Page Transitions option, and activate it.
Add a Page Transition to your Elementor Page
02
After activating your page transitions, go to Pages and open up any page with Elementor (Edit with Elementor)
In the Elementor editor, click on the hamburger icon (☰), go to site settings > page transitions. Under Background, choose the color you want. On entrance animation choose Fade in, exit animation, slide out up, and animation speed 3000 ms. Click on the preview page transition button
If you change the entrance animation to fade in down and the exit animation to fade out up then preview, here’s what you’ll have You can use the color option to change your background to any color you prefer.
Let’s try out a gradient background; Under Page Transitions > Background, choose gradient. Then on the color option choose a color of your choice, mine is blue. On Location, set 71. For the second color, make it transparent, then location 63.
Under Type, choose radial. You can also use the Position option to change the position of your shape or gradient. For this case, we’ll just leave the position to the top left. Under entrance animation, set it to fade in, and fade out down for exit animation.
Lastly, set the animation speed to 3000 ms, then preview page transition.
Add a Preloader to your Elementor Page Transition
03
Under the Preloader option, choose Type as animation, on Animation choose spinners, under Size, set it to 100, choose a color for your spinner under Color, and set Animation speed to 3000ms, then update and preview
Elementor Page Transitions Responsive Settings
04
In your Responsive Mode, you can select the tablet and mobile devices to make sure the page transitions and preloader are working well. You can make use of the size and other settings to change to your preference.
Let’s look at another transition you can create that would make your pages look more professional. Go to Page Transitions, under Background set it to a single background color, then choose blue under Color. Set entrance animation to slide in down and exit animation to slide out down. When you’re done update and preview
When you change the entrance animation to slide in right and the exit animation to slide out right, you can also choose another color then update and preview This transition is also well responsive on mobile and tablet devices.
Video: Elementor Page Transitions Tutorial
Check out more on this story on the link below.