---
title: "How to Add Page Loading Transition Effects in Elementor?"
url: https://theplusaddons.com/docs/page-loading-transition-effects-in-elementor/
date: 2023-04-07
modified: 2026-04-11
author: "Aditya Sharma"
description: "Do you want to add beautiful Page Loading Transition Effects to your Elementor website? Page loading transition effects can add a stylish and professional touch to your website, improving the..."
image: https://theplusaddons.com/wp-content/uploads/2023/04/How-to-Add-Page-Loading-Transition-Effects-in-Elementor_-1024x536.jpg
word_count: 437
---

# How to Add Page Loading Transition Effects in Elementor?

## Key Takeaways

- The Plus Addons for Elementor offers a Preloader widget that adds page loading transition effects.
- Users can select different page transition effects from the Transition dropdown in the In Transition section.
- The Exclude Class option allows users to prevent out transitions for specific elements by entering their class names.

Do you want to add beautiful Page Loading Transition Effects to your Elementor website? Page loading transition effects can add a stylish and professional touch to your website, improving the user experience and making your site stand out from the crowd.

With the Preloader widget from The Plus Addons for Elementor, you can add beautiful page transition effects to enter the page after the page loading animation.

*To check the complete feature overview documentation of The Plus Addons for Elementor Preloader widget, [click here](/docs/preloader-elementor-widget-settings-overview/).*

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/preloader-and-page-transition/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

To do this, add the Preloader widget on the page or template. 

After you’ve set your preloader in the **Content** tab, go to the **Page Transition** tab.

![preloader in transition](https://theplusaddons.com/wp-content/uploads/2023/04/preloader-in-transition.gif)

You can select different page transition effects from the **Transition** dropdown under **In Transition** section.

For some transition effects, you’ll get a **Direction** option. From there, you can choose the direction of the transition animation.

You can also add an out transition effect as well. This will play when you navigate to another page. 

To do this, enable the **Out Transition** toggle.

![preloader out transition](https://theplusaddons.com/wp-content/uploads/2023/04/preloader-out-transition.gif)

In the **Transition** dropdown, you’ll get the same page transition effects option in the **In Transition** section.

Make sure to set the same transition effects in both **In Transition **and **Out Transition** to make it work properly.

From the **Direction** dropdown you can set the direction of the out transition animation for some page transition effects.

> *Note: You can set different page transition directions for both ****In Transition ****and ****Out Transition.***

Then you’ll find **Exclude Class** option, from here, you can exclude some elements by their class name, so clicking on them, the out transition will not play. 

You can add multiple class names separated by commas.

Generally, when you have set an out transition, it will play whenever you navigate to another page by clicking on a link.

For example, we have a button on a page and don’t want to show the out transition when someone clicks on it.

To do this, first, use the browser Inspect Element to find the class of the button. Copy the class name and paste it into the **Exclude Class** field.

![preloader exclude class](https://theplusaddons.com/wp-content/uploads/2023/04/preloader-exclude-class.gif)

Now when someone clicks that button, the out transition will not play. 

This way you can exclude certain elements like form buttons where you don’t want to show out transition when submitting a form.

This is how easily you can add in and out page transition effects.

***Suggested Read:** [How to Add Custom CSS Preloader Animations in Elementor](https://theplusaddons.com/docs//custom-css-preloader-animations-in-elementor/).*