{"id":15779,"date":"2021-10-01T17:03:57","date_gmt":"2021-10-01T11:18:57","guid":{"rendered":"https:\/\/docs.blossomthemes.com\/blossom-ecommerce\/homepage-settings\/how-to-configure-banner-section\/"},"modified":"2021-11-11T19:14:04","modified_gmt":"2021-11-11T13:29:04","slug":"how-to-configure-banner-section","status":"publish","type":"docs","link":"https:\/\/docs.blossomthemes.com\/blossom-ecommerce\/homepage-settings\/how-to-configure-banner-section\/","title":{"rendered":"How to Configure Banner Section?"},"content":{"rendered":"\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-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"453\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/11\/1-58-1024x453.png\" alt=\"\" class=\"wp-image-16645\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/11\/1-58-1024x453.png 1024w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/11\/1-58-300x133.png 300w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/11\/1-58-768x340.png 768w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/11\/1-58-1536x679.png 1536w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/11\/1-58.png 1538w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/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; Front Page Settings &gt; Banner Section<\/strong><\/li><li>Choose either&nbsp;<strong>Banner as Slider, Static\/Video Banner, or Disable Banner<\/strong>&nbsp;(if you do not want banner at all)<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"283\" height=\"341\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/08\/banner-setting.png\" alt=\"\" class=\"wp-image-6185\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/08\/banner-setting.png 283w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/08\/banner-setting-249x300.png 249w\" sizes=\"(max-width: 283px) 100vw, 283px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Banner<\/strong> <strong>as Slider<\/strong><\/h2>\n\n\n\n<p><strong>Note<\/strong>: Before you choose <strong>Latest Posts or Category<\/strong> to be displayed in the Banner section, you have to create enough posts and categories. You can add posts and categories via <strong>Posts &gt; New Post<\/strong> and <strong>Posts &gt; Categories<\/strong>. If there are not enough posts or categories, a grey image will be displayed in the banner section.<\/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\u00a0<strong>Banner as Slider<\/strong><\/li><li>Select either\u00a0<strong>Latest Posts or Category<\/strong> to be displayed in your Banner section. In this theme, you can select either Latest Posts or Category to be displayed in the Banner Section, however, in the pro theme, you can select Latest Posts, Category,\u00a0 Pages. Moreover, you can even create your own custom banner.<\/li><li>Select the <strong>Number of Slides<\/strong> that you want to display.<\/li><li>Enable <strong>Slider Auto<\/strong> for the auto transition of the slider.<\/li><li>Select <strong>Slider Animation.<\/strong><\/li><li>Enter the label for <strong>Slider Read More <\/strong>Button.<\/li><li>Click on\u00a0<strong>Publish<\/strong><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"342\" height=\"722\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/11\/1-59.png\" alt=\"\" class=\"wp-image-16646\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/11\/1-59.png 342w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/11\/1-59-142x300.png 142w\" sizes=\"(max-width: 342px) 100vw, 342px\" \/><\/figure>\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 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\u00a0<strong>Static\/Video Banner<\/strong><\/li><li>Click on\u00a0<strong>Select Video<\/strong>\u00a0to upload the video of your choice to the banner section or you can also\u00a0<strong>enter a YouTube URL<\/strong>\u00a0of the video.<\/li><li>If you want to display a static image, click on\u00a0<strong>Add new image<\/strong>\u00a0to upload the desired picture as a banner image<\/li><li>Enter the\u00a0<strong>Title\u00a0<\/strong>and\u00a0<strong>Subtitle\u00a0<\/strong>for Banner section.<\/li><li>Enter the\u00a0<strong>Banner Label\u00a0<\/strong>and\u00a0<strong>Banner Link<\/strong>.<\/li><li>Select <strong>Banner Caption Alignment.<\/strong><\/li><li>Click on\u00a0<strong>Publish<\/strong><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"339\" height=\"914\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/11\/1-60.png\" alt=\"\" class=\"wp-image-16648\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/11\/1-60.png 339w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2021\/11\/1-60-111x300.png 111w\" sizes=\"(max-width: 339px) 100vw, 339px\" \/><\/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; Front Page Settings &gt; Banner Section Choose either&nbsp;Banner as Slider, Static\/Video Banner, or Disable Banner&nbsp;(if you do not want banner at all) [&hellip;]<\/p>\n","protected":false},"featured_media":0,"parent":15777,"menu_order":1,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[],"class_list":["post-15779","docs","type-docs","status-publish","hentry"],"comment_count":0,"_links":{"self":[{"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/15779"}],"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=15779"}],"version-history":[{"count":0,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/15779\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/15777"}],"next":[{"title":"How to Configure Service Section?","link":"https:\/\/docs.blossomthemes.com\/blossom-ecommerce\/homepage-settings\/how-to-configure-service-section\/","href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/15780"}],"prev":[{"title":"How to Configure Homepage and Blog Page?","link":"https:\/\/docs.blossomthemes.com\/blossom-ecommerce\/homepage-settings\/how-to-configure-homepage-and-blog-page\/","href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/15778"}],"wp:attachment":[{"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/media?parent=15779"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/doc_tag?post=15779"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}