--- title: "How to Add Shortcode Based Preloader Animation in Elementor?" url: https://theplusaddons.com/docs/shortcode-based-preloader-animation-in-elementor/ date: 2023-04-07 modified: 2026-09-18 lang: en author: "Aditya Sharma" description: "The built-in preloader types cover a logo, an icon, a word, a Lottie file and a progress bar. If you want something else entirely, a shortcode lets you put arbitrary..." image: https://theplusaddons.com/wp-content/uploads/2023/04/How-to-Add-Shortcode-Based-Preloader-Animation-in-Elementor_-1024x536.jpg word_count: 723 --- # How to Add Shortcode Based Preloader Animation in Elementor? ## - The Plus Addons for Elementor Pre Loader widget ships only in The Plus Addons for Elementor Pro, and the free plugin does not contain it. - Pre Loader supports a Shortcode type that runs any registered shortcode and draws the result in the middle of the loading overlay. - Elementor Template shortcodes work as preloaders, and the post shows [INSERT_ELEMENTOR id=xxx] with xxx replaced by the template ID from the edit link. - The shortcode output has no size limit, but interactive content is a poor fit because the overlay is removed as soon as the page has loaded. The built-in preloader types cover a logo, an icon, a word, a Lottie file and a progress bar. If you want something else entirely, a shortcode lets you put arbitrary content on the loading screen. The **Shortcode** type in the **Pre Loader** widget runs whatever shortcode you give it and draws the result in the middle of the loading overlay. *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. ## Add a Shortcode Preloader - Add the **Pre Loader** widget to the page or to a header or footer template.- On the **Content** tab, open the item in the **Preloader** list.- Set **Select** to **Shortcode**.- Paste your shortcode into the **Shortcode** field.- Update the page and open it. ![The Pre Loader widget in the Elementor editor with the Preloader item open and the Select dropdown showing the preloader types](https://theplusaddons.com/wp-content/uploads/2026/09/preloader-content.webp) Any registered shortcode works — one from a plugin, one you registered yourself, or a saved Elementor template. In our test a form shortcode rendered its complete form on the loading screen. ## Use an Elementor Template as the Preloader A template gives you the most freedom: build the loading screen with any widgets you like, then point the preloader at it. - Build the layout you want and save it under **Templates > Saved Templates**.- Get a shortcode for it. Elementor Pro shows a template shortcode next to each saved template. Without Elementor Pro you need a plugin that turns a template into a shortcode, such as [AnyWhere Elementor](https://wordpress.org/plugins/anywhere-elementor/), which uses the form below.- Paste that shortcode into the **Shortcode** field of the Pre Loader widget. `[INSERT_ELEMENTOR id=xxx]` Replace `xxx` with the template's ID. To find it, hover the template in the list and read the edit link in your browser's status bar: the number after `post=` is the ID. ![Finding an Elementor template ID in the edit link shown by the browser](https://theplusaddons.com/wp-content/uploads/2023/04/elementor-template-id.png) If you use Nexter Theme Pro, its templates under **Nexter Builder > All Templates** also come with a shortcode you can paste into the same field. ## How It Behaves - The shortcode is run on the front end when the page is built, so it is server-rendered like any other shortcode on the page.- There is no size limit: whatever the shortcode outputs is drawn on the overlay, so a tall block makes a tall loading screen.- The **Style** tab has no section for this type. The shortcode's own output brings its own styling; only **Style > Box** affects the container and the background.- A shortcode that needs JavaScript may not have finished initialising while the page is still loading. ## Limitations - The shortcode's assets are not loaded specially for the preloader. If the shortcode's plugin only enqueues its CSS when its block appears elsewhere on the page, the preloader copy can look unstyled.- Interactive content is a poor fit: the overlay is removed as soon as the page has loaded, so nobody can use it.- Nothing appears on the front end until the site-wide **Pre Loader** setting is on. ## Troubleshooting ### The shortcode text is printed instead of running The shortcode is not registered on this site — check the plugin that provides it is active, and that the tag is spelled exactly as that plugin documents it. ### The template shows but looks wrong The template's styles are generated by Elementor per template. Open and re-save the template once so its CSS is regenerated, then reload the page. ### The loading screen is enormous Trim the template. Everything the shortcode outputs is drawn at full height inside the overlay. ## Related Docs - [Preloader Elementor Widget Settings Overview](https://theplusaddons.com/docs/preloader-elementor-widget-settings-overview/)- [How to Add Custom CSS Preloader Animations in Elementor?](https://theplusaddons.com/docs/custom-css-preloader-animations-in-elementor/)- [How to Add Lottie File Preloader Animation in Elementor?](https://theplusaddons.com/docs/lottie-file-preloader-animation-in-elementor/)