{"id":146,"date":"2023-09-27T04:12:04","date_gmt":"2023-09-27T04:12:04","guid":{"rendered":"https:\/\/docs.codevibrant.com\/azure\/?p=146"},"modified":"2024-01-09T09:57:11","modified_gmt":"2024-01-09T09:57:11","slug":"how-to-configure-main-banner-settings","status":"publish","type":"post","link":"https:\/\/docs.codevibrant.com\/azure\/how-to-configure-main-banner-settings\/","title":{"rendered":"How to Configure Main Banner Settings?"},"content":{"rendered":"\n<p><strong>Main Banner<\/strong> is very important section of your website. You need to be extra careful when customizing your main banner.<\/p>\n\n\n\n<p>For you to get started, you\u2019ll need to know the elements you can configure in the <strong>Main Banner <\/strong>settings <strong>Following image<\/strong> will showcase you the elements of the <strong>Front Page<\/strong> that you can configure using <strong>Main Banner settings<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"494\" src=\"http:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/Main-Banner.jpg\" alt=\"Main banner\n\" class=\"wp-image-148\" style=\"width:822px;height:451px\" srcset=\"https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/Main-Banner.jpg 900w, https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/Main-Banner-300x165.jpg 300w, https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/Main-Banner-768x422.jpg 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/figure>\n\n\n\n<p>As you can see, <strong>Block<\/strong>, on the left-side of the image. In the middle, we have <strong>Slider<\/strong>, where the posts gradually slide showing your published posts. At the right side, we have <strong>Tab<\/strong>, where users can view your posts based on tabs: <strong>Latest<\/strong>, <strong>Popular<\/strong> and <strong>Trending<\/strong> by default.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Video Guidance<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Azure Complete Walkthrough\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/-BAtD90lTGg?start=1468&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\"><em>Starts from the relative timing of the video.<\/em><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Configuration Process of Main Banner<\/h2>\n\n\n\n<p>There are two tabs you\u2019ll need to consider before diving deep into the Main Banner Setting. They are: <strong>General<\/strong> and <strong>Design<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Block Settings<\/h3>\n\n\n\n<p>There are two different options in this section you are able to customize,<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Block Category<\/strong><\/li>\n\n\n\n<li><strong>Posts Order By<\/strong><\/li>\n<\/ul>\n\n\n\n<p>In this section, you can adjust which post to be seen in the <strong>Block <\/strong>based on <strong>Categories<\/strong> you\u2019ve devised.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Navigate to <strong>Block Category <\/strong>and select your desired Category in the post.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"401\" height=\"355\" src=\"https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/image-23.png\" alt=\"Block Category (Main Banner Settings)\" class=\"wp-image-149\" style=\"width:225px;height:199px\" srcset=\"https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/image-23.png 401w, https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/image-23-300x266.png 300w\" sizes=\"auto, (max-width: 401px) 100vw, 401px\" \/><\/figure><\/div>\n\n\n<p>In another section of the <strong>Block Settings<\/strong> you can sort your posts order in <strong>5 different orders<\/strong>.<\/p>\n\n\n\n<p>As given in image below:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"455\" height=\"314\" src=\"https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/image-24.png\" alt=\"Post Order\" class=\"wp-image-150\" style=\"width:268px;height:185px\" srcset=\"https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/image-24.png 455w, https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/image-24-300x207.png 300w\" sizes=\"auto, (max-width: 455px) 100vw, 455px\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">Slider Settings<\/h3>\n\n\n\n<p>There are three different options by which you can customize your <strong>Slider\u2019s <\/strong>setting:<\/p>\n\n\n\n<ol class=\"wp-block-list\" style=\"list-style-type:1\">\n<li><strong>Slider Category<\/strong><\/li>\n\n\n\n<li><strong>Post Order By<\/strong><\/li>\n\n\n\n<li><strong>Post Date Filter<\/strong><\/li>\n<\/ol>\n\n\n\n<p>As Block Settings, <strong>Slider Settings <\/strong>also has similar settings to select which post you will like to show based on <strong>Category<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Just do the same as Block, Navigate to <strong>Slider Category <\/strong>and select your desired Category in the post.<\/li>\n\n\n\n<li>Sorting the posts in the <strong>Slider <\/strong>is also similar, having same 5 different options.<\/li>\n<\/ul>\n\n\n\n<p>There is one extra customizing option in the Slider Settings, i.e., <strong>Post Date Filter. <\/strong>You can choose which post to publish based on their dates published<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Just click the drop-down menu below \u201c<strong>Post Date Filter<\/strong>\u201d and menu as given in the image will appear for you to select.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"411\" height=\"305\" src=\"https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/image-25.png\" alt=\"Post date Filter\" class=\"wp-image-151\" style=\"width:253px;height:188px\" srcset=\"https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/image-25.png 411w, https:\/\/docs.codevibrant.com\/azure\/wp-content\/uploads\/sites\/2\/2023\/09\/image-25-300x223.png 300w\" sizes=\"auto, (max-width: 411px) 100vw, 411px\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">Tab Settings<\/h3>\n\n\n\n<p>By default, there are three tabs in the <strong>Tab <\/strong>section.<\/p>\n\n\n\n<ol class=\"wp-block-list\" style=\"list-style-type:1\">\n<li><strong>Latest Tab<\/strong><\/li>\n\n\n\n<li><strong>Popular Tab<\/strong><\/li>\n\n\n\n<li><strong>Trending Tab<\/strong><\/li>\n<\/ol>\n\n\n\n<p>You can change the names of these tabs of your own choosing.<\/p>\n\n\n\n<p><strong>Just Click on the box of the tab name you want to change.<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You can only customize the post displaying on the <strong>Trending&nbsp; <\/strong>that too on the basis of <strong>Category <\/strong>which is also similar process as <strong>Slider<\/strong> or <strong>Block Settings<\/strong>&nbsp;<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Column Re-order Setting<\/h2>\n\n\n\n<p>The default order of the Column in the Main Banner is <strong>Block-Slider-Tabs<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You can just<strong> drag <\/strong>the<strong> hamburger icon (<\/strong>three lines on the top of each other<strong>) <\/strong>to the top, to display the tab on the left-most side of the screen. &nbsp;<\/li>\n<\/ul>\n\n\n\n<p>The tab on the middle will appear in the middle of the screen and tab on the bottom of the customizer will appear on the right most side of the screen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Main Banner is very important section of your website. You need to be extra careful when customizing your main banner. For you to get started, you\u2019ll need to know the elements you can configure in the Main Banner settings Following image will showcase you the elements of the Front Page that you can configure using [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,7],"tags":[],"class_list":["post-146","post","type-post","status-publish","format-standard","hentry","category-main-banner-settings","category-frontpage-settings"],"_links":{"self":[{"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/posts\/146","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/comments?post=146"}],"version-history":[{"count":3,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/posts\/146\/revisions"}],"predecessor-version":[{"id":406,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/posts\/146\/revisions\/406"}],"wp:attachment":[{"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/media?parent=146"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/categories?post=146"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.codevibrant.com\/azure\/wp-json\/wp\/v2\/tags?post=146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}