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.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
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.
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.
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: fixedand 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: 12345and 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.
