{"id":12348,"date":"2018-04-30T08:50:29","date_gmt":"2018-04-30T08:50:29","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=12348"},"modified":"2025-12-06T00:34:04","modified_gmt":"2025-12-05T22:34:04","slug":"header-footer-builder","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/header-footer-builder\/","title":{"rendered":"How to Create Headers &amp; Footers in WordPress"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"12348\" class=\"elementor elementor-12348\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-38c2c0e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"38c2c0e\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-fe993b5\" data-id=\"fe993b5\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b720c5e elementor-widget elementor-widget-text-editor\" data-id=\"b720c5e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>No website design is complete without a header and a footer. It&#8217;s not an exaggeration to say that they play a major role in providing a great user experience by allowing for better navigation throughout the website. Not only that, but they are essential tools for promoting the website&#8217;s brand and they are great for placing CTAs.\u00a0<\/p><p>In the past, tasks like removing the space between the header and the body in WordPress required going into the PHP files of the theme. Now, this task has become much simpler with Elementor\u2019s <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/features\/theme-builder\/\"   title=\"Theme Builder\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"26934\">Theme Builder<\/a>.\u00a0<\/p><p>Let&#8217;s take a deeper look into how <a href=\"https:\/\/elementor.com\/theme-builder\/\" target=\"_blank\" rel=\"noopener\">Elementor Theme Builder<\/a> gives you a powerful way to edit your site&#8217;s header and footer, visually designing it however you like.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b2fc136 read-more-link elementor-widget elementor-widget-heading\" data-id=\"b2fc136\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/elementor.com\/pro\">Find Your Way To Amazing Website With Elementor\u2019s Nav Menus<\/a><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-31e5453 elementor-widget elementor-widget-heading\" data-id=\"31e5453\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">What Is a Header?\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-47d72a0 elementor-widget elementor-widget-text-editor\" data-id=\"47d72a0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>A website header is the top area of your <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/webpage-website\/\"   title=\"WebPage vs. WebSite: Understanding the Difference (2025 Guide)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"26935\">webpage<\/a>. Usually, the header is consistent throughout your site. However, there are also websites that have different headers for different sections of the website.<\/p><p>The first impression your users will get of your website \u2014 whether they&#8217;ve reached your homepage, <a href=\"https:\/\/elementor.com\/blog\/about-us-page-examples\/\" target=\"_blank\" rel=\"noopener\">about page<\/a>, or any other individual post \u2014 is through your header design. And, if designed well, it will draw the user&#8217;s attention and serve as a hook for them to keep scrolling and read on.\u00a0<\/p><p>The header can also play an important role in promoting your business&#8217; brand identity<\/p><p>by incorporating elements like the company logo, <a href=\"https:\/\/elementor.com\/blog\/guide-to-web-typography\/\" target=\"_blank\" rel=\"noopener\">typography<\/a>, <a href=\"https:\/\/elementor.com\/blog\/color-theory-web-design\/\" target=\"_blank\" rel=\"noopener\">colors<\/a>, and the overall brand language.\u00a0<\/p><p>Headers also contain functional options like site navigation, site search, a shopping cart (for sales sites), call to action (CTA) buttons, and other functions that enhance the user experience and increase conversion rates.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a493fe4 elementor-widget elementor-widget-heading\" data-id=\"a493fe4\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">What Is a Footer?\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f129f86 elementor-widget elementor-widget-text-editor\" data-id=\"f129f86\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>A footer is an area located at the bottom of a webpage. Like headers, they typically appear consistently throughout the website, on all pages and posts.\u00a0<\/p><p>Footers often receive fairly marginal attention, which is really a wasted potential since the footer repeats itself on every page of the site. They are just as important as the headers.\u00a0<\/p><p>Your footer design, depending on the settings you choose, can display useful and important information, such as newsletter registration, copyright information, terms of use and privacy, a sitemap, contact information, maps, website navigation, and much more.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2c726c0 elementor-widget elementor-widget-heading\" data-id=\"2c726c0\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How To Edit Your WordPress Header in Elementor\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-91b2413 elementor-widget elementor-widget-text-editor\" data-id=\"91b2413\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Edit your header and footer easily by following these steps:\u00a0<\/p><ul><li>Go to WordPress <strong>Dashboard<\/strong> &gt; <strong>Templates<\/strong> &gt; <strong>Theme<\/strong><strong>Builder<\/strong><\/li><li>Click <strong>Add New <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/library\/all-categories\/\"   title=\"Alle categorie\u00ebn\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"26936\">Template<\/a><\/strong> and choose <strong>Header (or Footer)<\/strong><\/li><li>Name your header template and click <strong>Create Header (or Footer)<\/strong><\/li><li>Now you&#8217;ll be able to either choose a premade header (or footer) template or create one from scratch.<\/li><li>Once you have made the needed changes to the header (or footer) design, click <strong>publish<\/strong>, and choose where to publish the header (or footer). The default is <strong>entire site<\/strong>.<\/li><li>That&#8217;s it! You can now see your handcrafted header (or footer) live on your site.<\/li><\/ul><p>You can also check out these video guides for <a href=\"https:\/\/www.youtube.com\/watch?v=tDePkL-1tu4\" target=\"_blank\" rel=\"noopener\">how to create a header<\/a> and <a href=\"https:\/\/www.youtube.com\/watch?v=ob7SMEfVRfc\" target=\"_blank\" rel=\"noopener\">how to create a footer<\/a>.<\/p><p>Now, let&#8217;s take a look at some beautiful examples of headers and footers.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a549298 elementor-widget elementor-widget-heading\" data-id=\"a549298\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Additional Resources<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-915796f elementor-widget elementor-widget-text-editor\" data-id=\"915796f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Be sure to check out our other WordPress tutorials to see what you can accomplish using Elementor:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-308454b elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"308454b\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"http:\/\/elementor.com\/blog\/wordpress-mega-menu\/\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">How to Build a WordPress Mega Menu<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"http:\/\/elementor.com\/blog\/shrinking-sticky-header\/\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">How to Create a Shrinking Sticky Header<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/elementor.com\/blog\/introducing-nav-menu\/\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">How to Build a WordPress Navigation Menu<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/elementor.com\/blog\/introducing-table-of-contents\/\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">How to Build a Table of Contents<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/elementor.com\/blog\/introducing-popup-builder\/\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">How to Create Popups<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/elementor.com\/blog\/custom-fonts\/\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">How to Use Custom Fonts in WordPress<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/elementor.com\/blog\/call-to-action\/\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">How to Design WordPress CTAs<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/elementor.com\/blog\/introducing-media-carousel\/\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">How to Build a WordPress Media Carousel<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a9eb6a7 elementor-widget elementor-widget-heading\" data-id=\"a9eb6a7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">5 Website Header Examples \n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8a65b9a elementor-widget elementor-widget-heading\" data-id=\"8a65b9a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">1. The Best Header for Navigation\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e22f049 elementor-widget elementor-widget-image\" data-id=\"e22f049\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image9-1-r4q70vayug7ad9ae4s1w5jfbfhujnsruocxrujfsdc.png\" title=\"The Best Header for Navigation\" alt=\"The Best Header for Navigation\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5113b13 elementor-widget elementor-widget-text-editor\" data-id=\"5113b13\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This page header is suitable for sites with more complex navigation. It has a top bar and another central navigation menu. It also includes a search function, for more direct navigation. As a bonus, you can see the business\u2019 logo on the left, together with the business\u2019 colors. This classic, business-like header gives the impression of professionalism.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7c8616b elementor-widget elementor-widget-heading\" data-id=\"7c8616b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">2. The Mobile-Friendly Header\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-73d4fa4 elementor-widget elementor-widget-image\" data-id=\"73d4fa4\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image2-2-r4q6ygttdowwp4s05qo7s58ws1orzn8jogx3p30016.png\" title=\"The Mobile-Friendly Header\" alt=\"The Mobile-Friendly Header\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-63e9edf elementor-widget elementor-widget-text-editor\" data-id=\"63e9edf\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The header section has a \u2018hidden\u2019 navigation in the Hamburger, and on the other side, the contact details and location are highlighted with large icons. It also has a top bar with social network buttons. Take note of how slim and minimalistic the header is, allowing for certain information to stand out. Furthermore, this minimalism plays an important role when it comes to mobile browsing since, with just a few tweaks, you can make this header look amazing on the mobile screen.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e37fcda elementor-widget elementor-widget-heading\" data-id=\"e37fcda\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">3.  The Artistic Header\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fab601e elementor-widget elementor-widget-image\" data-id=\"fab601e\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image10-1-r4q78q8dzkylfvvf8ocli2128h410oz239axatsawg.png\" title=\"The Artistic Header\" alt=\"The Artistic Header\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2a98464 elementor-widget elementor-widget-text-editor\" data-id=\"2a98464\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In this design, you can see an example of an unconventional use case \u2013 navigation not via the traditional menu, but rather using an icon with a link. This can be used on sites with a small number of pages or those that have internal navigation on long landing pages. There is also the use of a ship in the header, that looks sort of like waves, and the overall header size is bigger, to make it stand out more.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-304d16e elementor-widget elementor-widget-heading\" data-id=\"304d16e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">4. The Enchanting Header\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ac904d6 elementor-widget elementor-widget-image\" data-id=\"ac904d6\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image6-2-r4q6xqic2bwvo1u8ffanubw059ai04c28uni9c31cc.png\" title=\"The Enchanting Header\" alt=\"The Enchanting Header\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a42ddef elementor-widget elementor-widget-text-editor\" data-id=\"a42ddef\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This is another example of the creative use of the header. Here, you can see a large background image area used to extend a full-screen-width making this look like one, continuous image, without breaking the atmosphere of the page.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c57ab25 elementor-widget elementor-widget-heading\" data-id=\"c57ab25\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">5. The Minimalist Header\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bf3725c elementor-widget elementor-widget-image\" data-id=\"bf3725c\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image4-2-r4q6xeaflhg5h4bzes0ifwz0f8yq81zjv6670ql54a.png\" title=\"The Minimalist Header\" alt=\"The Minimalist Header\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8747c24 elementor-widget elementor-widget-text-editor\" data-id=\"8747c24\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The design shows uses of bright orange colors set upon a dark grey background. It gives the impression of cleanliness and order. If you wanted to switch the colors around or use gradients instead, it will take you only a few seconds to achieve the desired result.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2569d90 elementor-widget elementor-widget-heading\" data-id=\"2569d90\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Sticky Header for WordPress\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fa52a30 elementor-widget elementor-widget-text-editor\" data-id=\"fa52a30\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In addition to the regular header that goes aways when you scroll down, you can create a <a href=\"https:\/\/elementor.com\/blog\/shrinking-sticky-header\/\" target=\"_blank\" rel=\"noopener\">sticky header<\/a> that stays throughout the whole of the user\u2019s visit to your website.\u00a0<\/p><p>Sticky headers are great for bringing more focus to navigational links in menus and helping visitors more easily navigate through the main pages of your WordPress website \u2014 be it the homepage, archive or <a href=\"https:\/\/elementor.com\/blog\/design-your-single-post-template\/\" target=\"_blank\" rel=\"noopener\">single posts<\/a> and regardless of how far they scrolled through the page.\u00a0<\/p><p>It\u2019s not only for navigational purposes though \u2013 They can also considerably improve SEO and increase conversion rates, simply by adding the right call-to-action to either the fixed-top of the page.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a5391df elementor-widget elementor-widget-heading\" data-id=\"a5391df\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How To Build Custom WordPress Header Templates for Different Pages\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4e34070 elementor-widget elementor-widget-text-editor\" data-id=\"4e34070\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Want to designate different headers and footers to different pages of your WordPress site?<\/p><p>You can accomplish this goal in no time. All it takes is creating different header and footer templates, and assigning the proper conditions for each template, attributing the headers and footers to the relevant pages of your site \u2014 like the homepage, for example. Check out this <a href=\"https:\/\/www.youtube.com\/watch?v=HsFBi-u_XdM\" target=\"_blank\" rel=\"noopener\">video guide<\/a> to learn more.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1f16950 read-more-link elementor-widget elementor-widget-heading\" data-id=\"1f16950\" data-element_type=\"widget\" data-gac=\"CTA_Elements\" data-gaa=\"Link\" data-gal=\"Position_Text_CTA\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/\">Take Header Navigation a Step Further by Creating a Mega Menu<\/a><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2fe31a2 elementor-widget elementor-widget-heading\" data-id=\"2fe31a2\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">5 Website Footer Examples\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bd1cbaa elementor-widget elementor-widget-heading\" data-id=\"bd1cbaa\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">1. The Extra Long Footer\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4b2cbd5 elementor-widget elementor-widget-image\" data-id=\"4b2cbd5\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image7-2-r4q72vojgoyd78d9e5c5zj5t65xt4hr6mb65sugiae.png\" title=\"The Extra Long Footer\" alt=\"The Extra Long Footer\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9df03a6 elementor-widget elementor-widget-text-editor\" data-id=\"9df03a6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This footer design puts an emphasis on design with complex navigation. On the left side, it has a column with a logo and details, and on the right, there\u2019s a navigator, contact, newsletter, and social buttons.<\/p><p>What\u2019s key to emphasize here is that even when the footer contains numerous features it does not appear overloaded, because there is a clear design division in the regions.\u00a0<\/p><p>Watch the <a href=\"https:\/\/www.youtube.com\/watch?v=IWOXJQutKDY\" target=\"_blank\" rel=\"noopener\">video tutorial<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-18da40f elementor-widget elementor-widget-heading\" data-id=\"18da40f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">2. The Mobile-Friendly Footer\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0744592 elementor-widget elementor-widget-image\" data-id=\"0744592\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image5-1-r4q73ff5g7pdz1kl6vvbxw6hn98im4xjp0vcvnn9f8.png\" title=\"The Mobile-Friendly Footer\" alt=\"The Mobile-Friendly Footer\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ffbf799 elementor-widget elementor-widget-text-editor\" data-id=\"ffbf799\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The footer\u2019s substantial size is eye-catching, its large area is filled with a video form background form and with a contact form. Again, the contact information and location are positioned in a place that really stands out.<\/p><p>When designing a header or a footer, don\u2019t forget to take mobile devices into consideration, and understand how the design may differ on them.\u00a0<\/p><p>Watch the <a href=\"https:\/\/youtu.be\/_GNPo78YD6A\" target=\"_blank\" rel=\"noopener\">video tutorial<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2bfadde elementor-widget elementor-widget-heading\" data-id=\"2bfadde\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">3. The Artistic Footer\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6a71473 elementor-widget elementor-widget-image\" data-id=\"6a71473\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image1-2-r4q76nz4zo4xyovaaa92j2rnb1a14ls9h1rkdyug2g.png\" title=\"The Artistic Footer\" alt=\"The Artistic Footer\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-38fec81 elementor-widget elementor-widget-text-editor\" data-id=\"38fec81\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The footer has a large area with a video background and complex navigation. An image was also added in a separate area and attached it to the center to get a suitable design effect.\u00a0<\/p><p>Watch the <a href=\"https:\/\/youtu.be\/qNa8cODmCfM\" target=\"_blank\" rel=\"noopener\">video tutorial<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9d2adfa elementor-widget elementor-widget-heading\" data-id=\"9d2adfa\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">4. The Enchanting Footer\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3a86ee2 elementor-widget elementor-widget-image\" data-id=\"3a86ee2\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image3-2-r4q721lpdzt6vpky9sc3rqr25u22a6fru6amfzp352.png\" title=\"The Enchanting Footer\" alt=\"The Enchanting Footer\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-44dd364 elementor-widget elementor-widget-text-editor\" data-id=\"44dd364\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The footer has a large image above the navigation area, with the bottom area being the background color of the image, containing basic navigation in several columns, a contact form, and more.\u00a0<\/p><p>Watch the <a href=\"https:\/\/youtu.be\/qGSnZOIv5ew\" target=\"_blank\" rel=\"noopener\">video tutorial<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e95c748 elementor-widget elementor-widget-heading\" data-id=\"e95c748\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">5. The Minimalist\u2019s Footer\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-43ee87e elementor-widget elementor-widget-image\" data-id=\"43ee87e\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image8-1-r4q77zwwo7ykesxnicz1k8o5lopr162knn1bv2vd08.png\" title=\"The Minimalist\u2019s Footer\" alt=\"The Minimalist\u2019s Footer\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2f058bb elementor-widget elementor-widget-text-editor\" data-id=\"2f058bb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The simple footer offers little in terms of information, however, it takes a large space and implements uneven geometrical shapes to enforce the sense of artistic freedom and a connection to abstract art.\u00a0<\/p><p>Watch the <a href=\"https:\/\/youtu.be\/YIUbMc-HPyY\" target=\"_blank\" rel=\"noopener\">video tutorial<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a494356 elementor-widget elementor-widget-heading\" data-id=\"a494356\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">100% Responsive and Mobile-Friendly Headers &amp; Footers\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cc8fe88 elementor-widget elementor-widget-text-editor\" data-id=\"cc8fe88\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Design a responsive header and footer for WordPress by previewing them in Elementor\u2019s mobile view. You can differentiate between different column structures and widths for different devices, and create headers and footers that look perfect on every device.<\/p><p>Header and Footer control makes Elementor&#8217;s mobile menu builder more relevant than ever. The menu automatically turns into a mobile hamburger menu, so you don&#8217;t have to do any customizations on your own.<\/p><p>While you can customize any header and footer for mobile devices, sometimes designers prefer to design two separate sections, showing one on desktops and the other on mobile. This can be easily done with a simple hide\/show click, available under the advanced tab of the section.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-88a92e4 elementor-widget elementor-widget-heading\" data-id=\"88a92e4\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Create Amazing Headers and Footers With Elementor\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d72061c elementor-widget elementor-widget-text-editor\" data-id=\"d72061c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>With <a href=\"https:\/\/elementor.com\/theme-builder\/\" target=\"_blank\" rel=\"noopener\">Elementor Theme Builder<\/a>, we solved a huge problem known by every WordPress user.<\/p><p>Never again will you have to wait for the developer to change your header.php file, switch to another theme just to move a header logo, or work hard to customize the <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\"   title=\"What Is CSS? How to Use it in Web Design (2025)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"26933\">CSS<\/a> header and footer elements of your site. Elementor Pro makes header and footer design quick and super-simple.<\/p><p>Finally, your website vision can truly come to life. Join Pro today, and gain complete control over your entire website design.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Elementor now offers never-before-seen flexibility to visually design the header &amp; footer areas, including Sticky Header, 25+ brand-new stunning header-footer blocks and full compatibility to virtually any WordPress theme. <\/p>\n","protected":false},"author":4,"featured_media":12589,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[32],"tags":[79,173],"marketing_persona":[47],"marketing_intent":[],"class_list":["post-12348","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-build","tag-video"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create A Header &amp; Footer in WordPress + Examples | Elementor<\/title>\n<meta name=\"description\" content=\"See how to customize your WordPress header &amp; footer areas, including Sticky Header, stunning header-footer blocks and more using Elementor.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/header-footer-builder\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create A Header &amp; Footer in WordPress + Examples | Elementor\" \/>\n<meta property=\"og:description\" content=\"See how to customize your WordPress header &amp; footer areas, including Sticky Header, stunning header-footer blocks and more using Elementor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/header-footer-builder\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-04-30T08:50:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-05T22:34:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/04\/header-footer-post.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ben Pines\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ben Pines\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/header-footer-builder\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/header-footer-builder\/\"},\"author\":{\"name\":\"Ben Pines\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/c772e5251f765dce36a2b4989bad900a\"},\"headline\":\"How to Create Headers &amp; Footers in WordPress\",\"datePublished\":\"2018-04-30T08:50:29+00:00\",\"dateModified\":\"2025-12-05T22:34:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/header-footer-builder\/\"},\"wordCount\":1616,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/header-footer-builder\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/04\/header-footer-post.png\",\"keywords\":[\"Build\",\"Video\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/header-footer-builder\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/header-footer-builder\/\",\"url\":\"https:\/\/elementor.com\/blog\/header-footer-builder\/\",\"name\":\"How to Create A Header & Footer in WordPress + Examples | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/header-footer-builder\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/header-footer-builder\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/04\/header-footer-post.png\",\"datePublished\":\"2018-04-30T08:50:29+00:00\",\"dateModified\":\"2025-12-05T22:34:04+00:00\",\"description\":\"See how to customize your WordPress header & footer areas, including Sticky Header, stunning header-footer blocks and more using Elementor.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/header-footer-builder\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/header-footer-builder\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/header-footer-builder\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/04\/header-footer-post.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/04\/header-footer-post.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/header-footer-builder\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design\",\"item\":\"https:\/\/elementor.com\/blog\/category\/design\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create Headers &amp; Footers in WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/c772e5251f765dce36a2b4989bad900a\",\"name\":\"Ben Pines\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g\",\"caption\":\"Ben Pines\"},\"description\":\"Building websites seems like the dream job, and it is, but you have to know much more than technical skills. My mission at Elementor is to teach web creators how to build a successful business they love.\",\"sameAs\":[\"https:\/\/elementor.com\"],\"url\":\"https:\/\/elementor.com\/blog\/author\/ben-pines\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create A Header & Footer in WordPress + Examples | Elementor","description":"See how to customize your WordPress header & footer areas, including Sticky Header, stunning header-footer blocks and more using Elementor.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/header-footer-builder\/","og_locale":"en_US","og_type":"article","og_title":"How to Create A Header & Footer in WordPress + Examples | Elementor","og_description":"See how to customize your WordPress header & footer areas, including Sticky Header, stunning header-footer blocks and more using Elementor.","og_url":"https:\/\/elementor.com\/blog\/header-footer-builder\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2018-04-30T08:50:29+00:00","article_modified_time":"2025-12-05T22:34:04+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/04\/header-footer-post.png","type":"image\/png"}],"author":"Ben Pines","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Ben Pines","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/header-footer-builder\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/header-footer-builder\/"},"author":{"name":"Ben Pines","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/c772e5251f765dce36a2b4989bad900a"},"headline":"How to Create Headers &amp; Footers in WordPress","datePublished":"2018-04-30T08:50:29+00:00","dateModified":"2025-12-05T22:34:04+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/header-footer-builder\/"},"wordCount":1616,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/header-footer-builder\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/04\/header-footer-post.png","keywords":["Build","Video"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/header-footer-builder\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/header-footer-builder\/","url":"https:\/\/elementor.com\/blog\/header-footer-builder\/","name":"How to Create A Header & Footer in WordPress + Examples | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/header-footer-builder\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/header-footer-builder\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/04\/header-footer-post.png","datePublished":"2018-04-30T08:50:29+00:00","dateModified":"2025-12-05T22:34:04+00:00","description":"See how to customize your WordPress header & footer areas, including Sticky Header, stunning header-footer blocks and more using Elementor.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/header-footer-builder\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/header-footer-builder\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/header-footer-builder\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/04\/header-footer-post.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/04\/header-footer-post.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/header-footer-builder\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Design","item":"https:\/\/elementor.com\/blog\/category\/design\/"},{"@type":"ListItem","position":3,"name":"How to Create Headers &amp; Footers in WordPress"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/c772e5251f765dce36a2b4989bad900a","name":"Ben Pines","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g","caption":"Ben Pines"},"description":"Building websites seems like the dream job, and it is, but you have to know much more than technical skills. My mission at Elementor is to teach web creators how to build a successful business they love.","sameAs":["https:\/\/elementor.com"],"url":"https:\/\/elementor.com\/blog\/author\/ben-pines\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/12348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=12348"}],"version-history":[{"count":7,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/12348\/revisions"}],"predecessor-version":[{"id":146778,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/12348\/revisions\/146778"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/12589"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=12348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=12348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=12348"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=12348"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=12348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}