Today I’m going to show you step by step how to create some Page Transitions in Elementor that will wow your website visitors. Elementor Page Transitions is a new interesting feature that comes in Elementor Pro version 3.6 and above.
By the end of this article, you’ll not only grasp the idea behind making great Elementor page transitions, but you’ll also create your own using the tips I share here.
Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.
Video: Elementor Page Transitions Tutorial
Before we begin
- 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 (00:21), find the Page Transitions option, and activate it.
To Read: 3 Ways to Add a Click To Call in Elementor (No Other Plugin)
Add a Page Transition to your Elementor Page
After activating your page transitions, go to Pages and open up any page with Elementor (Edit with Elementor) (00:35)
In the Elementor editor, click on the hamburger icon (☰), go to site settings > page transitions (01:03). 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 (01:35)
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. (03:22)
Add a Preloader to your Elementor Page Transition
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 (04:00)
To Read: Elementor Slide in Image on Hover using Premium Addons
Elementor Page Transitions Responsive Settings
In your Responsive Mode (04:32), 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 (06:13)
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 (06:41)
This transition is also well responsive on mobile and tablet devices.
Also Read: Create an Instagram Access Token for Elementor with New Instagram API
In closing
That’s how you can create page transitions and edit them to your preference to give your Elementor website a more professional look.
For any comments or questions use the comments section below. Don’t forget to subscribe to my newsletter and Youtube channel for more tips and tutorials.
