{"id":6179,"date":"2019-08-01T12:28:41","date_gmt":"2019-08-01T06:43:41","guid":{"rendered":"https:\/\/docs.blossomthemes.com\/docs\/blossom-shop\/homepage-settings\/how-to-configure-banner-layout-and-content\/"},"modified":"2022-07-11T10:06:05","modified_gmt":"2022-07-11T04:21:05","slug":"how-to-configure-banner-layout-and-content","status":"publish","type":"docs","link":"https:\/\/docs.blossomthemes.com\/blossom-shop\/homepage-settings\/how-to-configure-banner-layout-and-content\/","title":{"rendered":"How to Configure Banner Layout and Content?"},"content":{"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.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6317\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/08\/banner.png\" alt=\"banner\" width=\"1346\" height=\"653\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/08\/banner.png 1346w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/08\/banner-300x146.png 300w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/08\/banner-768x373.png 768w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/08\/banner-1024x497.png 1024w\" sizes=\"(max-width: 1346px) 100vw, 1346px\" \/><\/p>\n<p class=\"red note\">The <a href=\"https:\/\/blossomthemes.com\/downloads\/blossom-shop-pro\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Pro<\/strong><\/a> version of this theme offers many extra options.You can choose from 6 different slider layouts. You can choose to display the Newsletter in the Banner Section. There is an advanced search option as well. You can display Latest Post, Category, Pages, Latest Products, Products Category in the slider and you can even make your own custom slider.<\/p>\n<p>You can either follow the video or follow the below steps to configure the Banner section.<\/p>\n<p><iframe loading=\"lazy\" title=\"How To Create An Online Store With WordPress in 2021 | Blossom Shop\" width=\"1024\" height=\"576\" src=\"https:\/\/www.youtube.com\/embed\/5qTwEdHx0sw?start=2360&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p>To set up your banner:<\/p>\n<ul>\n<li>Go to&nbsp;<strong>Appearance &gt; Customize &gt; Front Page Settings &gt; Banner Section<\/strong><\/li>\n<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>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6185\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/08\/banner-setting.png\" alt=\"\" width=\"283\" height=\"341\" 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\" \/><\/p>\n<p class=\"blue note\"><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 category via <strong>Posts &gt; New Post<\/strong> and <strong>Posts &gt; Category<\/strong>. If there are not enough posts or categories, a grey image will be displayed in the banner section.<\/p>\n<h2><span id=\"Banner_as_Slider\"><strong>Banner<\/strong> as<strong> Slider<\/strong><\/span><\/h2>\n<ul>\n<li>Go to&nbsp;<strong>Appearance &gt; Customize &gt; General Settings &gt; Banner Section<\/strong><\/li>\n<li>Choose&nbsp;<strong>Banner as Slider<\/strong><\/li>\n<li>Select either&nbsp;<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,&nbsp; Pages. Moreover, you can even create your own custom banner.<\/li>\n<li>Enter the <strong>Number of Slides<\/strong> that you want to display<\/li>\n<li>Enter the label for <strong>Slider Readmore Button<\/strong>.<\/li>\n<li>Click on&nbsp;<strong>Publish<\/strong><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6183\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/08\/banner-as-slider.png\" alt=\"\" width=\"298\" height=\"656\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/08\/banner-as-slider.png 298w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/08\/banner-as-slider-136x300.png 136w\" sizes=\"(max-width: 298px) 100vw, 298px\" \/><\/p>\n<p class=\"blue note\"><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<h2><span id=\"Static_Image_or_Video_Banner\"><strong>Static Image or Video Banner<\/strong><\/span><\/h2>\n<ul>\n<li>Go to&nbsp;<strong>Appearance &gt; Customize &gt;Front Page Settings &gt; Banner Section<\/strong><\/li>\n<li>Choose&nbsp;<strong>Static\/Video Banner<\/strong><\/li>\n<li>Click on&nbsp;<strong>Select Video<\/strong>&nbsp;to upload the video of your choice to the banner section or you can also&nbsp;<strong>enter a YouTube URL<\/strong>&nbsp;of the video.<\/li>\n<li>If you want to display a static image, click on&nbsp;<strong>Add new image<\/strong>&nbsp;to upload the desired picture as a banner image<\/li>\n<li>Enter the&nbsp;<strong>Title&nbsp;<\/strong>and&nbsp;<strong>Subtitle&nbsp;<\/strong>for Banner section<\/li>\n<li>Enter the&nbsp;<strong>Banner Label&nbsp;<\/strong>and&nbsp;<strong>Banner Link<\/strong><\/li>\n<li>Click on&nbsp;<strong>Publish<\/strong><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6184\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/08\/banner-as-video.png\" alt=\"\" width=\"298\" height=\"661\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/08\/banner-as-video.png 298w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/08\/banner-as-video-135x300.png 135w\" sizes=\"(max-width: 298px) 100vw, 298px\" \/><\/p>\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. The Pro version of this theme offers many extra options.You can choose from 6 different slider layouts. You can choose to display the Newsletter in the Banner Section. There is an [&hellip;]<\/p>\n","protected":false},"featured_media":0,"parent":6173,"menu_order":1,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[],"class_list":["post-6179","docs","type-docs","status-publish","hentry"],"comment_count":0,"_links":{"self":[{"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/6179"}],"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=6179"}],"version-history":[{"count":0,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/6179\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/6173"}],"next":[{"title":"How to Configure Service Section?","link":"https:\/\/docs.blossomthemes.com\/blossom-shop\/homepage-settings\/how-to-configure-service-section\/","href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/6191"}],"prev":[{"title":"How to Configure Homepage and Blog Page?","link":"https:\/\/docs.blossomthemes.com\/blossom-shop\/homepage-settings\/how-to-configure-homepage-and-blog-page\/","href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/6174"}],"wp:attachment":[{"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/media?parent=6179"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/doc_tag?post=6179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}