{"id":105966,"date":"2023-04-07T17:56:14","date_gmt":"2023-04-07T12:26:14","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&p=105966"},"modified":"2023-04-07T17:56:14","modified_gmt":"2023-04-07T12:26:14","slug":"page-loading-transition-effects-in-elementor","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/page-loading-transition-effects-in-elementor\/","title":{"rendered":"How to Add Page Loading Transition Effects in Elementor?"},"content":{"rendered":"\n

Do you want to add beautiful Page Loading Transition Effects to your Elementor website? Page loading transition effects can add a stylish and professional touch to your website, improving the user experience and making your site stand out from the crowd.<\/p>\n\n\n\n

With the Preloader widget from The Plus Addons for Elementor, you can add beautiful page transition effects to enter the page after the page loading animation.<\/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. <\/p>\n\n\n\n

After you\u2019ve set your preloader in the Content<\/strong> tab, go to the Page Transition<\/strong> tab.<\/p>\n\n\n\n

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

You can select different page transition effects from the Transition<\/strong> dropdown under In Transition<\/strong> section.<\/p>\n\n\n\n

For some transition effects, you\u2019ll get a Direction<\/strong> option. From there, you can choose the direction of the transition animation.<\/p>\n\n\n\n

You can also add an out transition effect as well. This will play when you navigate to another page. <\/p>\n\n\n\n

To do this, enable the Out Transition<\/strong> toggle.<\/p>\n\n\n\n

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

In the Transition<\/strong> dropdown, you\u2019ll get the same page transition effects option in the In Transition<\/strong> section.<\/p>\n\n\n\n

Make sure to set the same transition effects in both In Transition <\/strong>and Out Transition<\/strong> to make it work properly.<\/p>\n\n\n\n

From the Direction<\/strong> dropdown you can set the direction of the out transition animation for some page transition effects.<\/p>\n\n\n\n

\n

Note: You can set different page transition directions for both <\/em>In Transition <\/em><\/strong>and <\/em>Out Transition.<\/em><\/strong><\/p>\n<\/blockquote>\n\n\n\n

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

Then you\u2019ll find Exclude Class<\/strong> option, from here, you can exclude some elements by their class name, so clicking on them, the out transition will not play.\u00a0<\/p>\n\n\n\n

You can add multiple class names separated by commas.<\/p>\n\n\n\n

Generally, when you have set an out transition, it will play whenever you navigate to another page by clicking on a link.<\/p>\n\n\n\n

For example, we have a button on a page and don\u2019t want to show the out transition when someone clicks on it.<\/p>\n\n\n\n

To do this, first, use the browser Inspect Element to find the class of the button. Copy the class name and paste it into the Exclude Class<\/strong> field.<\/p>\n\n\n\n

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

Now when someone clicks that button, the out transition will not play. <\/p>\n\n\n\n

This way you can exclude certain elements like form buttons where you don\u2019t want to show out transition when submitting a form.<\/p>\n\n\n\n

This how easily you can add in and out page transition effects.<\/p>\n\n\n\n

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

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