{"id":105949,"date":"2023-04-07T17:44:45","date_gmt":"2023-04-07T12:14:45","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&p=105949"},"modified":"2023-04-07T17:44:45","modified_gmt":"2023-04-07T12:14:45","slug":"shortcode-based-preloader-animation-in-elementor","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/shortcode-based-preloader-animation-in-elementor\/","title":{"rendered":"How to Add Shortcode Based Preloader Animation in Elementor?"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

With the Preloader widget from The Plus Addons for Elementor, you can show any content as a preloader through a shortcode.<\/p>\n\n\n\n

To check the complete feature overview documentation of The Plus Addons for Elementor Preloader widget, click here<\/a>.<\/em><\/p>\n\n\n\n

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

\n
LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n

<\/p>\n\n\n\n

To do this, add the Preloader widget on the page or template, in the Content<\/strong> tab, you\u2019ll find an item under Preloader<\/strong>.<\/p>\n\n\n\n

Open the item and select Shortcode <\/strong>from the Select<\/strong> dropdown.<\/p>\n\n\n\n

In the Shortcode<\/strong> field, add your shortcode.<\/p>\n\n\n\n

\"preloader<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

If you use the Elementor template, you can combine multiple elements to create a unique preloader as per your brand.<\/p>\n\n\n\n

Once you have created your Elementor template, go to Templates<\/strong> > Saved Templates<\/strong>.<\/p>\n\n\n\n

If you\u2019re using Elementor Pro, you\u2019ll find the template shortcode beside each template. Copy the shortcode of your template and use it in the Preloader widget.<\/p>\n\n\n\n

But if you don\u2019t have Elementor Pro, you can use the AnyWhere Elementor<\/a> plugin to create a shortcode of your template. <\/p>\n\n\n\n

You\u2019ll have to use this shortcode [INSERT_ELEMENTOR id=xxx]. You have to replace the \u2018xxx<\/strong>\u2019 with your Elementor template id.<\/p>\n\n\n\n

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 \u2018post=<\/em>\u2019 is the template id.<\/p>\n\n\n\n

\"elementor<\/figure>\n\n\n\n

Add the id in the shortcode, so your shortcode should look something like this.<\/p>\n\n\n\n

[INSERT_ELEMENTOR id=4900]<\/p>\n\n\n\n

\"preloader<\/figure>\n\n\n\n

Add this shortcode in the Preloader widget; now it should show your Elementor template content as the page loading animation.<\/p>\n\n\n\n

If you are already using Nexter Theme Pro, using its theme builder, you can create different templates with Elementor. You\u2019ll also get a shortcode for the templates that you can use in the Preloader widget.<\/p>\n\n\n\n

To find the templates in Nexter Theme, go to Nexter Builder<\/strong> > All Templates<\/strong>.<\/p>\n\n\n\n

Beside each template, you\u2019ll find its shortcode. <\/p>\n\n\n\n

Add this shortcode in the Preloader widget and it will use your template content for page loading animation.<\/p>\n\n\n\n

Also, check How to Add Custom CSS Preloader Animations in Elementor<\/a>.<\/p>\n","protected":false},"author":16,"featured_media":105954,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[527,559],"class_list":["post-105949","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\/105949","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=105949"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/105949\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/105954"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=105949"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=105949"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}