{"id":13973,"date":"2021-07-26T17:16:36","date_gmt":"2021-07-26T11:31:36","guid":{"rendered":"https:\/\/docs.blossomthemes.com\/seva-business\/homepage-settings\/how-to-configure-banner-section\/"},"modified":"2021-07-27T13:05:24","modified_gmt":"2021-07-27T07:20:24","slug":"how-to-configure-banner-section","status":"publish","type":"docs","link":"https:\/\/docs.blossomthemes.com\/seva-business\/homepage-settings\/how-to-configure-banner-section\/","title":{"rendered":"How to Configure Banner Section?"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\" id=\"block-45f24252-3910-4201-a86e-682ce72b43f5\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"433\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/07\/1-62-1024x433.png\" alt=\"\" class=\"wp-image-14034\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/07\/1-62-1024x433.png 1024w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/07\/1-62-300x127.png 300w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/07\/1-62-768x325.png 768w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/07\/1-62.png 1511w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p id=\"block-704b14c0-11c2-4ed5-bb8f-2d79d89add8d\">You can choose a static image, video, or slider as your banner. The banner will be displayed at the top of your website.<\/p>\n\n\n\n<p id=\"block-e510d179-19e6-4123-a852-b9ee05af9cb7\">To set up your banner:<\/p>\n\n\n\n<ul class=\"wp-block-list\" id=\"block-3f8911d3-c138-4612-86ce-df33b185a677\"><li>Go to <strong>Appearance &gt; Customize &gt; Front Page Settings &gt; Banner Section.<\/strong><\/li><li>Choose either <strong>Static\/Video CTA Banner, Banner as Slider,&nbsp; or Disable Banner Section <\/strong>(if you do not want a banner).<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"block-fafa7935-c4b3-4930-83d4-36c9593fed45\"><strong>Static\/Video CTA Banner<\/strong><\/h2>\n\n\n\n<p id=\"block-39fbee1b-6b81-4c9f-81a0-34dfc1f00d13\"><strong>Note<\/strong>: If you have added a video, the image will not be displayed. You can either use an image or a video in the banner section at a time. In the mobile view, the video will not be displayed to save bandwidth, instead, the fallback image will be displayed. So we recommend you add a banner image as well.<\/p>\n\n\n\n<ul class=\"wp-block-list\" id=\"block-9eae77a6-2e0c-49f4-ba3b-2e4284cdfa1b\"><li>Go to <strong>Appearance > Customize > Front Page Settings > Banner Section.<\/strong><\/li><li>Choose<strong> Static\/Video CTA Banner<\/strong> in the Banner Options.<\/li><li>Click on <strong>Select video<\/strong> to upload the video of your choice in the Banner Section or you can also add the Youtube URL for a video.<\/li><li>If you want to display a static image, click on <strong>Add New Image<\/strong> to upload the desired image on the banner section.<\/li><li>Set the <strong>Title<\/strong>, <strong>Subtitle<\/strong>, and <strong>Description<\/strong> on the static\/video CTA banner section.<\/li><li>Enter the Button Label, Button Link.<\/li><li>Select the alignment of the Banner Caption from the <strong>Banner Caption Alignment.<\/strong><\/li><li>Choose a Secondary Image for CTA banner section.<\/li><li>Click <strong>Publish.\u00a0<\/strong><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\" id=\"block-ca331797-204a-4741-81e2-2b22f28b3e26\"><img loading=\"lazy\" decoding=\"async\" width=\"328\" height=\"922\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/07\/1-63.png\" alt=\"\" class=\"wp-image-14036\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/07\/1-63.png 328w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/07\/1-63-107x300.png 107w\" sizes=\"(max-width: 328px) 100vw, 328px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"block-d2c3f2f0-97fc-4519-9bf7-e38b649dedc4\"><strong>Banner as Slider<\/strong><\/h2>\n\n\n\n<p id=\"block-7f21c361-7c1b-4584-bacb-030e96d49e6f\"><strong>Note<\/strong>: Before you choose <strong>Latest Posts or Category<\/strong> in the Slider Content Style, make sure that you have created these beforehand. You can create Posts via <strong>Posts &gt; Add New<\/strong>, Category via <strong>Posts &gt; Categories<\/strong>. If there are not enough <strong>Posts or Categories<\/strong>, a grey fallback image will appear in the Banner Section.<\/p>\n\n\n\n<ul class=\"wp-block-list\" id=\"block-e5fe634e-ea03-423b-949f-455e9aa61049\"><li>Go to <strong>Appearance >\u00a0 Customize > Front Page Settings > Banner Section.<\/strong><\/li><li>Choose <strong>Banner as Slider<\/strong> in the Banner Options.<\/li><li>Select either <strong>Latest Posts or Category<\/strong>\u00a0in the Slider Content Style.<\/li><li>Control the number of slides to be displayed through the <strong>Number of Slides<\/strong> option.<\/li><li>Enable <strong>Slider Auto<\/strong> for the auto transition of the slider.<\/li><li>Enable <strong>Slider Loop<\/strong> for the continuation of the slider.<\/li><li>Enable <strong>Slider Caption<\/strong> to display text on the slider.<\/li><li>Enable <strong>Full Image<\/strong> to display the full image on the slider.<\/li><li>Select the animation of the slider through the <strong>Slider Animation<\/strong> option.<\/li><li>Select the speed of the slider.<\/li><li>Enter the label for the read more button in the\u00a0<strong>Slider Read More<\/strong>\u00a0field.<\/li><li>Click <strong>Publish.<\/strong><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\" id=\"block-30a0f5bb-4603-4521-b8bf-6f10715d9310\"><img loading=\"lazy\" decoding=\"async\" width=\"326\" height=\"918\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/07\/1-64.png\" alt=\"\" class=\"wp-image-14037\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/07\/1-64.png 326w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/07\/1-64-107x300.png 107w\" sizes=\"(max-width: 326px) 100vw, 326px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>You can choose a static image, video, or slider as your banner. The banner will be displayed at the top of your website. To set up your banner: Go to Appearance &gt; Customize &gt; Front Page Settings &gt; Banner Section. Choose either Static\/Video CTA Banner, Banner as Slider,&nbsp; or Disable Banner Section (if you do [&hellip;]<\/p>\n","protected":false},"featured_media":0,"parent":13971,"menu_order":1,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[],"class_list":["post-13973","docs","type-docs","status-publish","hentry"],"comment_count":0,"_links":{"self":[{"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/13973"}],"collection":[{"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/types\/docs"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/comments?post=13973"}],"version-history":[{"count":0,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/13973\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/13971"}],"next":[{"title":"How to Configure the Newsletter Section?","link":"https:\/\/docs.blossomthemes.com\/seva-business\/homepage-settings\/how-to-configure-the-newsletter-section\/","href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/13974"}],"prev":[{"title":"How to Configure Homepage and Blog Page?","link":"https:\/\/docs.blossomthemes.com\/seva-business\/homepage-settings\/how-to-configure-homepage-and-blog-page\/","href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/13972"}],"wp:attachment":[{"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/media?parent=13973"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/doc_tag?post=13973"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}