---
title: "How to Add Page Loading Transition Effects in WordPress?"
url: https://nexterwp.com/docs/page-loading-transition-effects-in-wordpress/
date: 2023-04-10
modified: 2026-04-15
author: "Aditya Sharma"
description: "Adding page loading transition effects to your WordPress website can create a smoother and more engaging user experience. Transition effects add a visual effect to the page load process, which..."
image: https://nexterwp.com/wp-content/uploads/2024/05/page-loading-transition-effects-in-wordpress-1024x519.jpg
word_count: 423
---

# How to Add Page Loading Transition Effects in WordPress?

## Key Takeaways

- Nexter Blocks includes a Preloader block that adds page transition effects after the page loading animation.
- Users can select different page transition effects and set directions for both in and out transitions using the Transition dropdown.
- The Exclude Class option allows users to prevent out transitions from playing on specific elements by entering their class names.

Adding page loading transition effects to your WordPress website can create a smoother and more engaging user experience. Transition effects add a visual effect to the page load process, which can reduce the perception of waiting and make the site feel more responsive.

With the Preloader block from the Nexter Blocks, you can add beautiful page transition effects after the page loading animation.

*To check the complete feature overview documentation of The Nexter Blocks* Preloader block, [click here](/docs/preloader-block-settings-overview/).

***Requirement  - This block is a part of The Nexter Blocks*, make sure its installed & activated to enjoy all its powers.**

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-preloader-animation-and-page-transitions/)

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

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

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

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.

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

Make sure to set the same transition effects in both the **Transition **dropdown 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****.***

You’ll get color options for some page transition effects.

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.

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.

Also, check [How to Combine Multiple Preloader Animations on a Page in WordPress](https://nexterwp.com/docs/multiple-preloader-animations-in-wordpress/).

## Frequently Asked Questions

**Q: What should I do if the page loading transition effects are not displaying?**
A: If the page loading transition effects are not showing, ensure that the Preloader block from Nexter Blocks is installed and activated. This block is essential for adding transition effects. Additionally, check that you have set the transition effects correctly in both the Transition and Out Transition dropdowns. If they are mismatched, the effects may not work as intended.

**Q: How can I exclude certain elements from the out transition effect?**
A: To exclude specific elements from the out transition effect, use the Exclude Class option. You can input the class names of elements you want to exclude, separated by commas. This is useful for buttons or forms where you donu2019t want the out transition to play, ensuring a smoother interaction without unnecessary animations.

**Q: What are the best practices for using page loading transition effects?**
A: When using page loading transition effects, it's best to choose effects that complement your site's design without overwhelming users. Ensure that the transition duration is not too long, as this can lead to frustration. Additionally, test transitions on various devices to confirm they enhance the user experience across different screen sizes.