{"id":1641,"date":"2021-10-27T17:55:16","date_gmt":"2021-10-27T17:55:16","guid":{"rendered":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/?p=1641"},"modified":"2025-09-08T00:57:42","modified_gmt":"2025-09-08T00:57:42","slug":"header-builder","status":"publish","type":"post","link":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/2021\/10\/27\/header-builder\/","title":{"rendered":"Header Builder"},"content":{"rendered":"\n<h4 class=\"wp-block-heading mt-7 mb-3\">What is UDesign Header Builder?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Header is a face of your website. That\u2019s why website designers have great concern about how to make awesome headers.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As you know, building header is not simple and easy task. Although modern websites have unique and specific headers, there are always some basic rules which must be kept.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And because it contains logo, menu and CTAs, to build full responsible header layout actually needs a lot of time and effort.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, because of header\u2019s importance, it\u2019s worth the effort.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Header Builder<\/strong>&nbsp;is one of full site builders that&nbsp;<strong>UDesign <\/strong>provides.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It helps you to build any types of header faster and easily with Elementor page builder.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can decide how many columns to use when designing and building the header, with a vast array of styling options to perfect the layout.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">What\u2019s more, is you can now choose to create and display as many different headers as you want for different pages and posts throughout your website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can manage your site headers at <code class=\"code-grey\">Header Builder<\/code> section in <code class=\"code-grey\">UDesign &gt; Templates<\/code> page.<\/p>\n\n\n\n<h4 class=\"wp-block-heading mt-9 mb-3\">UDesign Header Builder Elements<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Here is UDesign Header Builder elements list.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Each element is important part of header. You can make any header layout which you want by drag and drop of header elements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ok. Well, let\u2019s see the elements below.<\/p>\n\n\n\n<ul class=\"wp-block-list featured-list\">\n<li><a href=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/2022\/02\/12\/cart-element\/\">Cart Form<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/2022\/02\/12\/language-switcher-element\/\">Language Switcher<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/2022\/02\/12\/currency-switcher-element\/\">Currency Switcher<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/2022\/02\/12\/mobile-menu-toggle-element\/\">Mobile Menu Toggle<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/2022\/02\/13\/vertical-divider-element\/\">Vertical Divider<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/2022\/02\/13\/account-element\/\">Account<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/2022\/02\/13\/wishlist-element\/\">Wishlist<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/2022\/02\/13\/compare-element\/\">Compare<\/a><\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading mt-9 mb-3\">How to use UDesign Header Builder?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 1<\/strong>&nbsp;\u2013 Go to&nbsp;<code>UDesign &gt; Template Builder.<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 2<\/strong>&nbsp;\u2013 Click \u2018Add New\u2019 button on top of page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 3<\/strong>&nbsp;\u2013 In New&nbsp;<strong>UDesign<\/strong>&nbsp;Builder Modal, select&nbsp;<strong>Header Builder<\/strong>&nbsp;in \u201cTemplate Type\u201d field. And give your block\u2019s name in \u201cTemplate Name\u201d field.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"554\" src=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2021\/10\/header-builder-create.jpg\" alt=\"\" class=\"wp-image-12310\" srcset=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2021\/10\/header-builder-create.jpg 1024w, https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2021\/10\/header-builder-create-768x416.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"mb-0 wp-block-paragraph\"><strong>Header Position<\/strong> &#8211; Top\/Side, <strong>Transparent<\/strong> &#8211; Yes\/No<\/p>\n\n\n\n<div class=\"wp-block-columns mb-0 is-layout-flex wp-container-core-columns-is-layout-8f761849 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-full\"><img decoding=\"async\" width=\"1024\" height=\"502\" src=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2021\/10\/header-side.jpg\" alt=\"\" class=\"wp-image-12319\" srcset=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2021\/10\/header-side.jpg 1024w, https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2021\/10\/header-side-768x377.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Side Header<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"503\" src=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2021\/10\/header-transparent.jpg\" alt=\"\" class=\"wp-image-12320\" srcset=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2021\/10\/header-transparent.jpg 1024w, https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2021\/10\/header-transparent-768x377.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Transparent Header<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 4<\/strong>&nbsp;\u2013 The next step is to build your part with<em>&nbsp;<\/em><strong>Elementor<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"720\" style=\"aspect-ratio: 1320 \/ 720;\" width=\"1320\" controls muted poster=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2022\/01\/poster-header-builder.jpg\" src=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2021\/10\/header-builder.mp4\"><\/video><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">How to insert your header to all pages?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 1<\/strong>&nbsp;\u2013 Please go to&nbsp;<code>UDesign &gt; Page Layouts.<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 2<\/strong>&nbsp;\u2013 Please click \u2018Header\u2019 on&nbsp;<strong>Global Layout<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"715\" src=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2021\/10\/header-layout-1.jpg\" alt=\"header layout\" class=\"wp-image-12328\" srcset=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2021\/10\/header-layout-1.jpg 1024w, https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2021\/10\/header-layout-1-768x536.jpg 768w, https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2021\/10\/header-layout-1-600x420.jpg 600w, https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2021\/10\/header-layout-1-400x280.jpg 400w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 3<\/strong>&nbsp;\u2013 Please select your header and save. That&#8217;s all.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"716\" src=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2021\/10\/header-layout-2.jpg\" alt=\"header layout\" class=\"wp-image-12329\" srcset=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2021\/10\/header-layout-2.jpg 1024w, https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2021\/10\/header-layout-2-768x537.jpg 768w, https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2021\/10\/header-layout-2-600x420.jpg 600w, https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2021\/10\/header-layout-2-400x280.jpg 400w, https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2021\/10\/header-layout-2-570x400.jpg 570w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">For your information, you can set side header. If you want, please go to Header Settings.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"405\" src=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2021\/10\/header-settings.jpg\" alt=\"\" class=\"wp-image-12325\" srcset=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2021\/10\/header-settings.jpg 1024w, https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2021\/10\/header-settings-768x304.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Header Settings in Elementor New Version<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"502\" src=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2021\/10\/header-setting-1-1024x502.png\" alt=\"\" class=\"wp-image-7916\" srcset=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2021\/10\/header-setting-1-1024x502.png 1024w, https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2021\/10\/header-setting-1-768x377.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Header Settings in Elementor Previous Version<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>What is UDesign Header Builder? Header is a face of your website. That\u2019s why website designers have great concern about how to make awesome headers. As you know, building header is not simple and easy task. Although modern websites have unique and specific headers, there are always some basic rules which must be kept. And [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[6],"tags":[],"class_list":["post-1641","post","type-post","status-publish","format-standard","hentry","category-template-builder"],"_links":{"self":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/posts\/1641","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/comments?post=1641"}],"version-history":[{"count":1,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/posts\/1641\/revisions"}],"predecessor-version":[{"id":12336,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/posts\/1641\/revisions\/12336"}],"wp:attachment":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/media?parent=1641"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/categories?post=1641"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/tags?post=1641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}