---
title: "How to Exclude a Content From a Preloader in Elementor?"
url: https://theplusaddons.com/docs/exclude-content-from-preloader-in-elementor/
date: 2023-04-07
modified: 2026-09-18
lang: en
author: "Aditya Sharma"
description: "A preloader covers the whole screen, header included. Sometimes you want one part of the page to be there from the first moment — usually the header with the logo..."
image: https://theplusaddons.com/wp-content/uploads/2023/04/How-to-Exclude-a-Content-From-a-Preloader-in-Elementor_-1024x536.jpg
word_count: 753
---

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

## 

- Excludes specific content from the preloader animation using the Preloader widget from The Plus Addons for Elementor.
- Activates the Exclude Content toggle in the Load First tab to choose between excluding the Header or Custom CSS classes.
- Sets a high z-index value to ensure excluded elements appear above the loading animation during page load.

A preloader covers the whole screen, header included. Sometimes you want one part of the page to be there from the first moment — usually the header with the logo and the menu.

The **Load First** section of the **Pre Loader** widget lifts a chosen element above the loading overlay, so it is visible while everything else loads.

*To check the complete feature overview documentation of The Plus Addons for Elementor Pre Loader widget, [click here](https://theplusaddons.com/docs/preloader-elementor-widget-settings-overview/).*

***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/preloader-and-page-transition/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## 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.

## Exclude the Header

- Select the **Pre Loader** widget and open the **Load First** section on the **Content** tab.- Switch on **Exclude Content**.- Leave **Exclude** on **Header**.- Update the page and open it.

![The Load First section of the Pre Loader widget with Exclude Content on and Exclude set to Custom, showing the Class, Position and Z-Index fields](https://theplusaddons.com/wp-content/uploads/2026/09/preloader-loadfirst.webp)

On the published page the site header is pinned to the top of the screen and sits on top of the loading overlay, while the rest of the page loads behind it.

![A page loading with the preloader overlay covering the content while the site header stays visible at the top](https://theplusaddons.com/wp-content/uploads/2026/09/preloader-result-exclude.webp)

![The header staying visible while the rest of the page loads behind the preloader](https://theplusaddons.com/wp-content/uploads/2023/04/preloader-exclude-content-demo.gif)

## Exclude Any Other Element

- Set **Exclude** to **Custom**.- Find the element's CSS class with your browser's Inspect tool, or give it one in Elementor under **Advanced > CSS Classes**.- Type the class in the **Class** field **with the leading dot**, for example `.site-footer`. The field's placeholder shows the same form.- Choose **Position**: **Top** or **Bottom**.- Leave **Z-Index** as it is unless you have a reason to change it.- Update the page and open it.

> ***Position pins the element to the screen, not to the page.** While the preloader is up, the excluded element is given position: fixed and moved to the top or the bottom of the viewport. It returns to its normal place once loading finishes.*

## Settings

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| **Exclude Content** | Turns the whole feature on | Off |
| **Exclude** | **Header** lifts the site header; **Custom** lifts the element you name | **Header** |
| **Class** | The CSS class to lift, with a leading dot. Custom only. | empty |
| **Position** | Pins the element to the top or the bottom of the screen. Custom only. | **Top** |
| **Z-Index** | Stacking order while the preloader is up | 12345 |

> ***The Z-Index default already matches the preloader.** The overlay itself sits at z-index: 12345 and so does this field's default, which is why the excluded element appears in front. You only need to change it if something else on your site uses a higher value.*

## How It Behaves

- With **Exclude Content** off, nothing is touched: the header stays in the normal flow and the overlay covers it.- With **Header** chosen, only the theme's header element is lifted.- With **Custom**, only the element matching your class is lifted; the header is left alone.- The change lasts as long as the preloader does.

## Limitations

- **Header** targets the theme's own header element. If your header is built as an Elementor template that does not output one, use **Custom** with its class instead.- You can list more than one class, but each matching element is pinned to the same place, so aim at a single element for a predictable result.- **Position** and **Class** are hidden unless **Exclude** is set to **Custom**.- Nothing happens on the front end until the site-wide **Pre Loader** setting is on.

## Troubleshooting

### The element is still hidden by the preloader

Check the class: it needs the leading dot, and it must match an element that is actually on the page. Inspect the page while the preloader is up and confirm the element has `position: fixed`.

### The excluded element jumps to the top of the screen

That is what **Position** does. Set it to **Bottom** if that suits the element better, or exclude a different element.

### Both the header and my element move

**Exclude** is a single choice, not both. Pick **Custom** and give the header's own class if you need something other than the theme header.

## Related Docs

- [Preloader Elementor Widget Settings Overview](https://theplusaddons.com/docs/preloader-elementor-widget-settings-overview/)- [How to Add Page Loading Transition Effects in Elementor?](https://theplusaddons.com/docs/page-loading-transition-effects-in-elementor/)- [How to Combine Multiple Preloaders Animations on a Page in Elementor?](https://theplusaddons.com/docs/multiple-preloaders-animations-in-elementor/)