{"id":17048,"date":"2021-12-20T14:45:59","date_gmt":"2021-12-20T09:00:59","guid":{"rendered":"https:\/\/docs.blossomthemes.com\/blossom-magazine-pro\/homepage-settings\/how-to-configure-banner-section\/"},"modified":"2021-12-20T18:41:56","modified_gmt":"2021-12-20T12:56:56","slug":"how-to-configure-banner-section","status":"publish","type":"docs","link":"https:\/\/docs.blossomthemes.com\/blossom-magazine-pro\/homepage-settings\/how-to-configure-banner-section\/","title":{"rendered":"How to Configure Banner Section?"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"626\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/12\/b4-1024x626.png\" alt=\"\" class=\"wp-image-17109\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/12\/b4-1024x626.png 1024w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/12\/b4-300x183.png 300w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/12\/b4-768x470.png 768w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/12\/b4.png 1326w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>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>To set up your banner:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Go to\u00a0<strong>Appearance > Customize > Front Page Settings > Banner Section.<\/strong><\/li><li>Choose either\u00a0<strong>Banner as Slider,\u00a0<strong>Static\/Video CTA Banner,<\/strong> or Disable Banner Section\u00a0<\/strong>(if you do not want a banner).<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Banner as Slider<\/strong><\/h2>\n\n\n\n<p><strong>Note<\/strong>: Before you choose\u00a0<strong>Latest Posts or Category<\/strong>\u00a0in the Slider Content Style, make sure that you have made these beforehand. You can create Posts via\u00a0<strong>Posts > Add New<\/strong> and category via\u00a0<strong>Posts > Categories<\/strong>. If there are not enough\u00a0<strong>Posts or Categories,<\/strong> a grey fallback will appear in the Banner Section.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Go to\u00a0<strong>Appearance >\u00a0 Customize > Front Page Settings > Banner Section.<\/strong><\/li><li>Choose\u00a0<strong>Banner as Slider<\/strong>\u00a0in the <strong>Banner Options<\/strong>.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"327\" height=\"407\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/12\/b6-2.png\" alt=\"\" class=\"wp-image-17156\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/12\/b6-2.png 327w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/12\/b6-2-241x300.png 241w\" sizes=\"(max-width: 327px) 100vw, 327px\" \/><\/figure>\n\n\n\n<p><li>Select either the <strong>Latest Posts, Category, Custom, Pages <\/strong>in the Slider Content Style. <\/li><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"332\" height=\"536\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/12\/b7.png\" alt=\"\" class=\"wp-image-17157\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/12\/b7.png 332w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/12\/b7-186x300.png 186w\" sizes=\"(max-width: 332px) 100vw, 332px\" \/><\/figure>\n\n\n\n<p> <li>Different options are displayed based on the option you choose on the Slider Content Style.<\/li><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"330\" height=\"599\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/12\/b10.png\" alt=\"\" class=\"wp-image-17154\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/12\/b10.png 330w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/12\/b10-165x300.png 165w\" sizes=\"(max-width: 330px) 100vw, 330px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>Enable I<strong>nclude repetitive posts<\/strong> to add posts included in the slider in the blog page too.<\/li><li>Enable\u00a0<strong>Slider Auto<\/strong>\u00a0for the auto transition of the slider.<\/li><li>Enable\u00a0<strong>Slider Loop<\/strong>\u00a0for the continuation of the slider.<\/li><li>Enable <strong>Slider Caption<\/strong> for Showing caption on each slider. <\/li><li>Choose the<strong> Slider Animation<\/strong>. <\/li><li>Select the<strong> Slider Speed<\/strong>. <\/li><li>Click\u00a0<strong>Publish.<\/strong><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Static Image or Video Banner<\/strong><\/h2>\n\n\n\n<p><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 to add a banner image as well.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Go to\u00a0<strong>Appearance > Customize > Front Page Settings > Banner Section.<\/strong><\/li><li>Choose<strong>\u00a0Static\/Video Banner<\/strong>\u00a0in the Banner Options.<\/li><li>Click on\u00a0<strong>Select video<\/strong>\u00a0to 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\u00a0<strong>Add New Image<\/strong>\u00a0to upload the desired image on the banner section.<\/li><li><strong>Set Title<\/strong>\u00a0and\u00a0<strong>Sub Title<\/strong>\u00a0to add title on static\/video banner section.<\/li><li>Enter the <strong>Description <\/strong>on static\/video banner section<\/li><li>Enter the <strong>label<\/strong> for the Banner Button.<\/li><li>Enter the <strong>Link<\/strong> for the Banner Button.<\/li><li>Enable\/ Disable <strong>open in new tab<\/strong> option.<\/li><li>Enter the <strong>label<\/strong> for the Banner Button Two.<\/li><li>Enter the <strong>Link<\/strong> for the Banner Button Two.<\/li><li>Enable\/ Disable <strong>open in new tab<\/strong> option.<\/li><li>Choose<strong> Alignment<\/strong> for banner caption. <\/li><li>Click\u00a0<strong>Publish.\u00a0<\/strong><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"329\" height=\"893\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/12\/b11.png\" alt=\"\" class=\"wp-image-17162\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/12\/b11.png 329w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/12\/b11-111x300.png 111w\" sizes=\"(max-width: 329px) 100vw, 329px\" \/><\/figure>\n\n\n\n<p> <\/p>\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\u00a0Appearance > Customize > Front Page Settings > Banner Section. Choose either\u00a0Banner as Slider,\u00a0Static\/Video CTA Banner, or Disable Banner Section\u00a0(if you do not want a banner). [&hellip;]<\/p>\n","protected":false},"featured_media":0,"parent":17047,"menu_order":1,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[],"class_list":["post-17048","docs","type-docs","status-publish","hentry"],"comment_count":0,"_links":{"self":[{"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/17048"}],"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=17048"}],"version-history":[{"count":0,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/17048\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/17047"}],"next":[{"title":"How to Configure the CTA Section?","link":"https:\/\/docs.blossomthemes.com\/blossom-magazine-pro\/homepage-settings\/how-to-configure-the-cta-section\/","href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/17052"}],"prev":[{"title":"How to Configure the News Ticker Section?","link":"https:\/\/docs.blossomthemes.com\/blossom-magazine-pro\/homepage-settings\/how-to-configure-the-news-ticker-section\/","href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/17049"}],"wp:attachment":[{"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/media?parent=17048"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/doc_tag?post=17048"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}