{"id":814,"date":"2019-04-16T01:37:19","date_gmt":"2019-04-16T01:37:19","guid":{"rendered":"https:\/\/docs.generatepress.com\/?post_type=keep_articles&#038;p=814"},"modified":"2022-05-09T17:14:26","modified_gmt":"2022-05-09T17:14:26","slug":"header-element-overview","status":"publish","type":"keep_articles","link":"https:\/\/docs.generatepress.com\/article\/header-element-overview\/","title":{"rendered":"Header Element Overview"},"content":{"rendered":"\n<p>The Header element replaces our old Page Header module. This element has most of the same options as the old Page Headers. If you need help migrating from your old Page Header, see <a href=\"https:\/\/docs.generatepress.com\/article\/moving-hooks-page-headers-to-elements\/\">this article<\/a>.<\/p>\n\n\n\n<p>For a <strong>step by step guideline<\/strong> of creating a page hero, please see <a href=\"https:\/\/docs.generatepress.com\/article\/how-to-create-a-page-hero\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"this article (opens in a new tab)\">this article<\/a>.<\/p>\n\n\n\n<div style=\"padding:56.25% 0 0 0;position:relative;margin-bottom: 40px;\"><iframe src=\"https:\/\/player.vimeo.com\/video\/284422319?title=0&amp;byline=0&amp;portrait=0\" style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" frameborder=\"0\" webkitallowfullscreen=\"\" mozallowfullscreen=\"\" allowfullscreen=\"\"><\/iframe><\/div><script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n\n\n\n<p>To create a new Header Element, go to <strong>Appearance &gt; Elements<\/strong> and click &#8220;Add New&#8221;. From the Element dropdown list, choose &#8220;Header&#8221;.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Content<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/04\/header-element-content.png\"><img decoding=\"async\" loading=\"lazy\" width=\"1410\" height=\"309\" src=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/04\/header-element-content.png\" alt=\"\" class=\"wp-image-1481\" srcset=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/04\/header-element-content.png 1410w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/04\/header-element-content-300x66.png 300w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/04\/header-element-content-768x168.png 768w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/04\/header-element-content-1024x224.png 1024w\" sizes=\"(max-width: 1410px) 100vw, 1410px\" \/><\/a><\/figure>\n\n\n\n<p>Content is required if you want to use the background image option below.<\/p>\n\n\n\n<p>The content box accepts any HTML (headings, paragraphs etc.), shortcodes (slider, contact forms etc.) or <a rel=\"noreferrer noopener\" aria-label=\"template tags (opens in a new tab)\" href=\"https:\/\/docs.generatepress.com\/article\/header-element-template-tags\/\" target=\"_blank\">template tags<\/a>.<\/p>\n\n\n\n<p><strong>If you only want to use the background image without adding any content, simply add some HTML comments:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!--This is a comment.--&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Page Hero<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1299\" height=\"908\" src=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2018\/07\/header-element-page-hero-2.png\" alt=\"\" class=\"wp-image-820\" srcset=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2018\/07\/header-element-page-hero-2.png 1299w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2018\/07\/header-element-page-hero-2-300x210.png 300w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2018\/07\/header-element-page-hero-2-768x537.png 768w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2018\/07\/header-element-page-hero-2-1024x716.png 1024w\" sizes=\"(max-width: 1299px) 100vw, 1299px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Element Classes<\/h3>\n\n\n\n<p>Add custom classes to the header element.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Container<\/h3>\n\n\n\n<p>The container option is what the page hero background image or color is applied to.<\/p>\n\n\n\n<div class=\"wp-block-columns has-2-columns is-layout-flex wp-container-3 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Full<\/strong>: The page hero will span the entire width of the screen.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/05\/Pagehero-fullwidth.png\"><img decoding=\"async\" loading=\"lazy\" width=\"1667\" height=\"615\" src=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/05\/Pagehero-fullwidth.png\" alt=\"\" class=\"wp-image-1507\" srcset=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/05\/Pagehero-fullwidth.png 1667w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/05\/Pagehero-fullwidth-300x111.png 300w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/05\/Pagehero-fullwidth-768x283.png 768w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/05\/Pagehero-fullwidth-1024x378.png 1024w\" sizes=\"(max-width: 1667px) 100vw, 1667px\" \/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Contained<\/strong>: The page hero will be the same width as the container.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/05\/Pagehero-contained.png\"><img decoding=\"async\" loading=\"lazy\" width=\"1622\" height=\"631\" src=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/05\/Pagehero-contained.png\" alt=\"\" class=\"wp-image-1508\" srcset=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/05\/Pagehero-contained.png 1622w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/05\/Pagehero-contained-300x117.png 300w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/05\/Pagehero-contained-768x299.png 768w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/05\/Pagehero-contained-1024x398.png 1024w\" sizes=\"(max-width: 1622px) 100vw, 1622px\" \/><\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Inner Container<\/h3>\n\n\n\n<p>This option refers to the inner container which holds the page hero content.<\/p>\n\n\n\n<div class=\"wp-block-columns has-2-columns is-layout-flex wp-container-6 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Full<\/strong>: The content will span the entire width of the screen.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/05\/Pagehero-full-full.png\"><img decoding=\"async\" loading=\"lazy\" width=\"1584\" height=\"617\" src=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/05\/Pagehero-full-full.png\" alt=\"\" class=\"wp-image-1510\" srcset=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/05\/Pagehero-full-full.png 1584w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/05\/Pagehero-full-full-300x117.png 300w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/05\/Pagehero-full-full-768x299.png 768w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/05\/Pagehero-full-full-1024x399.png 1024w\" sizes=\"(max-width: 1584px) 100vw, 1584px\" \/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong>Contained<\/strong>: The content will be the same width as the container.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/05\/Pagehero-full-contained.png\"><img decoding=\"async\" loading=\"lazy\" width=\"1519\" height=\"623\" src=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/05\/Pagehero-full-contained.png\" alt=\"\" class=\"wp-image-1511\" srcset=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/05\/Pagehero-full-contained.png 1519w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/05\/Pagehero-full-contained-300x123.png 300w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/05\/Pagehero-full-contained-768x315.png 768w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/05\/Pagehero-full-contained-1024x420.png 1024w\" sizes=\"(max-width: 1519px) 100vw, 1519px\" \/><\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Horizontal Alignment<\/h3>\n\n\n\n<p>Choose the horizontal alignment of the page hero content.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Full Screen<\/h3>\n\n\n\n<p>This option will force the page hero to take up the entire viewport of your page.<br><em>Note: Requires Merge to be selected in Site Header tab.<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Padding<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/04\/page-hero-padding.png\"><img decoding=\"async\" loading=\"lazy\" width=\"1111\" height=\"251\" src=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/04\/page-hero-padding.png\" alt=\"\" class=\"wp-image-1483\" srcset=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/04\/page-hero-padding.png 1111w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/04\/page-hero-padding-300x68.png 300w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/04\/page-hero-padding-768x174.png 768w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/04\/page-hero-padding-1024x231.png 1024w\" sizes=\"(max-width: 1111px) 100vw, 1111px\" \/><\/a><\/figure>\n\n\n\n<p>Add padding to the page hero content.<\/p>\n\n\n\n<p>The height of the page hero is determined by the top and bottom padding.<\/p>\n\n\n\n<p>Use the toggle to set different padding for desktop and mobile.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Background Image<\/h3>\n\n\n\n<p>Add background image to the page hero content.<br><\/p>\n\n\n\n<p><strong>Featured Image<\/strong> &#8211; Use the <a href=\"https:\/\/docs.generatepress.com\/article\/adding-featured-images\/\">Featured Image<\/a> added in the pages or posts as the background image. You can also select a fallback image to show when no featured image is added in the individual page or post.<\/p>\n\n\n\n<p><strong>Custom Image<\/strong> &#8211; Upload a custom image for this specific page hero.<br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Background Image Position<\/h3>\n\n\n\n<p>Set the position of the background image.<br><em>Note: Requires Featured Image or Custom Image to be selected.<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Parallax<\/h3>\n\n\n\n<p>Enabling this option will apply a <a href=\"http:\/\/gpsites.co\/mellow\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"parallax effect (opens in a new tab)\">parallax effect<\/a> (moves as you scroll) to the background image.<br><em>Note: Requires Featured Image or Custom Image to be selected.<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Disable Featured Image<\/h3>\n\n\n\n<p>Disable the featured image on posts with this page hero.<br><em>Note: Requires Featured Image or Custom Image to be selected.<\/em><br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Background Overlay<\/h3>\n\n\n\n<p>Use the background color as a background overlay.<br><em>Note: Requires Featured Image or Custom Image to be selected.<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Colors<\/h3>\n\n\n\n<p>Set the background, color and link colors for the page hero content.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Site Header<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1297\" height=\"1035\" src=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2018\/07\/header-element-site-header.png\" alt=\"\" class=\"wp-image-821\" srcset=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2018\/07\/header-element-site-header.png 1297w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2018\/07\/header-element-site-header-300x239.png 300w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2018\/07\/header-element-site-header-768x613.png 768w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2018\/07\/header-element-site-header-1024x817.png 1024w\" sizes=\"(max-width: 1297px) 100vw, 1297px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Merge with Content<\/h3>\n\n\n\n<p>Place your site header on top of the content below it. See more info <a href=\"https:\/\/docs.generatepress.com\/article\/transparent-header-and-navigation\/\">here<\/a> and some examples <a href=\"https:\/\/docs.generatepress.com\/article\/page-hero-examples\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"here (opens in a new tab)\">here<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Offset Site Header Height<\/h3>\n\n\n\n<p>Add to the top padding of the page hero to prevent overlapping.<\/p>\n\n\n\n<div class=\"wp-block-columns has-2-columns is-layout-flex wp-container-9 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Without offset:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/04\/page-hero-without-offset.png\"><img decoding=\"async\" loading=\"lazy\" width=\"1108\" height=\"350\" src=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/04\/page-hero-without-offset.png\" alt=\"\" class=\"wp-image-1486\" srcset=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/04\/page-hero-without-offset.png 1108w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/04\/page-hero-without-offset-300x95.png 300w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/04\/page-hero-without-offset-768x243.png 768w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/04\/page-hero-without-offset-1024x323.png 1024w\" sizes=\"(max-width: 1108px) 100vw, 1108px\" \/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>With 100px (header height) offset:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/04\/page-hero-with-offset.png\"><img decoding=\"async\" loading=\"lazy\" width=\"1108\" height=\"449\" src=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/04\/page-hero-with-offset.png\" alt=\"\" class=\"wp-image-1487\" srcset=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/04\/page-hero-with-offset.png 1108w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/04\/page-hero-with-offset-300x122.png 300w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/04\/page-hero-with-offset-768x311.png 768w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/04\/page-hero-with-offset-1024x415.png 1024w\" sizes=\"(max-width: 1108px) 100vw, 1108px\" \/><\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Header Background<\/h3>\n\n\n\n<p>Apply a specific header background color to go with this page hero. This would replace the <a href=\"https:\/\/docs.generatepress.com\/article\/colors-overview\/\">header background color<\/a> set in the customizer.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Site Logo<\/h3>\n\n\n\n<p>Apply a specific logo to go with this page hero. This is especially useful if Merge with Content option is enabled. See an example <a href=\"https:\/\/docs.generatepress.com\/article\/navigation-as-a-header\/#different-logo-and-navigation-colors\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"here (opens in a new tab)\">here<\/a>.<br><em>Note: Requires an existing logo uploaded in <a href=\"https:\/\/docs.generatepress.com\/article\/adding-header-logo\/\">Site Logo<\/a>.<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Navigation Logo<\/h3>\n\n\n\n<p>Apply a specific navigation logo to go with this page hero. This is especially useful if Merge with Content option is enabled. See an example <a rel=\"noreferrer noopener\" href=\"https:\/\/docs.generatepress.com\/article\/navigation-as-a-header\/#different-logo-and-navigation-colors\" target=\"_blank\">here<\/a>. <br><em>Note: Requires an existing logo uploaded in <a href=\"https:\/\/docs.generatepress.com\/article\/navigation-logo\/\">Navigation Logo<\/a>.<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Navigation Location<\/h3>\n\n\n\n<p>Use a specific navigation location for this page hero. This would replace the global <a href=\"https:\/\/docs.generatepress.com\/article\/navigation-location\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"navigation location (opens in a new tab)\">navigation location<\/a> set in the customizer.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Navigation Colors<\/h3>\n\n\n\n<p>Apply specific navigation colors for this page hero. This would replace the <a href=\"https:\/\/docs.generatepress.com\/article\/colors-overview\/\">navigation colors<\/a> set in the customizer. See an example <a rel=\"noreferrer noopener\" href=\"https:\/\/docs.generatepress.com\/article\/navigation-as-a-header\/#different-logo-and-navigation-colors\" target=\"_blank\">here<\/a>.<\/p>\n\n\n\n<p>The sticky navigation colors will still inherit the global  <br><a href=\"https:\/\/docs.generatepress.com\/article\/colors-overview\/\">navigation colors<\/a> settings in the customizer.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Display Rules<\/h2>\n\n\n\n<p>In order for your element to display anywhere on your website, you must set certain conditions within the Display Rules tab.<\/p>\n\n\n\n<p>These settings allow you to display your element throughout your site. You can choose specific pages, posts, categories etc.. You can even tell the element to display across your entire site.<\/p>\n\n\n\n<p>You can also exclude the element using the same conditions. For example, you can tell your element to display throughout your entire site, excluding the About page.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1281\" height=\"499\" src=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2018\/07\/header-element-DR.png\" alt=\"\" class=\"wp-image-822\" srcset=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2018\/07\/header-element-DR.png 1281w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2018\/07\/header-element-DR-300x117.png 300w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2018\/07\/header-element-DR-768x299.png 768w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2018\/07\/header-element-DR-1024x399.png 1024w\" sizes=\"(max-width: 1281px) 100vw, 1281px\" \/><\/figure>\n\n\n\n<p><span style=\"background-color:rgb(232, 234, 235)\"><\/span><strong>Location<\/strong> (required) &#8211; Choose when this element should display.<\/p>\n\n\n\n<p><strong>Exclude<\/strong>&nbsp;<em>(optional)<\/em> &#8211; Choose when this element should not display.<\/p>\n\n\n\n<p><strong>Users<\/strong>&nbsp;<em>(optional)<\/em> &#8211; Display element for specific user roles.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Internal Notes<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1283\" height=\"482\" src=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2018\/07\/header-element-notes.png\" alt=\"\" class=\"wp-image-823\" srcset=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2018\/07\/header-element-notes.png 1283w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2018\/07\/header-element-notes-300x113.png 300w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2018\/07\/header-element-notes-768x289.png 768w, https:\/\/docs.generatepress.com\/wp-content\/uploads\/2018\/07\/header-element-notes-1024x385.png 1024w\" sizes=\"(max-width: 1283px) 100vw, 1283px\" \/><\/figure>\n\n\n\n<p><em>This tab an optional tab<\/em>. The content here will not show up at the front end. It is used to help you remember why this element was added.<\/p>\n","protected":false},"template":"","yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Header Element Overview - Documentation<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/docs.generatepress.com\/article\/header-element-overview\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Header Element Overview - Documentation\" \/>\n<meta property=\"og:description\" content=\"The Header element replaces our old Page Header module. This element has most of the same options as the old Page Headers. If you need help migrating from your old Page Header, see this article. For a step by step guideline of creating a page hero, please see this article. To create a new Header [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/docs.generatepress.com\/article\/header-element-overview\/\" \/>\n<meta property=\"og:site_name\" content=\"Documentation\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/GeneratePress\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-09T17:14:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/04\/header-element-content.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@GeneratePress\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/docs.generatepress.com\/article\/header-element-overview\/\",\"url\":\"https:\/\/docs.generatepress.com\/article\/header-element-overview\/\",\"name\":\"Header Element Overview - Documentation\",\"isPartOf\":{\"@id\":\"https:\/\/docs.generatepress.com\/#website\"},\"datePublished\":\"2019-04-16T01:37:19+00:00\",\"dateModified\":\"2022-05-09T17:14:26+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/docs.generatepress.com\/article\/header-element-overview\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/docs.generatepress.com\/article\/header-element-overview\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/docs.generatepress.com\/article\/header-element-overview\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/docs.generatepress.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/docs.generatepress.com\/article\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Header Element Overview\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/docs.generatepress.com\/#website\",\"url\":\"https:\/\/docs.generatepress.com\/\",\"name\":\"Documentation\",\"description\":\"Get to Know GeneratePress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/docs.generatepress.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Header Element Overview - Documentation","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:\/\/docs.generatepress.com\/article\/header-element-overview\/","og_locale":"en_US","og_type":"article","og_title":"Header Element Overview - Documentation","og_description":"The Header element replaces our old Page Header module. This element has most of the same options as the old Page Headers. If you need help migrating from your old Page Header, see this article. For a step by step guideline of creating a page hero, please see this article. To create a new Header [&hellip;]","og_url":"https:\/\/docs.generatepress.com\/article\/header-element-overview\/","og_site_name":"Documentation","article_publisher":"https:\/\/www.facebook.com\/GeneratePress","article_modified_time":"2022-05-09T17:14:26+00:00","og_image":[{"url":"https:\/\/docs.generatepress.com\/wp-content\/uploads\/2019\/04\/header-element-content.png"}],"twitter_card":"summary_large_image","twitter_site":"@GeneratePress","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/docs.generatepress.com\/article\/header-element-overview\/","url":"https:\/\/docs.generatepress.com\/article\/header-element-overview\/","name":"Header Element Overview - Documentation","isPartOf":{"@id":"https:\/\/docs.generatepress.com\/#website"},"datePublished":"2019-04-16T01:37:19+00:00","dateModified":"2022-05-09T17:14:26+00:00","breadcrumb":{"@id":"https:\/\/docs.generatepress.com\/article\/header-element-overview\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/docs.generatepress.com\/article\/header-element-overview\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/docs.generatepress.com\/article\/header-element-overview\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/docs.generatepress.com\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/docs.generatepress.com\/article\/"},{"@type":"ListItem","position":3,"name":"Header Element Overview"}]},{"@type":"WebSite","@id":"https:\/\/docs.generatepress.com\/#website","url":"https:\/\/docs.generatepress.com\/","name":"Documentation","description":"Get to Know GeneratePress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/docs.generatepress.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/docs.generatepress.com\/wp-json\/wp\/v2\/keep-api\/814"}],"collection":[{"href":"https:\/\/docs.generatepress.com\/wp-json\/wp\/v2\/keep-api"}],"about":[{"href":"https:\/\/docs.generatepress.com\/wp-json\/wp\/v2\/types\/keep_articles"}],"wp:attachment":[{"href":"https:\/\/docs.generatepress.com\/wp-json\/wp\/v2\/media?parent=814"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}