{"id":15870,"date":"2021-10-01T17:22:35","date_gmt":"2021-10-01T11:37:35","guid":{"rendered":"https:\/\/docs.blossomthemes.com\/business-coach\/front-page-settings\/how-to-configure-banner-section\/"},"modified":"2021-11-16T16:24:33","modified_gmt":"2021-11-16T10:39:33","slug":"how-to-configure-banner-section","status":"publish","type":"docs","link":"https:\/\/docs.blossomthemes.com\/business-coach\/front-page-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=\"387\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/11\/1-105-1024x387.png\" alt=\"\" class=\"wp-image-16833\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/11\/1-105-1024x387.png 1024w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/11\/1-105-300x114.png 300w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/11\/1-105-768x291.png 768w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/11\/1-105-1536x581.png 1536w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/11\/1-105.png 1821w\" 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><li>Go to <strong>Appearance > Customize > Front Page Settings > Banner Section.<\/strong><\/li><li>Choose either <strong>Static\/Video CTA Banner,<\/strong> <strong>Static\/Video Newsletter Banner, Banner as Slider,\u00a0or Disable Banner Section <\/strong>(if you do not want a banner).<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Static\/Video CTA 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 add a banner image as well. <\/p>\n\n\n\n<ul><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>Enter the<strong> Subtitle, Title <\/strong>and<strong> Description<\/strong> for the banner section.<\/li><li>Enter <strong>Button Label<\/strong> and <strong>Button Link<\/strong>.<\/li><li>Enable\/Disable the blue button to <strong>Enable to open in new window<\/strong>.<\/li><li>Select the <strong>Banner Image Alignment.<\/strong><\/li><li>Select the <strong>Banner Caption Alignment.<\/strong><\/li><li>Click <strong>Publish.\u00a0<\/strong><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"341\" height=\"905\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/11\/1-106.png\" alt=\"\" class=\"wp-image-16835\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/11\/1-106.png 341w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/11\/1-106-113x300.png 113w\" sizes=\"(max-width: 341px) 100vw, 341px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Static\/Video Newsletter 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 add a banner image as well.<\/p>\n\n\n\n<ul><li>Go to <strong>Appearance > Customize > Front Page Settings > Banner Section.<\/strong><\/li><li>Choose<strong> Static\/Video Newsletter 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>Enter the<strong> Newsletter Shortcode<\/strong> to display the Newsletter on the banner section.<\/li><li>Select the <strong>Banner Image Alignment.<\/strong><\/li><li>Click <strong>Publish.\u00a0<\/strong><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"342\" height=\"915\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/11\/1-107.png\" alt=\"\" class=\"wp-image-16836\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/11\/1-107.png 342w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/11\/1-107-112x300.png 112w\" sizes=\"(max-width: 342px) 100vw, 342px\" \/><\/figure>\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 <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 > Add New<\/strong>, Category via <strong>Posts > Categories<\/strong>. If there are not enough <strong>Posts <\/strong>or<strong> Categories<\/strong>\u00a0a grey fallback image will appear in the Banner Section.<\/p>\n\n\n\n<ul><li>Go to <strong>Appearance > 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>Different options are displayed based on the option you choose on 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>Select the animation of the slider through the <strong>Slider Animation<\/strong> option.<\/li><li>Enter the title of the read more button in the <strong>Slider Readmore<\/strong> field.<\/li><li>Click <strong>Publish.<\/strong><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"342\" height=\"835\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/11\/1-108.png\" alt=\"\" class=\"wp-image-16837\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/11\/1-108.png 342w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/11\/1-108-123x300.png 123w\" sizes=\"(max-width: 342px) 100vw, 342px\" \/><\/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 > Customize > Front Page Settings > Banner Section. Choose either Static\/Video CTA Banner, Static\/Video Newsletter Banner, Banner as Slider,\u00a0or Disable Banner Section (if [&hellip;]<\/p>\n","protected":false},"featured_media":0,"parent":15868,"menu_order":1,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[],"_links":{"self":[{"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/15870"}],"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=15870"}],"version-history":[{"count":2,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/15870\/revisions"}],"predecessor-version":[{"id":16838,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/15870\/revisions\/16838"}],"up":[{"embeddable":true,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/15868"}],"next":[{"title":"How to Configure Client Section?","link":"https:\/\/docs.blossomthemes.com\/business-coach\/front-page-settings\/how-to-configure-client-section\/","href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/15871"}],"prev":[{"title":"How to Configure Homepage and Blog Page?","link":"https:\/\/docs.blossomthemes.com\/business-coach\/front-page-settings\/how-to-configure-homepage-and-blog-page\/","href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/15869"}],"wp:attachment":[{"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/media?parent=15870"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/doc_tag?post=15870"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}