Help Docs Software Kadence Kadence Legacy Kadence Page Transitions

Kadence Page Transitions

Kadence Page Transitions enables smooth animated transitions between pages on your website. This feature enhances the user experience by replacing regular page loads with visually appealing animations as users navigate from one page to another.

The Kadence Page Transitions plugin is only available with the Kadence Ultimate or Lifetime Ultimate Plan. You can purchase either the Ultimate or the Lifetime Ultimate Plan by clicking here.

Page Transition Demo

Getting Started

Once you have access to the Kadence Full Plan or Lifetime Plan, you can download Kadence Page Transitions from your Kadence Downloads & License page.

Downloads and licenses

Scroll down to the Classic Plugins tab and expand it. Then, you will see the Kadence Page Transitions plugin in your Product List. You can download the ZIP file. Be sure to leave the file compressed and don’t unzip it.

Classic Plugins

You can upload your ZIP file by going to your WordPress Dashboard -> Plugins -> Add New Plugin. Then you can click on the Upload Plugin button at the top of the page. This will allow you to choose a file. Select the Kadence Page Transitions ZIP file downloaded from your Kadence Account.

Upload Plugin

Once you have uploaded your plugin and activated it, you are all set to get started using Kadence Page Transitions.

Page Transition Settings

Access the Kadence Page Transition settings by going to the Dashboard -> Appearance -> Kadence -> Page Transitions page. Here, you can control how page transitions will occur across your website.

Page Transition Settings

Select Transition In: Set the transition effect you wish to use. See the examples below.

Transition In Duration: Set the coming in transition duration for the animation. (This is the first part of the transition effect.)

Transition Out Duration: Set the out-going transition duration for the animation. (This is the second part of the transition effect.)

Overlay Color: Assign a specific overlay color for the transition overlay.

Site Background Color: When the site background is exposed, you can set a Site Background Color to specify which color should show.

Enable Loading Spinner: Enable this option if you wish for the loading spinner to show in between transitions.

Enable for Mobile: Turn this setting on or off based on whether you wish for mobile users to see the transition.

Transition Settings 2

Examples

Here is an example of each available Kadence Page Transition.

Overlay Slide In/Out Right:

Page Transition Demo

Zoom In/Out:

In:Out

Fade Up In/Down Out:

Up In:Down Out

Fade In/Out:

Fade In:Out
Was this article helpful?