{"id":105882,"date":"2023-04-07T17:18:45","date_gmt":"2023-04-07T11:48:45","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&#038;p=105882"},"modified":"2023-07-18T10:19:24","modified_gmt":"2023-07-18T04:49:24","slug":"preloader-elementor-widget-settings-overview","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/preloader-elementor-widget-settings-overview\/","title":{"rendered":"Preloader Elementor Widget Settings Overview"},"content":{"rendered":"\n<p>Page loading animations, or preloaders in Elementor, are visual cues that inform users that content is loading. They can be as simple as a spinning wheel or as complex as an interactive animation. Not only do they signal to visitors that the website is working, but they can also create a more engaging user experience.&nbsp;<\/p>\n\n\n\n<p>By default, Elementor doesn\u2019t have any preloader option for this, you have to use a custom code. But with the Preloader widget from The Plus Addons for Elementor, you can create amazing page loading animation for your Elementor websites.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-fill\"><a class=\"wp-block-button__link has-nxt-global-color-8-color has-nxt-global-color-1-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/widgets\/pre-loader?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" style=\"border-radius:5px\" target=\"_blank\" rel=\"noreferrer noopener\">LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Required Setup<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor FREE Plugin<\/a> installed &amp; activated.<\/li>\n\n\n\n<li>You need to have <a href=\"https:\/\/wordpress.org\/plugins\/the-plus-addons-for-elementor-page-builder\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">The Plus Addons for Elementor<\/a> plugin installed and activated.<\/li>\n\n\n\n<li>This is a Premium widget, and you need the <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/pricing\/?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" target=\"_blank\" rel=\"noreferrer noopener\">PRO version of The Plus Addons for Elementor<\/a>.<\/li>\n\n\n\n<li>Make sure the Preloader widget is activated, to verify this, visit Plus Settings \u2192 and Search for Preloader and activate.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Learn via Video Tutorial:<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Add Smooth Preloader &amp; Page Transitions Animation in Elementor on WordPress\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/pi5i45p8sxc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to Activate the Preloader Widget?<\/h2>\n\n\n\n<p>Go to&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Plus Settings <\/strong>\u2192<strong> Plus widgets&nbsp;<\/strong><\/li>\n\n\n\n<li><strong>Search <\/strong>for the widget name<strong> <\/strong>and<strong> turn on the toggle <\/strong>then<strong> <\/strong>click<strong> Save.<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1920\" height=\"912\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/04\/preloader-activate.png\" alt=\"preloader activate\" class=\"wp-image-105886\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/preloader-activate.png 1920w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/preloader-activate-300x143.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/preloader-activate-1024x486.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/preloader-activate-768x365.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/preloader-activate-1536x730.png 1536w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/preloader-activate-600x285.png 600w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>Then go to the <strong>Extra Options<\/strong> tab, and scroll down to the <strong>Pre Loader<\/strong> section.<\/p>\n\n\n\n<p>Now, if you want to use the preloader on the entire website, then select <strong>Enable<\/strong> from the dropdown.<\/p>\n\n\n\n<p>Then click on the <strong>Save<\/strong> button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1920\" height=\"1055\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/04\/preloader-extra-options-enable.png\" alt=\"preloader extra options enable\" class=\"wp-image-105887\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/preloader-extra-options-enable.png 1920w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/preloader-extra-options-enable-300x165.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/preloader-extra-options-enable-1024x563.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/preloader-extra-options-enable-768x422.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/preloader-extra-options-enable-1536x844.png 1536w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/preloader-extra-options-enable-600x330.png 600w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Key Features<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Image Preloader<\/strong> &#8211; You can use an image as a preloader.<\/li>\n\n\n\n<li><strong>Icon Preloader <\/strong>&#8211; You can use an icon as a preloader.<\/li>\n\n\n\n<li><strong>Text Preloader <\/strong>&#8211; You can use custom text as a preloader.&nbsp;<\/li>\n\n\n\n<li><strong>Lottie Preloader <\/strong>&#8211; You can use Lottie file animation as a preloader.<\/li>\n\n\n\n<li><strong>Custom Preloader <\/strong>&#8211; You can use custom CSS and HTML to create a preloader.<\/li>\n\n\n\n<li><strong>Shortcode Preloader <\/strong>&#8211; You can use shortcode based preloader.<\/li>\n\n\n\n<li><strong>Multiple Predefined Loaders<\/strong> &#8211; You can select from multiple predefined loading animations.<\/li>\n\n\n\n<li><strong>Multiple Preloaders<\/strong> &#8211; You can use multiple preloaders on a page together.<\/li>\n\n\n\n<li><strong>Exclude Content<\/strong> &#8211; You can easily exclude content that will load before the preloader.&nbsp;<\/li>\n\n\n\n<li><strong>Page Loading Transition <\/strong>&#8211; You can add beautiful page transitions.<\/li>\n\n\n\n<li><strong>Set Minimum or Maximum Load Time <\/strong>&#8211; You can easily set a minimum or maximum load time for the preloader.<\/li>\n\n\n\n<li><strong>On Specific Pages<\/strong> &#8211; You can add preloaders on specific pages as well.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add the Preloader widget?<\/h2>\n\n\n\n<p>If you want to show page loading animation on entire website you should add the Preloader widget on common templates like Header or Footer.<\/p>\n\n\n\n<p>For this you can use the Nexter theme where you can easily create header, footer and other parts of your website.<\/p>\n\n\n\n<p>But if you are using the Elementor Pro you can easily create these using Elementor\u2019s Theme Builder .<\/p>\n\n\n\n<p>Once you add the Preloader widget in the template, in the <strong>Content<\/strong> tab, you\u2019ll find an item under <strong>Preloader<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"333\" height=\"752\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/04\/preloader-content.gif\" alt=\"preloader content\" class=\"wp-image-105888\"\/><\/figure>\n\n\n\n<p>Open the item. Under the <strong>Select<\/strong> dropdown, you\u2019ll find multiple options &#8211;<\/p>\n\n\n\n<p><strong>Image <\/strong>&#8211; To create an image preloader. <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/image-preloader-animation-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn more<\/a>.<\/p>\n\n\n\n<p><strong>Icon <\/strong>&#8211; To create an icon preloader. <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/icon-preloader-animation-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn more<\/a>.<\/p>\n\n\n\n<p><strong>Text <\/strong>&#8211; To create a text preloader. <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/text-based-preloader-animation-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn more<\/a>.<\/p>\n\n\n\n<p><strong>Lottie <\/strong>&#8211; To create a Lottie file animation preloader. <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/lottie-file-preloader-animation-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn more<\/a>.<\/p>\n\n\n\n<p><strong>Predefined<\/strong> &#8211; With this, you can select from different predefined loading animations as preloaders.<\/p>\n\n\n\n<p><strong>Custom Code <\/strong>&#8211; To create a custom preloader. <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/custom-css-preloader-animations-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn more<\/a>.<\/p>\n\n\n\n<p><strong>Shortcode <\/strong>&#8211; To create shortcode based preloader. <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/shortcode-based-preloader-animation-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn more<\/a>.<\/p>\n\n\n\n<p><strong>Progress<\/strong> &#8211; With this, you can select from different progress bar loading animations as a preloader.<\/p>\n\n\n\n<p>Based on your choice, you\u2019ll find relevant options.<\/p>\n\n\n\n<p>You can click on the <strong>+ ADD ITEM<\/strong> button to add multiple preloaders on the page. <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/multiple-preloaders-animations-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn the process<\/a>.<\/p>\n\n\n\n<p>Then you\u2019ll see a <strong>Backend Visibility<\/strong> option, turn it on to see the preloader preview in static mode.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: Preview will not be available for some types of preloader.<\/em>&nbsp;<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">Load First<\/h3>\n\n\n\n<p>From this tab, you can select which elements will load before the preloader. <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/exclude-content-from-preloader-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn more<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Page Transition<\/h3>\n\n\n\n<p>From this tab, you can add beautiful page loading transition effects. <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/page-loading-transition-effects-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn the process<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Extra Options<\/h3>\n\n\n\n<p>From this tab, you can set minimum or maximum load time of the preloader. Under the <strong>Load Time<\/strong> dropdown, you\u2019ll find three options &#8211;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"333\" height=\"400\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/04\/preloader-extra-options.gif\" alt=\"preloader extra options\" class=\"wp-image-105889\"\/><\/figure>\n\n\n\n<p><strong>Default<\/strong> &#8211; It will keep the load time to the default page load time<\/p>\n\n\n\n<p><strong>Minimum<\/strong> &#8211; In this option, you can set a minimum time (in seconds) for the loader to show, irrespective of the page load time. You can set the time in the <strong>Time<\/strong> field.&nbsp;<\/p>\n\n\n\n<p>For example, if you set the time to 3 seconds, the page loading animation will show for 3 seconds even if your page takes 2 seconds to load.<\/p>\n\n\n\n<p><strong>Maximum <\/strong>&#8211; In this option, you can set a maximum time (in seconds) for the loader to show, irrespective of the page load time. You can set the time in the <strong>Time<\/strong> field.&nbsp;<\/p>\n\n\n\n<p>For example, if you set the time to 2 seconds, the page loading animation will show for just 2 seconds even if your page takes 5 seconds to load.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to Add Preloader Animation on a Specific Page in Elementor?<\/h3>\n\n\n\n<p>If you want to show the preloader only on specific pages you can easily do that. You can do this in two ways.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">1. Manually Add Preloader on Specific Pages<\/h4>\n\n\n\n<p>If you can edit the specific page or post in Elementor on which you want to add the page loading animation you can simply add the Preloader widget on that specific page or post.<\/p>\n\n\n\n<p>So this way the loading animation will show on that specific page or post only.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: Make sure no Preloader widget is added in any common templates like Header or Footer.<\/em><\/p>\n<\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\">2. Add Preloader on Specific Pages Through The Plus Settings<\/h4>\n\n\n\n<p>If you\u2019ve added the Preloader widget on common templates like Header or Footer and want to show the loading animation on specific pages or posts, you can do that from The Plus Settings.<\/p>\n\n\n\n<p>For this from the WordPress Dashboard, go to <strong>Plus Settings<\/strong> &gt; <strong>Extra Options<\/strong>.<\/p>\n\n\n\n<p>Scroll down to <strong>Pre Loader<\/strong> section and make sure it is set to <strong>Disable<\/strong>.<\/p>\n\n\n\n<p>Now go to <strong>Pre Loader in Specific Page\/Post<\/strong> section and add the page or post id where you want to show the preloader. You can add multiple page or post IDs separated by commas.<\/p>\n\n\n\n<p>Then click on the <strong>Save<\/strong> button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1046\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/04\/preloader-specific-page-post-settings.png\" alt=\"preloader specific page post settings\" class=\"wp-image-105890\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/preloader-specific-page-post-settings.png 1920w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/preloader-specific-page-post-settings-300x163.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/preloader-specific-page-post-settings-1024x558.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/preloader-specific-page-post-settings-768x418.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/preloader-specific-page-post-settings-1536x837.png 1536w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/preloader-specific-page-post-settings-600x327.png 600w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: Pre Loader in Specific Page\/Post option is<\/em><strong><em> <\/em><\/strong><em>only available when Pre Loader is set to disable.&nbsp;<\/em><\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p>Now to find a page id go to <strong>Pages<\/strong> &gt; <strong>All Pages<\/strong>.<\/p>\n\n\n\n<p>Hover over the page you want to get the id of, in the bottom of the browser it will show the page edit URL with its id. The number after \u2018<em>post=<\/em>\u2019 is the page id.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1915\" height=\"915\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/04\/find-page-id.png\" alt=\"find page id\" class=\"wp-image-105891\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/find-page-id.png 1915w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/find-page-id-300x143.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/find-page-id-1024x489.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/find-page-id-768x367.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/find-page-id-1536x734.png 1536w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/find-page-id-600x287.png 600w\" sizes=\"(max-width: 1915px) 100vw, 1915px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: This way, you can find id of any post or post type.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p>Add this id in the <strong>Pre Loader in Specific Page\/Post<\/strong> section.&nbsp;<\/p>\n\n\n\n<p>Now the preloading animation will show on that specific page only.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Style the Preloader widget?<\/h2>\n\n\n\n<p>If you want to style the Preloader widget, you\u2019ll find all the options under the Style tab.<\/p>\n\n\n\n<p><strong>Image<\/strong> &#8211; If you are using an image preloader you can style it from this tab. From here you can manage image width, margin, border and box shadow. If you are using the <strong>Loader on Image<\/strong> option then from the <strong>Image Loader<\/strong> section you can manage opacity and CSS Filter for both normal and fill states.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"332\" height=\"995\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/04\/preloader-style.png\" alt=\"preloader style\" class=\"wp-image-105892\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/preloader-style.png 332w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/preloader-style-100x300.png 100w\" sizes=\"(max-width: 332px) 100vw, 332px\" \/><\/figure>\n\n\n\n<p><strong>Icon<\/strong> &#8211; If using an icon as a loader, you can manage the style from this tab. From here, you can manage the icon size, padding, margin, colour, background, border etc.<\/p>\n\n\n\n<p><strong>Text<\/strong> &#8211; If you are using a text as a preloader, you can manage the style from this tab. You can manage the text typography, colour, background, padding, margin, border and you can manage text colour for the <strong>Loader on Text<\/strong> option as well.<\/p>\n\n\n\n<p><strong>Predefined<\/strong> &#8211; If you are using any predefined loading animation then you can manage its style from here. You can manage two colours of the loader along with its padding and margin.<\/p>\n\n\n\n<p><strong>Progress Bar<\/strong> &#8211; This is for the progress type preloader, from here you can manage the progress bar width, height, colour, margin, border etc. You\u2019ll also find some layout specific styling options.<\/p>\n\n\n\n<p><strong>Progress Number<\/strong> &#8211; You can style the progress number within the progress bar from this tab.<\/p>\n\n\n\n<p><strong>Progress Circle<\/strong> &#8211; From this tab, you can style the circle progress bar (Layout 6). You can manage the empty colour, fill colour, stroke, percentage typography etc.<\/p>\n\n\n\n<p><strong>Transition Effect<\/strong> &#8211; From here, you can manage the colours of some specific transition effects.<\/p>\n\n\n\n<p><strong>Box<\/strong> &#8211; From this tab you can manage the preloader container box and page background style. You can manage the preloader container box width, padding, background, border etc. From the <strong>Whole Background<\/strong> section you can style whole page background.<\/p>\n\n\n\n<p>Advanced options remain common for all our widget, you can explore all it options from here.<\/p>\n\n\n\n<p><a href=\"https:\/\/theplusblocks.com\/docs\/advanced-tab-settings-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">View Advanced tab tutorial.<\/a><\/p>\n","protected":false},"author":16,"featured_media":105900,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[527,559],"class_list":["post-105882","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-plus-widgets","docs-preloader"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/105882","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=105882"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/105882\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/105900"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=105882"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=105882"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}