Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.<\/em><\/strong><\/p>\n\n\n\n <\/p>\n\n\n\n To do this, add the Preloader widget on the page or template. <\/p>\n\n\n\n After you\u2019ve set your preloader in the Content<\/strong> tab, go to Load First<\/strong> tab and turn on the Exclude Content<\/strong> toggle.<\/p>\n\n\n\n In the Exclude<\/strong> dropdown, you\u2019ll find two options – <\/p>\n\n\n\n Header<\/strong> – This will exclude the site header from the preloader, and it will load first.<\/p>\n\n\n\n Custom<\/strong> – With this option, you can exclude content by their CSS class. Use the browser Inspect Element to find the class name<\/a>.<\/p>\n\n\n\n Once you have the class name add it in the Class<\/strong> field with a .<\/strong> (dot) in front, like this – <\/p>\n\n\n\n .site-footer<\/strong><\/p>\n\n\n\n Note: Although you can add multiple classes, you should target one element only for a consistent result.<\/em><\/p>\n<\/blockquote>\n\n\n\n <\/p>\n\n\n\n Then from the Position<\/strong> dropdown, you can place the element Top<\/strong> or Bottom<\/strong> of the page while loading.<\/p>\n\n\n\n Finally, in the Z-Index<\/strong> field, you should add a high z-index value so that the element always remains above the loading animation. <\/p>\n\n\n\n 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.<\/p>\n\n\n\n![\"preloader](\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/04\/preloader-exclude-content.gif\")
<\/figure>\n\n\n\n\n
![\"preloader](\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/04\/preloader-exclude-content-demo.gif\")
<\/figure>\n\n\n\n