{"id":19409,"date":"2022-09-21T16:31:31","date_gmt":"2022-09-21T10:46:31","guid":{"rendered":"https:\/\/docs.blossomthemes.com\/mental-health-coach\/homepage-settings\/how-to-configure-banner-section\/"},"modified":"2022-09-21T17:38:47","modified_gmt":"2022-09-21T11:53:47","slug":"how-to-configure-banner-section","status":"publish","type":"docs","link":"https:\/\/docs.blossomthemes.com\/mental-health-coach\/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=\"398\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2022\/09\/1-25-1024x398.png\" alt=\"\" class=\"wp-image-19496\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2022\/09\/1-25-1024x398.png 1024w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2022\/09\/1-25-300x117.png 300w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2022\/09\/1-25-768x298.png 768w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2022\/09\/1-25-1536x597.png 1536w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2022\/09\/1-25.png 1750w\" 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, you can follow the instructions below.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Go to <strong>Appearance &gt; Customize &gt; Front Page Settings &gt; Banner Section.<\/strong><\/li><li>Choose either <strong>Static\/Video CTA Banner, Static\/Video Newsletter Banner, Banner as Slider, or 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 class=\"wp-block-list\"><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 to the banner section.<\/li><li>If you have uploaded a video to display in the Banner Section then you need to upload a banner image inside the <strong>Mobile Banner Image<\/strong> so that it will be displayed in mobile devices in place of the video.<\/li><li>Set<strong> Subtitle<\/strong> to add subtitle on the static\/video CTA banner section.<\/li><li>Set <strong>Title<\/strong> to add title on the static\/video CTA banner section.<\/li><li>Enter the description for the CTA banner inside the <strong>Description<\/strong> field.<\/li><li>Enter the<strong> Button Label <\/strong>and <strong>Button Link<\/strong>.<\/li><li>Enable or disable the blue button for <strong>&#8220;Open Button link in new tab&#8221;<\/strong>.<\/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=\"341\" height=\"875\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2022\/09\/1-26.png\" alt=\"\" class=\"wp-image-19511\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2022\/09\/1-26.png 341w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2022\/09\/1-26-117x300.png 117w\" 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 class=\"wp-block-list\"><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 to the banner section.<\/li><li>If you have uploaded a video to display in the Banner Section then you need to upload a banner image inside the <strong>Mobile Banner Image<\/strong> so that it will be displayed in mobile devices in place of the video.<\/li><li>Enter the<strong> Newsletter Shortcode<\/strong> inside the <strong>Banner Newsletter<\/strong> field to display the Newsletter on the banner section.<\/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=\"340\" height=\"881\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2022\/09\/1-27.png\" alt=\"\" class=\"wp-image-19514\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2022\/09\/1-27.png 340w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2022\/09\/1-27-116x300.png 116w\" sizes=\"(max-width: 340px) 100vw, 340px\" \/><\/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, Categories<\/strong>, a grey fallback image will appear in the Banner Section.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><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 <\/strong>or<strong> 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>Select the animation of the slider through the <strong>Slider Animation<\/strong> option.<\/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=\"343\" height=\"517\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2022\/09\/1-28.png\" alt=\"\" class=\"wp-image-19517\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2022\/09\/1-28.png 343w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2022\/09\/1-28-199x300.png 199w\" sizes=\"(max-width: 343px) 100vw, 343px\" \/><figcaption> <\/figcaption><\/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, you can follow the instructions below. Go to Appearance &gt; Customize &gt; Front Page Settings &gt; Banner Section. Choose either Static\/Video CTA Banner, Static\/Video Newsletter Banner, Banner [&hellip;]<\/p>\n","protected":false},"featured_media":0,"parent":19406,"menu_order":1,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[],"class_list":["post-19409","docs","type-docs","status-publish","hentry"],"comment_count":0,"_links":{"self":[{"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/19409"}],"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=19409"}],"version-history":[{"count":0,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/19409\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/19406"}],"next":[{"title":"How to Configure Client Section?","link":"https:\/\/docs.blossomthemes.com\/mental-health-coach\/homepage-settings\/how-to-configure-client-section\/","href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/19410"}],"prev":[{"title":"How to Set Up the Front\/Landing\/Home Page?","link":"https:\/\/docs.blossomthemes.com\/mental-health-coach\/homepage-settings\/how-to-set-up-the-front-landing-home-page\/","href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/19407"}],"wp:attachment":[{"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/media?parent=19409"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/doc_tag?post=19409"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}