{"id":5035,"date":"2019-07-17T11:28:41","date_gmt":"2019-07-17T05:43:41","guid":{"rendered":"https:\/\/docs.blossomthemes.com\/docs\/blossom-wedding-documentation\/homepage-settings\/how-to-select-configure-banner-layout-content\/"},"modified":"2020-09-01T17:38:50","modified_gmt":"2020-09-01T11:53:50","slug":"how-to-select-configure-banner-layout-content","status":"publish","type":"docs","link":"https:\/\/docs.blossomthemes.com\/blossom-wedding\/homepage-settings\/how-to-select-configure-banner-layout-content\/","title":{"rendered":"How to Select &#038; Configure Banner Layout &#038; Content?"},"content":{"rendered":"<p>You can set up a static image, video, or a slider on your banner section. 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-5298\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/07\/Banner-section-demo-blossom-wedding.png\" alt=\"You can set up a static image, video, or a slider on your banner section. The banner will be displayed at the top of your website.\" width=\"1357\" height=\"856\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/07\/Banner-section-demo-blossom-wedding.png 1357w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/07\/Banner-section-demo-blossom-wedding-300x189.png 300w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/07\/Banner-section-demo-blossom-wedding-768x484.png 768w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/07\/Banner-section-demo-blossom-wedding-1024x646.png 1024w\" sizes=\"(max-width: 1357px) 100vw, 1357px\" \/><\/p>\n<p>To set up your banner:<\/p>\n<ul>\n<li>Go to\u00a0<strong>Appearance &gt; Customize &gt; Banner Section<\/strong><\/li>\n<li>Choose either\u00a0<strong>Banner as Slider, Static\/Video Banner or Disable Banner<\/strong>\u00a0(if you do not want banner at all)<\/li>\n<li>Click on\u00a0<strong>Publish<\/strong><\/li>\n<\/ul>\n<h2><span id=\"Banner_as_Slider\"><strong>Banner as Slider<\/strong><\/span><\/h2>\n<ul>\n<li>Go to\u00a0<strong>Appearance &gt; Customize &gt; Front Page Settings &gt; Banner Section<\/strong><\/li>\n<li>Choose\u00a0<strong>Banner as Slider<\/strong><\/li>\n<\/ul>\n<h3><span id=\"Slider_Content\"><strong>Slider Content<\/strong><\/span><\/h3>\n<p><strong>Slider using Latest Posts<\/strong><\/p>\n<ul>\n<li>Go to\u00a0<strong>Appearance &gt; Customize &gt; Front Page Settings &gt; Banner Section&gt; Banner as Slider<\/strong><\/li>\n<li>Select Slider Content Style as\u00a0<strong>Latest Posts<\/strong><\/li>\n<li>Select the\u00a0<strong>Number of Slides\u00a0<\/strong><\/li>\n<li>Enable\u00a0<strong>Slider Auto transition<\/strong>. (Blue is Enabled)<\/li>\n<li>Enable\u00a0<strong>Slider Caption.\u00a0<\/strong>(Blue is Enabled)<\/li>\n<li>Click on\u00a0<strong>Publish<\/strong><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5301\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/07\/Slider-as-latest-posts-blossom-wedding.png\" alt=\"Slider as latest posts blossom wedding\" width=\"346\" height=\"580\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/07\/Slider-as-latest-posts-blossom-wedding.png 346w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/07\/Slider-as-latest-posts-blossom-wedding-179x300.png 179w\" sizes=\"(max-width: 346px) 100vw, 346px\" \/><\/p>\n<p><strong>Slider using Category<\/strong><\/p>\n<ul>\n<li>Go to\u00a0<strong>Appearance &gt; Customize &gt; Front Page Settings &gt; Banner Section&gt; Banner as Slider<\/strong><\/li>\n<li>Select Slider Content Style as\u00a0<strong>Category<\/strong><\/li>\n<li>Select the\u00a0<strong>Slider Category<\/strong><\/li>\n<li>Enable\u00a0<strong>Slider Auto transition<\/strong>. (Blue is Enabled)<\/li>\n<li>Enable Slider Caption to display the caption of the slider<\/li>\n<li>Click on\u00a0<strong>Publish<\/strong><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5302\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/07\/Slider-as-category-blossom-wedding.png\" alt=\"Slider as category blossom wedding\" width=\"348\" height=\"680\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/07\/Slider-as-category-blossom-wedding.png 348w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/07\/Slider-as-category-blossom-wedding-154x300.png 154w\" sizes=\"(max-width: 348px) 100vw, 348px\" \/><\/p>\n<h2><span id=\"StaticVideo_CTA_Banner\"><strong>Static\/Video Banner<\/strong><\/span><\/h2>\n<p class=\"note blue\">Note By default, in WordPress, the audio is muted in Video Header and the fallback image is used instead of Video on mobile devices. So to avoid design, please set both banner image too to display on mobile devices.<\/p>\n<p>Please follow the below steps to add a Static\/Video Banner on the banner section of your website.<\/p>\n<ul>\n<li>Go to\u00a0<strong>Appearance &gt; Customize &gt; Front Page Settings &gt; Banner Section<\/strong><\/li>\n<li>Choose<strong>\u00a0Static\/Video CTA Banner<\/strong>\u00a0under Banner Options.<\/li>\n<li>Upload the\u00a0<strong>Header Video\u00a0<\/strong>or Enter the\u00a0<strong>YouTube URL\u00a0<\/strong>of the video. Also, you can upload images in the banner section by clicking on\u00a0<strong>Add new image.\u00a0<\/strong>If you add both video and image in the banner section at the same time, it will only show video by default.<\/li>\n<li>Enter the <strong>Banner Title, Sub Title &amp; Description<\/strong><\/li>\n<li>Click on\u00a0<strong>Publish<\/strong><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4901\" src=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/07\/Configure-banner-section-blossom-wedding-pro.png\" alt=\"Configure banner section blossom wedding pro\" width=\"335\" height=\"918\" srcset=\"https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/07\/Configure-banner-section-blossom-wedding-pro.png 335w, https:\/\/docs.blossomthemes.com\/wp-content\/uploads\/2019\/07\/Configure-banner-section-blossom-wedding-pro-109x300.png 109w\" sizes=\"(max-width: 335px) 100vw, 335px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>You can set up a static image, video, or a slider on your banner section. The banner will be displayed at the top of your website. To set up your banner: Go to\u00a0Appearance &gt; Customize &gt; Banner Section Choose either\u00a0Banner as Slider, Static\/Video Banner or Disable Banner\u00a0(if you do not want banner at all) Click [&hellip;]<\/p>\n","protected":false},"featured_media":0,"parent":5033,"menu_order":1,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[],"class_list":["post-5035","docs","type-docs","status-publish","hentry"],"comment_count":0,"_links":{"self":[{"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/5035"}],"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=5035"}],"version-history":[{"count":0,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/5035\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/5033"}],"next":[{"title":"How to Configure About Section?","link":"https:\/\/docs.blossomthemes.com\/blossom-wedding\/homepage-settings\/how-to-configure-about-section\/","href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/5036"}],"prev":[{"title":"How to Set Up the Front\/Landing\/Home Page?","link":"https:\/\/docs.blossomthemes.com\/blossom-wedding\/homepage-settings\/how-to-set-up-the-front-landing-home-page\/","href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/docs\/5034"}],"wp:attachment":[{"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/media?parent=5035"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.blossomthemes.com\/wp-json\/wp\/v2\/doc_tag?post=5035"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}