---
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-09-18
lang: en
author: "Aditya Sharma"
description: "A page transition is what happens to the loading screen when it goes away, and what happens when the visitor clicks through to the next page. It turns an abrupt..."
image: https://theplusaddons.com/wp-content/uploads/2023/04/How-to-Add-Page-Loading-Transition-Effects-in-Elementor_-1024x536.jpg
word_count: 749
---

# How to Add Page Loading Transition Effects in Elementor?

## 

- Integrates the Preloader widget from The Plus Addons for Elementor to enhance page loading transitions.
- Enables customization of in and out transition effects through the Transition dropdown in the Page Transition tab.
- Allows exclusion of specific elements from out transitions using the Exclude Class option for improved user experience.

A page transition is what happens to the loading screen when it goes away, and what happens when the visitor clicks through to the next page. It turns an abrupt jump into a deliberate move.

The **Page Transition** section of the **Pre Loader** widget has five effects for the way in and the same five for the way out.

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

***Requirement - This widget is a part of The Plus Addons for Elementor Pro, 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)

## Before You Start

- **Edition:** **Pro** — the **Pre Loader** widget ships only in The Plus Addons for Elementor Pro. The free plugin does not contain it.- **Widget to enable:** **Pre Loader**, under **The Plus Addons > Widgets**. Search for it and turn the toggle on.- **Site-wide switch:** go to **ThePlus Addons > Extra Options > Settings**, open the **Design** tab, click the gear on the **Pre Loader** card and set **Pre Loader** to **Entire Site**, then **Save**. Until this is set, the preloader's CSS and JavaScript are never loaded on the front end and nothing appears.- **Where the settings are:** select the **Pre Loader** widget and use the **Content** tab's four sections — **Content**, **Load First**, **Page Transition** and **Extra Option** — plus the **Style** tab.

## Set the Way In

- Set up your preloader on the **Content** tab first.- Open the **Page Transition** section.- Pick an effect in **Transition**. It starts on **Fade**.- If a **Direction** dropdown appears, choose where the effect comes from.- Update the page and open it.

![The Page Transition section of the Pre Loader widget with Out Transition switched on and its own Transition and Direction dropdowns](https://theplusaddons.com/wp-content/uploads/2026/09/preloader-transition.webp)

## The Five Effects

| Transition | Direction options |
| ---------- | ----------------- |
| **Fade** (default) | None — the overlay simply fades |
| **Slide** | Left, Right, Top, Bottom |
| **Triple Swoosh** | Those four plus the four corners |
| **Simple** | Those four plus the four corners |
| **Duo Move** | Those four plus the four corners |

The **Direction** dropdown only appears for the effects that use one, which is why it is absent on **Fade**.

![A page transition playing as an Elementor page loads](https://theplusaddons.com/wp-content/uploads/2023/04/preloader-exclude-class.gif)

## Add the Way Out

An out transition plays when the visitor clicks a link to leave the page, so the loading screen slides back in before the next page arrives.

- Switch on **Out Transition**.- Pick an effect in the second **Transition** dropdown. It starts on **Fade**.- Set its **Direction** if one is offered.- Update the page and click a link on it.

> ***Use the same effect for both.** The in and out effects are separate settings, and a slide in with a swoosh out reads as two unrelated animations. The directions can differ; the effect is best kept the same.*

## Exclude Class: read this before you use it

The **Exclude Class** field sounds like a way to stop the out transition on certain links. In version 6.5.0 it does the opposite.

We tested it on a page with two links and **Out Transition** on:

| Exclude Class | Ordinary link | Link with that class |
| ------------- | ------------- | -------------------- |
| empty | Out transition plays | Out transition plays |
| `.my-class` | **Nothing happens** | **Out transition plays** |

So filling this field does not remove links from the out transition — it makes the out transition fire on those links *only*, and on nothing else. Until this is fixed, leave **Exclude Class** empty unless you want exactly that behaviour.

## How It Behaves

- With **Out Transition** off, the out effect is switched off completely — the widget removes its own marker class from the page, and no click is intercepted.- With it on and **Exclude Class** empty, the out transition plays on ordinary links but not on anchors, mail links, lightbox links, add-to-cart buttons, wp-admin links or links opening in a new tab. Ctrl-click, Shift-click and Cmd-click are also left alone.- The in transition plays as the loading screen is removed, about a second after the page has loaded.

## Limitations

- **Exclude Class** inverts the out transition instead of narrowing it, as described above.- There is no duration or easing control for either transition.- Nothing appears on the front end until the site-wide **Pre Loader** setting is on.

## Troubleshooting

### No out transition when I click a link

Check that **Out Transition** is on and that **Exclude Class** is empty. Also check the link is an ordinary one: anchors, new-tab links and buttons are skipped on purpose.

### The transition is over before I see it

Set **Extra Option > Load Time** to **Minimum** with a **Time (Second)** value, so the loading screen is on long enough for the effect to read.

### The in and out effects look unrelated

Set the same effect in both **Transition** dropdowns.

## Related Docs

- [Preloader Elementor Widget Settings Overview](https://theplusaddons.com/docs/preloader-elementor-widget-settings-overview/)- [How to Exclude a Content From a Preloader in Elementor?](https://theplusaddons.com/docs/exclude-content-from-preloader-in-elementor/)- [How to Combine Multiple Preloaders Animations on a Page in Elementor?](https://theplusaddons.com/docs/multiple-preloaders-animations-in-elementor/)