{"id":10578,"date":"2020-12-25T16:37:23","date_gmt":"2020-12-25T10:52:23","guid":{"rendered":"https:\/\/docs.blossomthemes.com\/coachpress-lite\/homepage-settings\/how-to-configure-banner-section\/"},"modified":"2021-02-08T18:44:36","modified_gmt":"2021-02-08T12:59:36","slug":"how-to-configure-banner-section","status":"publish","type":"docs","link":"https:\/\/docs.blossomthemes.com\/coachpress-lite\/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=\"545\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2020\/12\/banner-1024x545.png\" alt=\"\" class=\"wp-image-10589\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2020\/12\/banner-1024x545.png 1024w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2020\/12\/banner-300x160.png 300w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2020\/12\/banner-768x409.png 768w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2020\/12\/banner.png 1391w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You can choose a static image, video, or a 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 refer to the video or follow the instructions below.<\/p>\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=\"Start a Lead Generating Coaching Website in 2021 | CoachPress Lite\" width=\"1024\" height=\"576\" src=\"https:\/\/www.youtube.com\/embed\/-_hg-aj2PBc?start=1301&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\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, <\/strong><strong>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\"><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 to add a banner image as well.<\/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<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><strong>Set Title<\/strong> to add title on the static\/video CTA banner section.<\/li><li><strong>Set Subtitle<\/strong> to add subtitle on the static\/video CTA banner section.<\/li><li>Enter the Button Label, Button Link.<\/li><li>Enable or disable the blue button for <strong>&#8220;Button one open in new window&#8221;<\/strong>.<\/li><li>Enter the Button Two Label, Button Two Link.<\/li><li>Enable or disable the blue button for <strong>&#8220;<strong>Button two open in new window<\/strong>&#8220;<\/strong>.<\/li><li>Select the alignment of the Banner Caption Alignment.<\/li><li>Click <strong>Publish.&nbsp;<\/strong><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"324\" height=\"906\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2020\/12\/ctabanner.png\" alt=\"\" class=\"wp-image-10590\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2020\/12\/ctabanner.png 324w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2020\/12\/ctabanner-107x300.png 107w\" sizes=\"(max-width: 324px) 100vw, 324px\" \/><\/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 to add a banner image as well.<\/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<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 alignment of the Banner Caption.<\/li><li>Click <strong>Publish.&nbsp;<\/strong><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"332\" height=\"896\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2020\/12\/newsletter-banner.png\" alt=\"\" class=\"wp-image-10591\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2020\/12\/newsletter-banner.png 332w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2020\/12\/newsletter-banner-111x300.png 111w\" sizes=\"(max-width: 332px) 100vw, 332px\" \/><\/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, 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, 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 &gt;&nbsp; Customize &gt; Front Page Settings &gt; Banner Section.<\/strong><\/li><li>Choose <strong>Banner as Slider<\/strong> in the Banner Options.<\/li><li>Select either <strong>Latest Posts, Category<\/strong>&nbsp;in the Slider Content Style. In this theme, you can even make your own <strong>Custom Slider<\/strong>.<\/li><li>Enter text in the <strong>Slider Subtitle<\/strong>.<\/li><li>Enter the Label in the <strong>Button One Label<\/strong>.<\/li><li>Enter the Link in the <strong>Button One Link<\/strong>.<\/li><li>Enable\/Disable the Button for <strong>&#8220;Button one Open in New tab&#8221;<\/strong> to open the link in new tab.<\/li><li>Enter the title of the read more button in the <strong>Slider Read More<\/strong> field.<\/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>Click <strong>Publish.<\/strong><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"325\" height=\"913\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2020\/11\/bannerasslider.png\" alt=\"\" class=\"wp-image-10060\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2020\/11\/bannerasslider.png 325w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2020\/11\/bannerasslider-107x300.png 107w\" sizes=\"(max-width: 325px) 100vw, 325px\" \/><figcaption> <\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>You can choose a static image, video, or a slider as your banner. The banner will be displayed at the top of your website. To set up your banner, you can refer to the video or follow the instructions below. Go to Appearance &gt; Customize &gt; Front Page Settings &gt; Banner Section. Choose either Static\/Video [&hellip;]<\/p>\n","protected":false},"featured_media":0,"parent":10576,"menu_order":1,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[],"class_list":["post-10578","docs","type-docs","status-publish","hentry"],"comment_count":0,"_links":{"self":[{"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/10578"}],"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=10578"}],"version-history":[{"count":0,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/10578\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/10576"}],"next":[{"title":"How to Configure the Newsletter Section?","link":"https:\/\/docs.blossomthemes.com\/coachpress-lite\/homepage-settings\/how-to-configure-the-newsletter-section\/","href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/10579"}],"prev":[{"title":"How to Configure Homepage and Blog Page?","link":"https:\/\/docs.blossomthemes.com\/coachpress-lite\/homepage-settings\/how-to-configure-homepage-and-blog-page\/","href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/10577"}],"wp:attachment":[{"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/media?parent=10578"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/doc_tag?post=10578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}