---
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-09-14
lang: en
author: "Aditya Sharma"
description: "A preloader hides everything, including the header a visitor might want to see straight away. Animated Load First lets you name the parts that should appear immediately while the rest..."
image: https://nexterwp.com/wp-content/uploads/2024/05/exclude-content-from-preloader-in-wordpress-1024x519.jpg
word_count: 462
---

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

## Key Takeaways

- Nexter Blocks Preloader block excludes the site header from the preloader when the Header option is selected in the Exclude section.
- Custom option excludes content by CSS class, and the post gives .site-footer as an example for the Exclude Classes field.
- Animated Load First toggle in the Animated Load First tab makes excluded content load before the preloader, with Position set to Top or Bottom and a high Z-Index keeping it above the loading animation.

A preloader hides everything, including the header a visitor might want to see straight away.

**Animated Load First** lets you name the parts that should appear immediately while the rest waits.

*For every Pre Loader setting in one place, see the [Pre Loader block guide](https://nexterwp.com/docs/add-preloader-in-wordpress/).*

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

## Before You Start

- **Edition:** **Pro** — the Pre Loader block is part of Nexter Blocks Pro.- **Block to enable:** Pre Loader, switched on under **Nexter > Blocks** in your WordPress dashboard.- **A CSS class on the content you want to keep visible**, added in the block's Advanced settings.

## Steps

- Give the block you want visible a class of your own, such as **keep-visible**, under its **Advanced** settings.

- Open the **Pre Loader** block and go to the **Animated Load First** panel.

![The Animated Load First panel with its exclude field](https://nexterwp.com/wp-content/uploads/2026/09/pre-loader-load-first.webp)

- Switch **Animated Load First** on and enter that class as the element to load first.

- Set **Load Time** if you also want to control how long the loader stays.

![The Load Time setting with Default, Minimum and Maximum](https://nexterwp.com/wp-content/uploads/2026/09/pre-loader-load-time.webp)

- Publish the page and open it in a new tab.

## Load Time

| Option | What it does |
| ------ | ------------ |
| Default | The loader clears as soon as the page has loaded |
| Minimum | Keeps the loader on screen for at least the seconds you set, even if the page is ready sooner |
| Maximum | Clears the loader after at most the seconds you set, even if the page is still loading |

## How It Behaves

- The class you type is passed straight to the block's front-end script, so it must match the class on your element exactly.- Excluded content is shown immediately while the overlay still covers the rest of the page.- **Maximum** is the safer of the two limits: it guarantees the visitor is never stuck behind the loader if something on the page is slow.- While the page is loading, the block adds `tpgb-body-preloader` to the page and shows the overlay. Once loading finishes it swaps in `tpgb-loaded` and the overlay goes away.

## Limitations

- **Pro only.**- It works on a CSS class you manage yourself, so renaming the class in one place and not the other silently stops the exclusion working.- Excluded content appears over the loading screen, so it needs to be readable against the overlay.- **Minimum** deliberately slows the page down for the visitor — use small values.

## Troubleshooting

### The excluded content is still hidden

The class does not match. Check the exact class on the element's **Advanced** settings and that the same text is entered in **Animated Load First**.

### The loader never clears

Set **Load Time** to **Maximum** with a small number of seconds, so the overlay always goes away even if something on the page never finishes.

### The loader disappears too quickly to see

That means the page is loading fast. Use **Minimum** if you want it shown for longer, but keep it to a second or two.

## Related Docs

- [Page loading transition effects](https://nexterwp.com/docs/page-loading-transition-effects-in-wordpress/)- [Combine several preloader animations](https://nexterwp.com/docs/multiple-preloader-animations-in-wordpress/)- [Pre Loader block: all settings](https://nexterwp.com/docs/add-preloader-in-wordpress/)