Create Bespoke Elementor Page Transitions in EPro v3.6

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

  1. 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.
  2. 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.
mbnR4GZCaZHUdCiWtHmYing7phrRTghNDC OciVuvWKwgdq0ocTAX8KisIIMhtvTtiYF8 8AJv83t1SdC8MGgqRZSMLoL5 jfY67UGAHWUHprfdHBGW0F wHM0CMwJIwolI25WQ
activate elementor page transitions

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

Kvw1ikUCw gMyeib9MmQBH86zjEaUvmpkGqX3AlehyXDERKE4JSUDmeAuV3vYAAj7uuvUR9rj aW1STQcKwccgLoApbgpUtrc78av6ev0ZFcr8BXsYRsydsSX7dssB

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)

P522aWbt4 55EReBxGvf5S8AMIncTeUB28ssWgtqmeqcbghsPfjbKcdZzS6DNJ5qlWgZ3sPPur4vpMlcQaHUTNFTxax pj6iEJdv4GbuaZMvaa24LFN3LLze OoeTcCf7jGOGAS7

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)

PLp3vEEurgWnNLLw 4DyMupHBFw00kHqFdOIZVs1Ef3LHSNNQsHiKe462BdqdmG9ipFs i5CLltdQOAxbGih3RrfTHLtUrCt1tP4oUiLdc0Kr3 aoq4k vD9YKicD6ij GhJI8yy

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)EMkXUG7uywrRP3f88 xtrzMGpsmaoFcBPtHfsoM16MGmdnOD4XxE59GKTZDbHq FbrRQGh A3oXLU1r2E5lws6Wx9ClX7 HzkFyQYfEMg8j3w2GqfLjukf2LrOGFIbZ0Ig qJ8Ll

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.

RMcK3HVV5SX3Gm b1Md 2vfNrweEgueiG4bK4n3qcbmmgJjYm2piFT8UsT9WKKOkLuKyCuCgAYvyH8tVe rLvRW3V6XgQVjw Ddj6aIotww0CD9S8pybaroog0MAKChEHPfANbX

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)

JRHH3sTr mzpDDDhIZbB58hA30bJ7EgPKXXo9A9fmjcLqSOwB6B0JeiAtFe 7tuevXAV1mjRwSpd0d4VZCxkgsLCrAx65rKL6Zupe8RUJ9RE2sP7ITSgT V22pUSDdCYtu4HNFNF

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)

lrdcYKHwmOVgl7HjkPWvBshIZ7FnJ222f 0 KxQ HkwSyVapdMDgUax4Lx0APdKtioxLpv6bqYaft6mWeXKUMrxKkqmioB2tNwNLbVyI whznD6TVezJShdpBZoP8dALBd 41 k7

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.

Also Read. . .

Snapchat Device Ban: The Why And The How

Snapchat is one of the quickest and easiest social media platforms used to communicate through photos and videos. Because of its emphasis on security and safety, Snapchat may ban a user’s account due to violations,

Read More »
Newsletter Subscription (EF)
Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users