{"id":3300,"date":"2024-07-27T11:46:16","date_gmt":"2024-07-27T11:46:16","guid":{"rendered":"https:\/\/webnus.net\/kata\/documentation\/?p=3300"},"modified":"2024-11-09T13:09:13","modified_gmt":"2024-11-09T13:09:13","slug":"transparent-header-in-kata-theme","status":"publish","type":"post","link":"https:\/\/webnus.net\/kata\/documentation\/transparent-header-in-kata-theme\/","title":{"rendered":"Transparent Header in Kata Theme"},"content":{"rendered":"\n<p>Transparent headers are widely used in web design. &#8220;Transparency&#8221; in a header means that the page&#8217;s content area extends into the header, allowing the background image or video of the content section to serve as the header&#8217;s background.<\/p>\n\n\n\n<p>In the Kata theme, you have the option to create a transparent header for your website, allowing it to overlay the content. This article will guide you through the process of implementing a transparent header.<\/p>\n\n\n\n<p>Note: Please make sure to create a header from the Kata &gt; Header menu.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to create a transparent header in the Kata theme<\/h3>\n\n\n\n<p>First, go to the page where you&#8217;d like to make the header transparent and open it in the Elementor page builder. Next, click the settings icon at the top of the page.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d8de64e2f9b&quot;}\" data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"616\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2024\/07\/transparent-header-1-1024x616.png\" alt=\"Transparent Header in Kata Theme\" class=\"wp-image-3462\" srcset=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2024\/07\/transparent-header-1-1024x616.png 1024w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2024\/07\/transparent-header-1-300x180.png 300w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2024\/07\/transparent-header-1-768x462.png 768w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2024\/07\/transparent-header-1-1536x924.png 1536w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2024\/07\/transparent-header-1-2048x1232.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on-async--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>\n\n\n<p>Now, in the Header Options dropdown, you can choose the Enable\/Disable option for the Header Transparent setting. Also, you have the option to activate the dark or light style based on your design for your transparent header. Once, you set all the settings, click on the apply button to save the changes to your page.<\/p>\n\n\n\n<p>Another way to set the transparent header is through the Kata Options. To do so, from your WordPress dashboard, navigate to Kata &gt; Options (or Appearance &gt; Customize) and click on the Pages option.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d8de64e3656&quot;}\" data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"391\" height=\"409\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2024\/07\/transparent-header-02.png\" alt=\"\" class=\"wp-image-3473\" srcset=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2024\/07\/transparent-header-02.png 391w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2024\/07\/transparent-header-02-287x300.png 287w\" sizes=\"(max-width: 391px) 100vw, 391px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on-async--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>\n\n\n<p>Here, you will have the option to set the transparent header globally for Blog, Archive, Author, Search, and the 404 Not Found page and modify the settings.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Dark Header Transparent will set a dark background to the header and a light color for the text<\/li>\n\n\n\n<li>Header Transparent will set a Light background to the header and dark color for the text<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d8de64e3c82&quot;}\" data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"394\" height=\"731\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2022\/03\/pages-transparent-header.png\" alt=\"\" class=\"wp-image-3506\" srcset=\"https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2022\/03\/pages-transparent-header.png 394w, https:\/\/webnus.net\/kata\/documentation\/wp-content\/uploads\/2022\/03\/pages-transparent-header-162x300.png 162w\" sizes=\"(max-width: 394px) 100vw, 394px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on-async--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>","protected":false},"excerpt":{"rendered":"<p>Transparent headers are widely used in web design. &#8220;Transparency&#8221; in a header means that the page&#8217;s content area extends into the header, allowing the background image or video of the content section to serve as the header&#8217;s background. In the Kata theme, you have the option to create a transparent header for your website, allowing [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23,26],"tags":[],"class_list":["post-3300","post","type-post","status-publish","format-standard","hentry","category-faq","category-header"],"_links":{"self":[{"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/posts\/3300","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/comments?post=3300"}],"version-history":[{"count":16,"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/posts\/3300\/revisions"}],"predecessor-version":[{"id":3510,"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/posts\/3300\/revisions\/3510"}],"wp:attachment":[{"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/media?parent=3300"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/categories?post=3300"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webnus.net\/kata\/documentation\/wp-json\/wp\/v2\/tags?post=3300"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}