{"id":29248,"date":"2023-08-07T12:00:00","date_gmt":"2023-08-07T09:00:00","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=29248"},"modified":"2025-09-28T12:42:56","modified_gmt":"2025-09-28T09:42:56","slug":"creating-a-header-template-with-the-container","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/creating-a-header-template-with-the-container\/","title":{"rendered":"Create a header with containers"},"content":{"rendered":"\n<p>In this example, we\u2019ll show you how to build a header for your websites. We\u2019ll&nbsp; use four different widgets to best demonstrate how to create headers that work across all devices without having to duplicate and hide elements.<\/p>\n\n\n\n<p>In the example, we\u2019ll be using some advanced properties of containers. To learn more about containers, check out How do I learn about flexbox containers for a list of resources about containers.&nbsp;<\/p>\n\n\n\n<p>In this example, we won\u2019t go into detail about the widgets we use but there are links to detailed articles about how to use these widgets.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Create a Header template<\/h2>\n\n\n\n<p>Begin by creating a new Header template in the Theme Builder. For details, see <a href=\"https:\/\/elementor.com\/help\/header-site-part\/\">Create or edit your Header<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Add content to your header<\/h2>\n\n\n\n<p>While there are no rules for what should be found in a header, in this example we\u2019ll add four common elements to the header:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Site Logo<\/li>\n\n\n\n<li>Menu<\/li>\n\n\n\n<li>Search<\/li>\n\n\n\n<li>Social Icons<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Create a container<\/h2>\n\n\n\n<p>Containers hold the elements that make up the header. We\u2019ll create one container which will hold the header\u2019s elements.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>On the canvas, click the plus icon.<br><img fetchpriority=\"high\" decoding=\"async\" width=\"680\" height=\"360\" class=\"wp-image-153746\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/1-click-the-plus-sign.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/1-click-the-plus-sign.png 1335w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/1-click-the-plus-sign-300x159.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/1-click-the-plus-sign-1024x542.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/1-click-the-plus-sign-768x407.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/li>\n\n\n\n<li>Select Flexbox.<br><img decoding=\"async\" width=\"680\" height=\"272\" class=\"wp-image-153753\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/2-select-flexbox.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/2-select-flexbox.png 1334w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/2-select-flexbox-300x120.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/2-select-flexbox-1024x409.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/2-select-flexbox-768x307.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/li>\n\n\n\n<li>Select the one container design set to rows.<br><img decoding=\"async\" width=\"680\" height=\"271\" class=\"wp-image-153760\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/3-select-one-row-container.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/3-select-one-row-container.png 1338w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/3-select-one-row-container-300x120.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/3-select-one-row-container-1024x408.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/3-select-one-row-container-768x306.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/>\u00a0<\/li>\n\n\n\n<li>Containers can be set to display elements either horizontally or vertically.<\/li>\n\n\n\n<li>In the panel, set the following properties for the container:\n<ol class=\"wp-block-list\">\n<li><strong>Content Width<\/strong>: Boxed<\/li>\n\n\n\n<li><strong>Justify Content<\/strong>: End<\/li>\n\n\n\n<li><strong>Align Items<\/strong>: Center<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"666\" class=\"wp-image-153767\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/4-contianer-properties.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/4-contianer-properties.png 284w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/4-contianer-properties-126x300.png 126w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n<\/ol>\n<\/li>\n\n\n\n<li>Click the <strong>Advanced<\/strong> tab.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"666\" class=\"wp-image-153774\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/6-click-the-Advanced-tab.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/6-click-the-Advanced-tab.png 284w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/6-click-the-Advanced-tab-126x300.png 126w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>Add 10 PX padding to all sides of the container.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"384\" class=\"wp-image-153781\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/7-add-padding.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/7-add-padding.png 281w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/7-add-padding-219x300.png 219w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>Click the plus icon in the top bar to access the elements.<\/li>\n\n\n\n<li>Drag the Social icons widget to the container. Learn more about the <a href=\"https:\/\/elementor.com\/help\/social-icons-widget\/\">Social icons widget<\/a>.\u00a0<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"295\" class=\"wp-image-153788\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/8-The-social-icons.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/8-The-social-icons.png 1336w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/8-The-social-icons-300x130.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/8-The-social-icons-1024x444.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/8-The-social-icons-768x333.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><br>Because we set <strong>Justify Content<\/strong> to <strong>End<\/strong>, the widget aligns to the right.<br>The header is a good place to add a search function. While there\u2019s plenty of space in the header to add a search widget for people visiting the site from a PC, it will be too big for mobile devices. Instead, we\u2019ll add a search icon to the header and users clicking the icon will open up a search screen. For details, see <a href=\"https:\/\/elementor.com\/help\/off-canvas-widget\/\">Off-Canvas widget<\/a>.<\/li>\n\n\n\n<li>Click the plus sign in the top bar.<\/li>\n\n\n\n<li>Drag an icon to the canvas to the left of the social icons and set the icon to a search icon. You can also change the size so it suits your design. For details, see <a href=\"https:\/\/elementor.com\/help\/icon-widget\/\">Icon widget<\/a>.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"222\" class=\"wp-image-153795\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/Add-the-search-icon.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/Add-the-search-icon.png 1520w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/Add-the-search-icon-300x98.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/Add-the-search-icon-1024x334.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/Add-the-search-icon-768x251.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/>\u00a0<\/li>\n\n\n\n<li>Set up this icon so that clicking it will open the Off-canvas search widget. Learn more about the <a href=\"https:\/\/elementor.com\/help\/off-canvas-widget\/\">Off-canvas<\/a> and <a href=\"https:\/\/elementor.com\/help\/search-widget\/\">Search widgets<\/a>.<\/li>\n\n\n\n<li>Click the plus sign in the top bar.<\/li>\n\n\n\n<li>Drag a Menu widget to the container to the left of the search bar and set the <strong>Item Position<\/strong> to center. For details, see <a href=\"https:\/\/elementor.com\/help\/the-menu-widget\/\">Menu widget<\/a>.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"284\" class=\"wp-image-153802\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/Add-menu-widget.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/Add-menu-widget.png 1513w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/Add-menu-widget-300x125.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/Add-menu-widget-1024x428.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/Add-menu-widget-768x321.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/li>\n\n\n\n<li>Click the plus sign in the top bar.<\/li>\n\n\n\n<li>Add the Site Logo widget to the container to the left of the menu. Adjust the size to suit your design. For details, see <a href=\"https:\/\/elementor.com\/help\/site-logo-widget-pro\/\">Site Logo widget<\/a>.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"196\" class=\"wp-image-153809\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/Add-site-logo.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/Add-site-logo.png 1516w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/Add-site-logo-300x86.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/Add-site-logo-1024x295.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/Add-site-logo-768x221.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><br>Now let\u2019s check to see how the header will look on other screen sizes.<\/li>\n\n\n\n<li>Click the tablet icon.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"196\" class=\"wp-image-153816\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/Click-the-tablet-icon.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/Click-the-tablet-icon.png 1516w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/Click-the-tablet-icon-300x86.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/Click-the-tablet-icon-1024x295.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/Click-the-tablet-icon-768x221.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><br>Notice that the menu icon is replaced by a hamburger icon. This icon is controlled by the settings of the menu widget.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"225\" class=\"wp-image-153823\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/The-hamburger-icon.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/The-hamburger-icon.png 1287w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/The-hamburger-icon-300x99.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/The-hamburger-icon-1024x339.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/The-hamburger-icon-768x254.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/li>\n\n\n\n<li>Click the mobile icon to see how the header will look on mobile devices.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"275\" class=\"wp-image-153830\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/mobile-view.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/mobile-view.png 1080w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/mobile-view-300x121.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/mobile-view-1024x413.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/mobile-view-768x310.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/li>\n<\/ol>\n\n\n\n<p>[callout type=&#8221;note&#8221;]You may have to make adjustments for different screen sizes. For details, see <a href=\"https:\/\/elementor.com\/help\/mobile-editing\/\">Responsive editing for mobile and tablets<\/a>.[\/callout]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this example, we\u2019ll show you how to build a header for your websites. We\u2019ll&nbsp; use four different widgets to best demonstrate how to create headers that work across all devices without having to duplicate and hide elements. In the example, we\u2019ll be using some advanced properties of containers. To learn more about containers, check [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["65a3d8a9cb656ca864e59773"],"footnotes":""},"categories":[1466],"tags":[1389,1388,1387,1390,1398,1235],"class_list":["post-29248","post","type-post","status-publish","format-standard","hentry","category-templates","tag-advanced","tag-agency","tag-essential","tag-expert","tag-legacy-essential","tag-pro"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Create a header with containers | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Create a header with containers in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\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\/help\/creating-a-header-template-with-the-container\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a header with containers | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Create a header with containers in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/creating-a-header-template-with-the-container\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-07T09:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-28T09:42:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/1-click-the-plus-sign.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1335\" \/>\n\t<meta property=\"og:image:height\" content=\"707\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Alan Kaler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alan Kaler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/creating-a-header-template-with-the-container\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/creating-a-header-template-with-the-container\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\"},\"headline\":\"Create a header with containers\",\"datePublished\":\"2023-08-07T09:00:00+00:00\",\"dateModified\":\"2025-09-28T09:42:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/creating-a-header-template-with-the-container\/\"},\"wordCount\":572,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/creating-a-header-template-with-the-container\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/1-click-the-plus-sign.png\",\"keywords\":[\"Advanced\",\"Agency\",\"Essential\",\"Expert\",\"Legacy Essential\",\"Pro\"],\"articleSection\":[\"Templates\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/creating-a-header-template-with-the-container\/\",\"url\":\"https:\/\/elementor.com\/help\/creating-a-header-template-with-the-container\/\",\"name\":\"Create a header with containers | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/creating-a-header-template-with-the-container\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/creating-a-header-template-with-the-container\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/1-click-the-plus-sign.png\",\"datePublished\":\"2023-08-07T09:00:00+00:00\",\"dateModified\":\"2025-09-28T09:42:56+00:00\",\"description\":\"Learn everything about Create a header with containers in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/creating-a-header-template-with-the-container\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/creating-a-header-template-with-the-container\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/creating-a-header-template-with-the-container\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/1-click-the-plus-sign.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/1-click-the-plus-sign.png\",\"width\":1335,\"height\":707},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/creating-a-header-template-with-the-container\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Themes\",\"item\":\"https:\/\/elementor.com\/help\/themes\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Templates\",\"item\":\"https:\/\/elementor.com\/help\/themes\/templates\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Create a header with containers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/help\/#website\",\"url\":\"https:\/\/elementor.com\/help\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/help\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/help\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/help\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\",\"name\":\"Alan Kaler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"caption\":\"Alan Kaler\"},\"description\":\"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create a header with containers | Elementor","description":"Learn everything about Create a header with containers in this article from Elementor's Knowledge Base. Get Elementor tips & more.","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\/help\/creating-a-header-template-with-the-container\/","og_locale":"en_US","og_type":"article","og_title":"Create a header with containers | Elementor","og_description":"Learn everything about Create a header with containers in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/creating-a-header-template-with-the-container\/","og_site_name":"Help","article_published_time":"2023-08-07T09:00:00+00:00","article_modified_time":"2025-09-28T09:42:56+00:00","og_image":[{"width":1335,"height":707,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/1-click-the-plus-sign.png","type":"image\/png"}],"author":"Alan Kaler","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alan Kaler","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/creating-a-header-template-with-the-container\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/creating-a-header-template-with-the-container\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430"},"headline":"Create a header with containers","datePublished":"2023-08-07T09:00:00+00:00","dateModified":"2025-09-28T09:42:56+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/creating-a-header-template-with-the-container\/"},"wordCount":572,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/creating-a-header-template-with-the-container\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/1-click-the-plus-sign.png","keywords":["Advanced","Agency","Essential","Expert","Legacy Essential","Pro"],"articleSection":["Templates"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/creating-a-header-template-with-the-container\/","url":"https:\/\/elementor.com\/help\/creating-a-header-template-with-the-container\/","name":"Create a header with containers | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/creating-a-header-template-with-the-container\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/creating-a-header-template-with-the-container\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/1-click-the-plus-sign.png","datePublished":"2023-08-07T09:00:00+00:00","dateModified":"2025-09-28T09:42:56+00:00","description":"Learn everything about Create a header with containers in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/creating-a-header-template-with-the-container\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/creating-a-header-template-with-the-container\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/creating-a-header-template-with-the-container\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/1-click-the-plus-sign.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/1-click-the-plus-sign.png","width":1335,"height":707},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/creating-a-header-template-with-the-container\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Themes","item":"https:\/\/elementor.com\/help\/themes\/"},{"@type":"ListItem","position":3,"name":"Templates","item":"https:\/\/elementor.com\/help\/themes\/templates\/"},{"@type":"ListItem","position":4,"name":"Create a header with containers"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430","name":"Alan Kaler","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","caption":"Alan Kaler"},"description":"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/29248","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=29248"}],"version-history":[{"count":5,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/29248\/revisions"}],"predecessor-version":[{"id":153838,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/29248\/revisions\/153838"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=29248"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=29248"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=29248"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}