{"id":2304,"date":"2021-10-19T01:29:25","date_gmt":"2021-10-19T01:29:25","guid":{"rendered":"https:\/\/docs.deothemes.com\/nokke\/knowledgebase\/header-footer-builder-2\/"},"modified":"2021-10-19T06:53:15","modified_gmt":"2021-10-19T06:53:15","slug":"header-footer-builder","status":"publish","type":"manual_kb","link":"https:\/\/docs.deothemes.com\/nokke\/knowledgebase\/header-footer-builder\/","title":{"rendered":"Header Footer Builder"},"content":{"rendered":"<p><a href=\"https:\/\/deothemes.com\/wordpress-themes\/nokke-minimal-agency-elementor-wordpress-theme\/\/?utm_source=docs\">Nokke Pro<\/a> includes Header\/ Footer builder system. In this article, you will learn how the template system works. To start, make sure that <strong>Nokke Core<\/strong> and <strong>Eversor<\/strong>\u00a0plugins are installed and active. Let&#8217;s start with a <strong>Header<\/strong>.<\/p>\n<h3>Step 1.<\/h3>\n<p>Navigate to <strong>Nokke -&gt; Templates<\/strong>. Create a new template and call it <strong>Header.<\/strong> If you want to have multiple headers on your website, select which one is default by using <strong>Default Template<\/strong> switch. Select <strong>Template Location<\/strong> as <strong>Header <\/strong>or<strong> Header Vertical <\/strong>if you want vertical header. Click <strong>Activate Template<\/strong> switch to activate your new header template.<\/p>\n<h3><img decoding=\"async\" class=\"image-frame\" src=\"https:\/\/docs.deothemes.com\/wp-content\/uploads\/sites\/13\/2021\/10\/docs_header_builder.jpg\" \/><\/h3>\n<h3>Step 2.<\/h3>\n<p>Click on <strong>Edit with Elementor<\/strong> button and start editing. Here you can edit your header the way you want it, however, we recommend importing pre-defined demos instead of making it from scratch. While editing the header template, select <strong>Header<\/strong> section so you can find additional settings in the left menu: <strong>Enable sticky on scroll header<\/strong> and <strong>Enable transparent header.\u00a0 <\/strong>You can duplicate your default header and click on <strong>Enable sticky on scroll header. <\/strong>This way you will have 2 headers, one that stays always on top and the other that sticks when you scroll a page. You can style your sticky header differently as you wish.<\/p>\n<p><img decoding=\"async\" class=\"image-frame\" src=\"https:\/\/docs.deothemes.com\/wp-content\/uploads\/sites\/13\/2021\/10\/docs_header_builder_editor.jpg\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3>Step 3. (optional)<\/h3>\n<p>If you need only one header on your website you can skip this step. Let&#8217;s say you want transparent header on your home page and regular white header on inner pages. After you created and activated both of your headers, navigate to any page or post and scroll down to <strong>Header Settings. <\/strong>From here you can select your second header, after this save the page to apply changes. Your second header will appear only on this page.<\/p>\n<p><img decoding=\"async\" class=\"image-frame\" src=\"https:\/\/docs.deothemes.com\/everse\/wp-content\/uploads\/sites\/13\/2019\/04\/everse_docs_header_footer_metabox.jpg\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2>Footers.<\/h2>\n<p>These templates work in a similar way. For a Footer select location <strong>Footer.<\/strong><\/p>\n<p>&nbsp;<\/p>\n<h2>Off-Canvas.<\/h2>\n<p>For <strong>Off-Canvas<\/strong> content leave location as <strong>Default<\/strong>. When creating Off-Canvas content it will appear in the <strong>Off-Canvas<\/strong>\u00a0widget.<\/p>\n<h2><img decoding=\"async\" class=\"image-frame\" src=\"https:\/\/docs.deothemes.com\/everse\/wp-content\/uploads\/sites\/13\/2019\/04\/estand_docs_theme_templates_5.jpg\" \/><\/h2>\n<h2>Deactivating or Deleting Templates.<\/h2>\n<p>When you deactivate or delete your template it will be unassigned from the pages that you&#8217;ve assigned it to.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"template":"","format":"standard","manualknowledgebasecat":[50],"manual_kb_tag":[],"class_list":["post-2304","manual_kb","type-manual_kb","status-publish","format-standard","hentry","manualknowledgebasecat-nokke-pro"],"_links":{"self":[{"href":"https:\/\/docs.deothemes.com\/nokke\/wp-json\/wp\/v2\/manual_kb\/2304","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.deothemes.com\/nokke\/wp-json\/wp\/v2\/manual_kb"}],"about":[{"href":"https:\/\/docs.deothemes.com\/nokke\/wp-json\/wp\/v2\/types\/manual_kb"}],"author":[{"embeddable":true,"href":"https:\/\/docs.deothemes.com\/nokke\/wp-json\/wp\/v2\/users\/2"}],"version-history":[{"count":3,"href":"https:\/\/docs.deothemes.com\/nokke\/wp-json\/wp\/v2\/manual_kb\/2304\/revisions"}],"predecessor-version":[{"id":2330,"href":"https:\/\/docs.deothemes.com\/nokke\/wp-json\/wp\/v2\/manual_kb\/2304\/revisions\/2330"}],"wp:attachment":[{"href":"https:\/\/docs.deothemes.com\/nokke\/wp-json\/wp\/v2\/media?parent=2304"}],"wp:term":[{"taxonomy":"manualknowledgebasecat","embeddable":true,"href":"https:\/\/docs.deothemes.com\/nokke\/wp-json\/wp\/v2\/manualknowledgebasecat?post=2304"},{"taxonomy":"manual_kb_tag","embeddable":true,"href":"https:\/\/docs.deothemes.com\/nokke\/wp-json\/wp\/v2\/manual_kb_tag?post=2304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}