{"id":15,"date":"2024-10-03T11:07:47","date_gmt":"2024-10-03T11:07:47","guid":{"rendered":"https:\/\/docs.codevibrant.com\/yaatra-blog\/?p=15"},"modified":"2024-10-07T04:49:09","modified_gmt":"2024-10-07T04:49:09","slug":"implement-preloaders-in-your-yaatra-blog-site","status":"publish","type":"post","link":"https:\/\/docs.codevibrant.com\/yaatra-blog\/implement-preloaders-in-your-yaatra-blog-site\/","title":{"rendered":"Implement Preloaders in your Yaatra Blog site"},"content":{"rendered":"\n<p>Pre-loaders are displayed when a user initiates an action, and the webpage begins to load. They are buffering animations that appear while the website&#8217;s resources are loading. Thus, pre-loaders play a significant role in enhancing user experience. The Yaatra Blog Theme offers three distinct options for customizing the loading animation.<\/p>\n\n\n\n<p>To do so,<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to your WordPress dashboard, then navigate to&nbsp;<strong>Appearance&gt;&gt;Customizer<\/strong><\/li>\n\n\n\n<li>Then go to&nbsp;<strong>General Settings,&nbsp;<\/strong>and then click on&nbsp;<strong>Pre-loader&nbsp;<\/strong>option in the list.<\/li>\n\n\n\n<li>First of all, you have to<strong>&nbsp;toggle on&nbsp;<\/strong>the<strong>&nbsp;Enable Pre-loader&nbsp;<\/strong>to make changes.&nbsp;<strong>&nbsp;<\/strong><\/li>\n\n\n\n<li>There are three different options in the&nbsp;<strong>Yaatra Blog<\/strong> <strong>theme<\/strong>&nbsp;where you can change the&nbsp;<strong>Pre-loaders<\/strong><\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"266\" height=\"331\" src=\"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-content\/uploads\/sites\/5\/2024\/10\/image.png\" alt=\"\" class=\"wp-image-16\" srcset=\"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-content\/uploads\/sites\/5\/2024\/10\/image.png 266w, https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-content\/uploads\/sites\/5\/2024\/10\/image-241x300.png 241w\" sizes=\"auto, (max-width: 266px) 100vw, 266px\" \/><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>As per the image, you will have four different options for free version to choose from to customize your&nbsp;<strong>Preloader Layout.<\/strong><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Pro Features<\/h2>\n\n\n\n<p>For Preloaders, Yaatra Pro offers 15 different options to choose from options. You can choose them as per your preference. <span class=\"mt-docs-pro-tag\"><\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"257\" height=\"528\" src=\"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-content\/uploads\/sites\/5\/2024\/10\/image-12.png\" alt=\"\" class=\"wp-image-80\" srcset=\"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-content\/uploads\/sites\/5\/2024\/10\/image-12.png 257w, https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-content\/uploads\/sites\/5\/2024\/10\/image-12-146x300.png 146w\" sizes=\"auto, (max-width: 257px) 100vw, 257px\" \/><\/figure><\/div>","protected":false},"excerpt":{"rendered":"<p>Pre-loaders are displayed when a user initiates an action, and the webpage begins to load. They are buffering animations that appear while the website&#8217;s resources are loading. Thus, pre-loaders play a significant role in enhancing user experience. The Yaatra Blog Theme offers three distinct options for customizing the loading animation. To do so, Pro Features [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-15","post","type-post","status-publish","format-standard","hentry","category-general-settings"],"_links":{"self":[{"href":"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-json\/wp\/v2\/posts\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-json\/wp\/v2\/comments?post=15"}],"version-history":[{"count":4,"href":"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-json\/wp\/v2\/posts\/15\/revisions"}],"predecessor-version":[{"id":83,"href":"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-json\/wp\/v2\/posts\/15\/revisions\/83"}],"wp:attachment":[{"href":"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-json\/wp\/v2\/media?parent=15"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-json\/wp\/v2\/categories?post=15"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-json\/wp\/v2\/tags?post=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}