---
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-03-31
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?

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/).