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.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
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 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.
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.
