{"id":125,"date":"2024-10-08T09:25:35","date_gmt":"2024-10-08T09:25:35","guid":{"rendered":"https:\/\/docs.codevibrant.com\/yaatra-blog\/?p=125"},"modified":"2024-10-08T09:25:35","modified_gmt":"2024-10-08T09:25:35","slug":"slider-settings-for-your-frontpage-in-yaatra-pro","status":"publish","type":"post","link":"https:\/\/docs.codevibrant.com\/yaatra-blog\/slider-settings-for-your-frontpage-in-yaatra-pro\/","title":{"rendered":"Slider Settings for your Frontpage in Yaatra Pro"},"content":{"rendered":"<div class=\"mt-docs-green-note\">\n<p>This feature is in the pro version of Yaatra Blog. Please make sure to purchase the Yaatra Pro to enable this feature on your website<\/p>\n<\/div>\n\n\n<p>You can feature sliders onto your website with Yaatra Pro. The pro version of Yaatra Blog allows you to add your own sliders that showcases on top of your banner to add post interactive features in your Frontpage.<\/p>\n\n\n\n<p>To add your Slider and customize them,<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to your WordPress Dashboard, and head to Appearance > Customize<\/li>\n\n\n\n<li>After that navigate to Frontpage settings and look for Slider Settings from given options<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"519\" src=\"http:\/\/docs.codevibrant.com\/yaatra-blog\/wp-content\/uploads\/sites\/5\/2024\/10\/Slider-in-yaatra-Pro-1024x519.jpg\" alt=\"\" class=\"wp-image-126\" srcset=\"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-content\/uploads\/sites\/5\/2024\/10\/Slider-in-yaatra-Pro-1024x519.jpg 1024w, https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-content\/uploads\/sites\/5\/2024\/10\/Slider-in-yaatra-Pro-300x152.jpg 300w, https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-content\/uploads\/sites\/5\/2024\/10\/Slider-in-yaatra-Pro-768x389.jpg 768w, https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-content\/uploads\/sites\/5\/2024\/10\/Slider-in-yaatra-Pro.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You can customize your slider from General tab and design it via Design tab<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to <strong>General tab<\/strong> and choose your preferred Slider Types<\/li>\n\n\n\n<li>You can choose from either Repeater Field or Post category for your slider types<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">If you chose Repeater Field<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on Front Slider <strong>drop-down menu<\/strong> to open up the settings for your sliders<\/li>\n\n\n\n<li>Add your images by clicking on the <strong>Select Image<\/strong> button<\/li>\n\n\n\n<li>Give title to your image from <strong>Slider Title<\/strong> section<\/li>\n\n\n\n<li>Provide short description for the Slider via <strong>Slider Content<\/strong> section<\/li>\n\n\n\n<li>Add your<strong> button text<\/strong> and <strong>URL<\/strong> consecutively from below sections<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"494\" src=\"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-content\/uploads\/sites\/5\/2024\/10\/image-23-1024x494.png\" alt=\"\" class=\"wp-image-127\" srcset=\"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-content\/uploads\/sites\/5\/2024\/10\/image-23-1024x494.png 1024w, https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-content\/uploads\/sites\/5\/2024\/10\/image-23-300x145.png 300w, https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-content\/uploads\/sites\/5\/2024\/10\/image-23-768x371.png 768w, https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-content\/uploads\/sites\/5\/2024\/10\/image-23.png 1195w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">If you chose Post Category Field<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select the desired <strong>Category <\/strong>from the given options in the drop-down menu<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"240\" height=\"460\" src=\"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-content\/uploads\/sites\/5\/2024\/10\/image-24.png\" alt=\"\" class=\"wp-image-128\" srcset=\"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-content\/uploads\/sites\/5\/2024\/10\/image-24.png 240w, https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-content\/uploads\/sites\/5\/2024\/10\/image-24-157x300.png 157w\" sizes=\"auto, (max-width: 240px) 100vw, 240px\" \/><\/figure><\/div>\n\n\n<p>Now to design your Sliders<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to <strong>Design tab<\/strong> to design your sliders<\/li>\n\n\n\n<li>There are three features you can quickly enable for your sliders\n<ul class=\"wp-block-list\">\n<li>Toggle on the <strong>auto slider feature<\/strong> to automate sliders to change in your frontpage<\/li>\n\n\n\n<li>Do the same to turn on <strong>pager function<\/strong> and to add the <strong>control buttons<\/strong> in your sliders<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Below the toggling options, you can choose the duration of the sliders to automatically change. Simply use the give slider or add your <strong>Slider Pause Duration<\/strong> manually to add pause duration for your sliders.<\/li>\n\n\n\n<li>Do the same for <strong>Slider Transitions<\/strong> for them to transit as per your likings.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"222\" height=\"551\" src=\"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-content\/uploads\/sites\/5\/2024\/10\/image-25.png\" alt=\"\" class=\"wp-image-129\" srcset=\"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-content\/uploads\/sites\/5\/2024\/10\/image-25.png 222w, https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-content\/uploads\/sites\/5\/2024\/10\/image-25-121x300.png 121w\" sizes=\"auto, (max-width: 222px) 100vw, 222px\" \/><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Choose your <strong>Slider Layouts<\/strong> from the given options to change them.<\/li>\n\n\n\n<li>Click on <strong>Publish <\/strong>button to save your changes for the sliders.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>This feature is in the pro version of Yaatra Blog. Please make sure to purchase the Yaatra Pro to enable this feature on your website You can feature sliders onto your website with Yaatra Pro. The pro version of Yaatra Blog allows you to add your own sliders that showcases on top of your banner [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-125","post","type-post","status-publish","format-standard","hentry","category-frontpage-settings"],"_links":{"self":[{"href":"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-json\/wp\/v2\/posts\/125","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=125"}],"version-history":[{"count":1,"href":"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-json\/wp\/v2\/posts\/125\/revisions"}],"predecessor-version":[{"id":130,"href":"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-json\/wp\/v2\/posts\/125\/revisions\/130"}],"wp:attachment":[{"href":"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-json\/wp\/v2\/media?parent=125"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-json\/wp\/v2\/categories?post=125"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.codevibrant.com\/yaatra-blog\/wp-json\/wp\/v2\/tags?post=125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}