---
title: "How to Exclude a Content From a Preloader in WordPress?"
url: https://nexterwp.com/docs/exclude-content-from-preloader-in-wordpress/
date: 2023-04-10
modified: 2026-04-15
author: "Aditya Sharma"
description: "To improve the loading experience, you may want to exclude certain content of your website, such as the header or footer, from the preloader animation. This can be especially useful..."
image: https://nexterwp.com/wp-content/uploads/2024/05/exclude-content-from-preloader-in-wordpress-1024x519.jpg
word_count: 310
---

# How to Exclude a Content From a Preloader in WordPress?

## Key Takeaways

- Nexter Blocks includes a Preloader block that allows users to exclude specific content, such as the header, from the loading animation.
- Users can exclude content by CSS class in the Preloader block by adding the class name with a dot prefix, like .site-footer.
- The Preloader block enables users to set a high z-index value to ensure excluded elements remain above the loading animation.

To improve the loading experience, you may want to exclude certain content of your website, such as the header or footer, from the preloader animation. This can be especially useful for content that is already cached or doesn't require loading, as it can speed up the overall loading time and provide a better user experience.

With the Preloader block from the Nexter Blocks, you can easily exclude certain content from the loading animation so it loads before the preloader.

*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 **Animated Load First** tab and turn on the **Animated Load First** toggle.

In the **Exclude** section, you’ll find two options -

- **Header** - This will exclude the site header from the preloader, and it will load first.

- **Custom** - With this option, you can exclude content by their CSS class. Use the browser[ Inspect Element to find the class name](https://blog.hubspot.com/website/how-to-inspect).

Once you have the class name add it in the **Exclude Classes** field with a **.** (dot) in front, like this - 

**.site-footer**

> *Note: Although you can add multiple classes, you should target one element only for a consistent result.*

Then, from the **Position** section, you can place the element on **Top** or **Bottom** of the page while loading.

Finally, in the **Z-Index** field, you should add a high z-index value so that the element always remains above the loading animation. 

This will exclude the content from the loading animation and it will load first.

Also, check [How to Add Custom CSS Preloader Animations in WordPress](https://nexterwp.com/docs/custom-css-preloader-animations-in-wordpress/).

## Frequently Asked Questions

**Q: What should I do if the preloader is not excluding the header as expected?**
A: If the header isn't excluded from the preloader, ensure that you've correctly activated the Animated Load First toggle in the Pre Loader tab. This toggle is essential for enabling the exclusion settings. Additionally, verify that the header is properly selected in the Exclude section. If issues persist, check for any conflicting CSS that may affect the header's visibility during loading.

**Q: How can excluding content from the preloader improve user experience?**
A: Excluding content like the header or footer from the preloader can significantly enhance user experience by speeding up perceived loading times. Cached content doesn't need to load again, allowing users to interact with essential site elements immediately. This approach is particularly beneficial for improving the loading experience on pages with heavy content.

**Q: What are the requirements for using the Preloader block in Nexter Blocks?**
A: To use the Preloader block effectively, ensure that Nexter Blocks is installed and activated on your WordPress site. This block is specifically designed for use within the Nexter ecosystem, and having it activated is crucial for accessing all its features, including the ability to exclude content from the preloader animation.