---
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-04-11
lang: en
author: "Aditya Sharma"
description: "Do you want to Exclude some Content from a Preloader in your Elementor website? Preloaders are a great way to improve user experience on your website, but you may want..."
image: https://theplusaddons.com/wp-content/uploads/2023/04/How-to-Exclude-a-Content-From-a-Preloader-in-Elementor_-1024x536.jpg
word_count: 335
---

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

Do you want to Exclude some Content from a Preloader in your Elementor website? Preloaders are a great way to improve user experience on your website, but you may want to exclude certain content from the preloader animation. For example, you may have a section on your website that doesn't require much loading time, and you want to exclude it from the preloader animation to avoid unnecessary delays.

With the Preloader widget from The Plus Addons for Elementor you can easily exclude some content from the page loading animation.

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

***Requirement  - This widget is a part of The Plus Addons for Elementor, 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)

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

After you’ve set your preloader in the **Content** tab, go to **Load First** tab and turn on the **Exclude Content** toggle.

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

![preloader exclude content](https://theplusaddons.com/wp-content/uploads/2023/04/preloader-exclude-content.gif)

**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 **Class** 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** dropdown, you can place the element **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 is how easily you can exclude content from the loading animation, so they always load first. Like in the example below, the header loads first while the page loads.

![preloader exclude content demo](https://theplusaddons.com/wp-content/uploads/2023/04/preloader-exclude-content-demo.gif)

***Suggested Read:** [How to Use Multiple Preloaders on a Page in Elementor](https://theplusaddons.com/docs//multiple-preloaders-animations-in-elementor/).*