{"id":566,"date":"2020-08-06T20:03:00","date_gmt":"2020-08-06T20:03:00","guid":{"rendered":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/?p=566"},"modified":"2020-08-11T01:46:29","modified_gmt":"2020-08-11T01:46:29","slug":"header-builder","status":"publish","type":"post","link":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/2020\/08\/06\/header-builder\/","title":{"rendered":"Header Builder"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-content\/uploads\/sites\/40\/2020\/08\/header_builder.mp4\"><\/video><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Using Header Builder<\/h4>\n\n\n\n<p>Molla supports powerful &amp; flexible header builder available to use various header types per page. Please navigate to <code>Molla &gt; Theme Options &gt; Header &gt; Header Builder<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"520\" src=\"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-content\/uploads\/sites\/40\/2020\/08\/header-2-1-1024x520.jpg\" alt=\"\" class=\"wp-image-571\" srcset=\"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-content\/uploads\/sites\/40\/2020\/08\/header-2-1-1024x520.jpg 1024w, https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-content\/uploads\/sites\/40\/2020\/08\/header-2-1-300x152.jpg 300w, https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-content\/uploads\/sites\/40\/2020\/08\/header-2-1-768x390.jpg 768w, https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-content\/uploads\/sites\/40\/2020\/08\/header-2-1-1536x780.jpg 1536w, https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-content\/uploads\/sites\/40\/2020\/08\/header-2-1-600x305.jpg 600w, https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-content\/uploads\/sites\/40\/2020\/08\/header-2-1.jpg 1905w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You would see header builder section in the bottom of preview window.<\/p>\n\n\n\n<p>At first, default header type-molla supports, will be displayed. You can customize it or add new header layout by clicking \u201cCreate a new header layout\u201d button below select box of header layouts in customizer control panel.<\/p>\n\n\n\n<p>In header builder area, there are 3 sections; <em>Header Top, Header Main, Header Bottom<\/em>, and each header section consists of 3 columns: <em>Left, Center, Right<\/em>.<\/p>\n\n\n\n<p>You can see header elements at the top of header builder section. You are able to drag and drop one of them in 1 click.<\/p>\n\n\n\n<p>You could also build header layout for desktop and mobile separately. If you click mobile icon in the top of header builder, header builder section for mobile version will be displayed.<\/p>\n\n\n\n<p>Once you have finished building new header layout, click the \u201cPublish\u201d button. Please see <a href=\"#\">Header Builder Video.<\/a><\/p>\n\n\n<div class=\"notice-error\">NOTE:<br>You can easily delete a header layout by clicking button named \u201cDelete a header layout\u201d below \u201cCreate a new header layout\u201d button, but not able to delete Molla-default header layout.<\/div>\n\n\n<h4 class=\"wp-block-heading\">About Header Builder Elements<\/h4>\n\n\n\n<p>Header builder elements consist of count limited &amp; unlimited elements.<\/p>\n\n\n\n<p>HTML, CUSTOM MENU, MOLLA BLOCK, ROW, | are unlimited element, so you can place these items as many as possible.<\/p>\n\n\n<div class=\"notice-info\">NOTE:<br>\nYou can see setting icon right of element name. It represents that there is option related to itself. You can visit easily that option by 1 click it.<\/div>\n\n\n<p>Following gives brief explanation about header elements.<\/p>\n\n\n\n<ul><li><strong>Mobile Menu Icon<\/strong>\u2013 display mobile menu toggler<\/li><li><strong>Main Menu <\/strong>\u2013 main menu which is created as a \u201cMain Menu\u201d for display location when creating menu<\/li><li><strong>Responsive Group<\/strong> \u2013 group of several elements for beauty of mobile including currency switer, language switcher, menu located in \u201cTop Navigation\u201c etc<\/li><li><strong>Logo<\/strong> \u2013 display logo set in <code>Theme Options &gt; Header &gt; Logo &amp; Site Identity<\/code>.<\/li><li><strong>Search Form<\/strong> \u2013 search form control, navigate to <code>Theme Options &gt; Header &gt; Search Form<\/code>.<\/li><li><strong>Shop Icons<\/strong> \u2013 display cart, wishlist etc<\/li><li><strong>Custom Menu<\/strong> \u2013 display selected menu as several types such as toggleable, vertical or horizontal etc &#8211; count unlimited<\/li><li><strong>Log In\/Out Form<\/strong> \u2013 popup links of login form<\/li><li><strong>Social Icons<\/strong> \u2013 social links selected in <code>Theme Options &gt; Header &gt; Social Links<\/code>.<\/li><li><strong>Currency Switcher<\/strong> \u2013 display menu located in \u201cCurreny Switcher\u201c<\/li><li><strong>Language Switcher<\/strong> \u2013 display menu located in \u201cLanguage Switcher\u201c<\/li><li><strong>Molla Block<\/strong> \u2013 display Molla Block following to input block name values &#8211; count unlimited<\/li><li><strong>HTML<\/strong> \u2013 display custom html &#8211; count unlimited<\/li><li><strong>Row<\/strong> \u2013 display element which can be wrap another elements &#8211; count unlimited<\/li><li><strong>|<\/strong> \u2013 display separator &#8211; count unlimited<\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"444\" src=\"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-content\/uploads\/sites\/40\/2020\/08\/header-3-1.jpg\" alt=\"\" class=\"wp-image-594\" srcset=\"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-content\/uploads\/sites\/40\/2020\/08\/header-3-1.jpg 750w, https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-content\/uploads\/sites\/40\/2020\/08\/header-3-1-300x178.jpg 300w, https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-content\/uploads\/sites\/40\/2020\/08\/header-3-1-600x355.jpg 600w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"notice-error\">NOTE:<br \/>You will face into some cases to input html content or select menu to display etc. In those cases, please click settings icon right of element. Then you can see appearing options at the top of customize control panel. After you&#8217;ve finished setting those options, click \u201cSave\u201d button below before \u201cPublish\u201d button click.<\/div><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Using Header Builder Molla supports powerful &amp; flexible header builder available to use various header types per page. Please navigate to Molla &gt; Theme Options &gt; Header &gt; Header Builder. You would see header builder section in the bottom of preview window. At first, default header type-molla supports, will be displayed. You can customize it [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[55,25,81,27,58,82],"tags":[],"featured_image_src":{"landsacpe":false,"list":false,"medium":false,"full":false},"categories_name":["05 - Header","12 - How tos \/ Guides","13 - Videos","General","Header Builder","Header Builder"],"author_name":"John Doe","comment_count":{"approved":0,"awaiting_moderation":0,"spam":0,"trash":0,"post-trashed":0,"all":0,"total_comments":0},"_links":{"self":[{"href":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-json\/wp\/v2\/posts\/566"}],"collection":[{"href":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-json\/wp\/v2\/comments?post=566"}],"version-history":[{"count":2,"href":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-json\/wp\/v2\/posts\/566\/revisions"}],"predecessor-version":[{"id":1458,"href":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-json\/wp\/v2\/posts\/566\/revisions\/1458"}],"wp:attachment":[{"href":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-json\/wp\/v2\/media?parent=566"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-json\/wp\/v2\/categories?post=566"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/molla\/documentation\/wp-json\/wp\/v2\/tags?post=566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}