How to Add Shortcode Based Preloader Animation in Elementor?

Updated onApril 11, 2026By

Key Takeaways

  • The Plus Addons for Elementor includes a Preloader widget that allows users to display any content as a preloader through a shortcode.
  • Users can create unique preloaders by combining multiple elements in an Elementor template and using its shortcode in the Preloader widget.
  • Nexter Theme Pro users can create different templates with Elementor and utilize their shortcodes in the Preloader widget for page loading animations.
Table Of Content

If you want to add a preloader animation to your website, you may be interested in using a shortcode-based solution. Shortcodes can be a convenient way to add dynamic content to your website, including preloader animations.

With the Preloader widget from The Plus Addons for Elementor, you can show any content as a preloader through a shortcode.

To check the complete feature overview documentation of The Plus Addons for Elementor Preloader widget, click here.

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

To do this, add the Preloader widget on the page or template, in the Content tab, you’ll find an item under Preloader.

Open the item and select Shortcode from the Select dropdown.

In the Shortcode field, add your shortcode.

Preloader shortcode

Now for the shortcode, you can use any shortcode, such as custom shortcode or shortcode provided by some plugins, or you can use Elementor template shortcode.

If you use the Elementor template, you can combine multiple elements to create a unique preloader as per your brand.

Once you have created your Elementor template, go to Templates > Saved Templates.

If you’re using Elementor Pro, you’ll find the template shortcode beside each template. Copy the shortcode of your template and use it in the Preloader widget.

But if you don’t have Elementor Pro, you can use the AnyWhere Elementor plugin to create a shortcode of your template. 

You’ll have to use this shortcode [INSERT_ELEMENTOR id=xxx]. You have to replace the ‘xxx’ with your Elementor template id.

To find the template id hover over your Elementor template. In the bottom of the browser, it will show the template edit URL with its id. The number after ‘post=’ is the template id.

Elementor template id

Add the id in the shortcode, so your shortcode should look something like this.

[INSERT_ELEMENTOR id=4900]

Preloader shortcode added

Add this shortcode in the Preloader widget; now it should show your Elementor template content as the page loading animation.

If you are already using Nexter Theme Pro, using its theme builder, you can create different templates with Elementor. You’ll also get a shortcode for the templates that you can use in the Preloader widget.

To find the templates in Nexter Theme, go to Nexter Builder > All Templates.

Beside each template, you’ll find its shortcode. 

Add this shortcode in the Preloader widget and it will use your template content for page loading animation.

Also, check How to Add Custom CSS Preloader Animations in Elementor.

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
LinkedIn X GitHub YouTube Website
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What should I do if my shortcode-based preloader animation isn't displaying?

If your preloader animation isn't showing, double-check that you've entered the correct shortcode in the Preloader widget. Ensure that the shortcode corresponds to an existing Elementor template or a valid custom shortcode. If you're using Elementor Pro, the shortcode can be found beside each saved template in the Templates section.

What is the best way to create a preloader animation that matches my brand?

To create a preloader animation that aligns with your brand, consider using an Elementor template that combines multiple elements. After designing your template, copy its shortcode and use it in the Preloader widget. This method allows for greater customization and ensures your preloader reflects your brand identity.

Are there any limitations when using the preloader widget with Elementor?

The Preloader widget from The Plus Addons for Elementor is specifically designed to work with Elementor only. It does not support other page builders like Gutenberg, Beaver Builder, or Divi. Ensure you have The Plus Addons for Elementor installed and activated to access this feature.

How do I find the template ID for my Elementor template?

To find the template ID for your Elementor template, hover over the template in the Templates section. The bottom of your browser will display the URL, and the number after 'post=' is the template ID. Use this ID in the shortcode format [INSERT_ELEMENTOR id=xxx] to integrate it with the Preloader widget.

Last reviewed: April 11, 2026

Related Docs