{"id":17341,"date":"2021-12-29T13:11:58","date_gmt":"2021-12-29T07:26:58","guid":{"rendered":"https:\/\/docs.blossomthemes.com\/blossom-magazine\/homepage-settings\/how-to-configure-banner-section\/"},"modified":"2022-02-11T15:16:52","modified_gmt":"2022-02-11T09:31:52","slug":"how-to-configure-banner-section","status":"publish","type":"docs","link":"https:\/\/docs.blossomthemes.com\/blossom-magazine\/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=\"627\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/12\/1-67-1024x627.png\" alt=\"\" class=\"wp-image-17544\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/12\/1-67-1024x627.png 1024w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/12\/1-67-300x184.png 300w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/12\/1-67-768x470.png 768w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/12\/1-67.png 1204w\" 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<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=\"Create A Multipurpose Magazine Style Website In 2022 | Blossom Magazine WordPress Theme\" width=\"1024\" height=\"576\" src=\"https:\/\/www.youtube.com\/embed\/2SkRzMUIX0Q?start=2584&#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<p>To set up your banner:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Go to&nbsp;<strong>Appearance &gt; Customize &gt; Frontpage Settings &gt; Banner Section.<\/strong><\/li><li>Choose either&nbsp;<strong>Banner as Slider,&nbsp;Static\/Video CTA Banner,&nbsp;or Disable Banner Section&nbsp;<\/strong>(if you do not want a banner).<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"banner-as-slider\"><strong>Banner as Slider<\/strong><\/h2>\n\n\n\n<p><strong>Note<\/strong>: Before you choose&nbsp;<strong>Latest Posts or Category<\/strong>&nbsp;in the Slider Content Style, make sure that you have made these beforehand. You can create Posts via&nbsp;<strong>Posts &gt; Add New<\/strong>&nbsp;and category via&nbsp;<strong>Posts &gt; Categories<\/strong>. If there are not enough&nbsp;<strong>Posts or Categories,<\/strong>&nbsp;a grey fallback will appear in the Banner Section.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Go to&nbsp;<strong>Appearance &gt;&nbsp;Customize &gt; Frontpage Settings &gt; Banner Section.<\/strong><\/li><li>Choose&nbsp;<strong>Banner as Slider<\/strong>&nbsp;in the&nbsp;<strong>Banner Options<\/strong>.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><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<ul class=\"wp-block-list\"><li>Select either the&nbsp;<strong>Latest Posts or Category&nbsp;<\/strong>in the Slider Content Style.<\/li><li>Select the <strong>Number of Slides<\/strong> you want to display.<\/li><li>Enable <strong>Include repetitive posts<\/strong>&nbsp;to add posts included in the slider in the blog page too.<\/li><li>Enable&nbsp;<strong>Slider Auto<\/strong>&nbsp;for the auto transition of the slider.<\/li><li>Enable&nbsp;<strong>Slider Loop<\/strong>&nbsp;for the continuation of the slider.<\/li><li>Enable&nbsp;<strong>Slider Caption<\/strong>&nbsp;for Showing caption on each slider.<\/li><li>Choose the<strong>&nbsp;Slider Animation<\/strong>.<\/li><li>Select the<strong>&nbsp;Slider Speed<\/strong>.<\/li><li>Click&nbsp;<strong>Publish.<\/strong><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"343\" height=\"879\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/12\/1-68.png\" alt=\"\" class=\"wp-image-17546\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/12\/1-68.png 343w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/12\/1-68-117x300.png 117w\" sizes=\"(max-width: 343px) 100vw, 343px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"static-image-or-video-cta-banner\"><strong>Static Image or 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&nbsp;<strong>Appearance &gt; Customize &gt; Frontpage Settings &gt; Banner Section.<\/strong><\/li><li>Choose<strong>&nbsp;Static\/Video CTA Banner<\/strong>&nbsp;in the Banner Options.<\/li><li>Click on&nbsp;<strong>Select video<\/strong>&nbsp;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&nbsp;<strong>Add New Image<\/strong>&nbsp;to upload the desired image on the banner section.<\/li><li>Set <strong>Title<\/strong>&nbsp;and&nbsp;<strong>Sub Title<\/strong>&nbsp;for the static\/video CTA banner section.<\/li><li>Enter the&nbsp;<strong>Description&nbsp;<\/strong>for the static\/video CTA banner section<\/li><li>Enter the&nbsp;<strong>label<\/strong>&nbsp;for the Banner Button.<\/li><li>Enter the&nbsp;<strong>Link<\/strong>&nbsp;for the Banner Button.<\/li><li>Enable\/ Disable&nbsp;<strong>open in new tab<\/strong>&nbsp;option.<\/li><li>Enter the&nbsp;<strong>label<\/strong>&nbsp;for the Banner Button Two.<\/li><li>Enter the&nbsp;<strong>Link<\/strong>&nbsp;for the Banner Button Two.<\/li><li>Enable\/ Disable&nbsp;<strong>open in new tab<\/strong>&nbsp;option.<\/li><li>Choose<strong>&nbsp;Alignment<\/strong>&nbsp;for banner caption.<\/li><li>Click&nbsp;<strong>Publish.&nbsp;<\/strong><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"342\" height=\"920\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/12\/1-69.png\" alt=\"\" class=\"wp-image-17547\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/12\/1-69.png 342w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/12\/1-69-112x300.png 112w\" 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&nbsp;Appearance &gt; Customize &gt; Frontpage Settings &gt; Banner Section. Choose either&nbsp;Banner as Slider,&nbsp;Static\/Video CTA Banner,&nbsp;or Disable Banner Section&nbsp;(if you do not want a banner). Banner as [&hellip;]<\/p>\n","protected":false},"featured_media":0,"parent":17340,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[],"class_list":["post-17341","docs","type-docs","status-publish","hentry"],"comment_count":0,"_links":{"self":[{"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/17341"}],"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=17341"}],"version-history":[{"count":0,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/17341\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/17340"}],"next":[{"title":"How to Configure the CTA Section?","link":"https:\/\/docs.blossomthemes.com\/blossom-magazine\/homepage-settings\/how-to-configure-the-cta-section\/","href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/17342"}],"wp:attachment":[{"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/media?parent=17341"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/doc_tag?post=17341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}