{"id":7284,"date":"2019-09-17T11:30:30","date_gmt":"2019-09-17T05:45:30","guid":{"rendered":"https:\/\/docs.blossomthemes.com\/docs\/blossom-highend\/homepage-settings\/how-to-configure-banner-section\/"},"modified":"2022-07-06T11:52:46","modified_gmt":"2022-07-06T06:07:46","slug":"how-to-configure-banner-section","status":"publish","type":"docs","link":"https:\/\/docs.blossomthemes.com\/vilva\/homepage-settings\/how-to-configure-banner-section\/","title":{"rendered":"How to configure Banner Section?"},"content":{"rendered":"\n<p>You can either follow the video or the below steps to configure this section in the Vilva&nbsp; theme.<\/p>\n\n\n<p><iframe loading=\"lazy\" title=\"How to configure Banner Section on homepage | Vilva WordPress Theme\" width=\"1024\" height=\"576\" src=\"https:\/\/www.youtube.com\/embed\/4raqtO5Cx1k?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\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>The <a href=\"https:\/\/blossomthemes.com\/wordpress-themes\/vilva-pro\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Pro<\/strong><\/a> version of this free theme offers you 11 different slider layouts for your banner section.<\/p>\n\n\n\n<p>To set up your banner:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Go to <strong>Appearance &gt; Customize &gt; General Settings &gt; Banner Section.<\/strong><\/li><li>Choose either <strong>Banner as Slider, Static\/Video Banner, or Disable Banner<\/strong> (if you don&#8217;t want banner at all).<\/li><\/ul>\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>&nbsp;in the Slider Content Style, make sure that you have made 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>&nbsp;a grey fallback 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; General Settings &gt; Banner Section.<\/strong><\/li><li>Choose <strong>Banner as Slider<\/strong> in the Banner Options.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"299\" height=\"589\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/09\/banner-options.png\" alt=\"banner options\" class=\"wp-image-6945\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/09\/banner-options.png 299w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/09\/banner-options-152x300.png 152w\" sizes=\"(max-width: 299px) 100vw, 299px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>Select either <strong>Latest Posts, Category <\/strong>&nbsp;in the Slider Content Style.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"344\" height=\"611\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/09\/banner.png\" alt=\"\" class=\"wp-image-7336\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/09\/banner.png 344w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/09\/banner-169x300.png 169w\" sizes=\"(max-width: 344px) 100vw, 344px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>Different options are displayed based on the option you choose on the Slider Content Style.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"303\" height=\"659\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/09\/slider-content-options.png\" alt=\"slider content options\" class=\"wp-image-6946\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/09\/slider-content-options.png 303w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/09\/slider-content-options-138x300.png 138w\" sizes=\"(max-width: 303px) 100vw, 303px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><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 the captions on the Slider.<\/li><li>Click <strong>Publish.<\/strong><\/li><\/ul>\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 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; General Settings &gt; Banner Section.<\/strong><\/li><li>Choose<strong> Static\/Video 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>Click <strong>Publish.<\/strong><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"301\" height=\"655\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/09\/static-video-banner.png\" alt=\"static-video banner\" class=\"wp-image-6948\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/09\/static-video-banner.png 301w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/09\/static-video-banner-138x300.png 138w\" sizes=\"(max-width: 301px) 100vw, 301px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>You can either follow the video or the below steps to configure this section in the Vilva&nbsp; theme. 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 free theme offers you 11 different slider layouts [&hellip;]<\/p>\n","protected":false},"featured_media":0,"parent":7197,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[],"class_list":["post-7284","docs","type-docs","status-publish","hentry"],"comment_count":0,"_links":{"self":[{"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/7284"}],"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=7284"}],"version-history":[{"count":0,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/7284\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/7197"}],"next":[{"title":"How to Configure Featured Area Section?","link":"https:\/\/docs.blossomthemes.com\/vilva\/homepage-settings\/how-to-configure-featured-area-section\/","href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/7285"}],"wp:attachment":[{"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/media?parent=7284"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/doc_tag?post=7284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}