{"id":635,"date":"2021-04-20T15:13:43","date_gmt":"2021-04-20T15:13:43","guid":{"rendered":"https:\/\/extendthemes.com\/?p=635"},"modified":"2022-09-30T12:24:39","modified_gmt":"2022-09-30T12:24:39","slug":"website-headers","status":"publish","type":"post","link":"https:\/\/colibriwp.com\/blog\/website-headers\/","title":{"rendered":"15+ Beautiful Website Headers and Why They Work So Well (UPDATE 2021)"},"content":{"rendered":"<p>What&#8217;s the first thing a user sees on your website?<\/p>\n<p>Exactly, the header.<\/p>\n<p>If that&#8217;s not appealing enough, if it doesn&#8217;t bring clarity, your users might just go away, and maybe never come back.<\/p>\n<p>We don&#8217;t want that, do we?<\/p>\n<p>Website headers are a central part of designing a website. They play a key role in grabbing the users\u2019 attention and establishing a connection with the website\u2019s visitors.<\/p>\n<p>This is why, in the following lines, we\u2019ll tackle some header design principles you should be aware of when designing a website header.<\/p>\n<h2>Header Design Principles to Follow<\/h2>\n<p>Research studies have found that the users\u2019 eyes move on a webpage by following one of the 3 patterns:<\/p>\n<ul>\n<li><strong>The Gutenbe<span style=\"background-color: transparent;\">rg pattern<\/span><\/strong><img loading=\"lazy\" class=\"wp-image-636 size-medium aligncenter\" style=\"background-color: transparent;\" src=\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/04\/gutenberg-pattern-min-300x213.png\" alt=\"\" width=\"300\" height=\"213\" \/><\/li>\n<\/ul>\n<p>Image Source: https:\/\/vanseodesign.comThe Gutenberg pattern can be applied to text-heavy content. It suggests the readers\u2019 eyes sweep across and down the page in a series of horizontal movements.<\/p>\n<p>Example:<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-674 size-large\" src=\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/04\/gutenberg-pattern-1024x537.png\" alt=\"\" width=\"1024\" height=\"537\" \/><\/p>\n<ul>\n<li><strong>The Z-shaped pattern<\/strong><\/li>\n<\/ul>\n<div id=\"attachment_638\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-638\" loading=\"lazy\" class=\"wp-image-638 size-medium\" src=\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/04\/z-pattern-min-300x300.png\" alt=\"\" width=\"300\" height=\"300\" \/><p id=\"caption-attachment-638\" class=\"wp-caption-text\">Image Source: https:\/\/vanseodesign.com<\/p><\/div>\n<p>The Z-pattern defines the path the users\u2019 eyes follow when scanning a page, a path that takes the shape of a Z letter. It is recommended for the design of landing pages, that readers quickly scan.<\/p>\n<p>Example:<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-675 size-large\" src=\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/04\/z-pattern-1024x522.png\" alt=\"\" width=\"1024\" height=\"522\" \/><\/p>\n<ul>\n<li><strong>The F-shaped pattern<\/strong><\/li>\n<\/ul>\n<div id=\"attachment_639\" style=\"width: 307px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-639\" loading=\"lazy\" class=\"wp-image-639 size-medium\" src=\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/04\/F-pattern-min-297x300.png\" alt=\"\" width=\"297\" height=\"300\" \/><p id=\"caption-attachment-639\" class=\"wp-caption-text\">Image Source: https:\/\/vanseodesign.com<\/p><\/div>\n<p>This pattern describes the most commonly used style of reading blocks of content in the online medium. Users quickly scan a webpage, and their eyes follow an F-pattern.<\/p>\n<p>Example:<\/p>\n<p><img loading=\"lazy\" class=\"wp-image-676 size-large aligncenter\" src=\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/04\/f-pattern-1024x936.png\" alt=\"\" width=\"1024\" height=\"936\" \/><\/p>\n<p>Without going into further details about these patterns, we\u2019d like to strengthen that for any of these models, the upper horizontal line is where the visitors begin scanning a page.<\/p>\n<h3>What to integrate into a website header?<\/h3>\n<p>These patterns show why a web designer must carefully decide what users should see first. The header should serve as a hook that will catch their attention and invite them to explore the rest of the page.<\/p>\n<p>There\u2019s no chance to make a second impression. So, you should think twice about what to include in the header:<\/p>\n<ul>\n<li><strong>Strong hero image<\/strong><\/li>\n<\/ul>\n<p>A hero image is a very large banner image that is shown above the fold on a webpage. It is included in the header section and is the first thing the users see when arriving on a website. Hero images also have the purpose of attracting visitors&#8217; attention to the unique selling point (USP) of the business. A best-case practice states that using faces of real people in the hero images can help visitors relate better to the brand. Communication gets more humane and personal.<img loading=\"lazy\" class=\"aligncenter wp-image-7160\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/04\/website-hero-image-using-people-faces.jpg\" alt=\"website hero image using people faces\" width=\"840\" height=\"428\" \/><\/p>\n<p style=\"text-align: center;\"><em>Source: Drift.com<\/em><\/p>\n<ul>\n<li><strong>Unique selling point (USP)<\/strong><\/li>\n<\/ul>\n<p>The USP is a phrase that explains the reason a business exists. It should reveal what the business does, why, and for whom. It should also emphasize unique features and benefits, that make the brand stand out among its competitors. A strong USP is vital in conveying the right message to the website visitors, and, ultimately, in converting them into customers. <img loading=\"lazy\" class=\"aligncenter wp-image-7161\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/04\/MIRO-unique-selling-point.jpg\" alt=\"MIRO unique selling point\" width=\"850\" height=\"309\" \/><\/p>\n<p style=\"text-align: center;\"><em>Source: miro.com<\/em><\/p>\n<ul>\n<li><strong>Brand name<\/strong><\/li>\n<\/ul>\n<p>The brand name gets people accustomed to the site identity or reinforces the image people have of your business identity.<\/p>\n<p>The image should reflect your brand personality and ensure your brand voice is consistent throughout the whole website. It should be easily recognizable even if cut out from the website header. And when placed into the website header, it should play a key role in establishing a personal connection with every user.<img loading=\"lazy\" class=\"aligncenter wp-image-7162\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/04\/Brand-name-in-website-header.jpg\" alt=\"Brand name in website header\" width=\"700\" height=\"458\" \/><\/p>\n<p style=\"text-align: center;\"><em>Source: carolinaherrera.com<\/em><\/p>\n<ul>\n<li><strong>Product video<\/strong><\/li>\n<\/ul>\n<p>Because it only takes 50 milliseconds for users to form an opinion about a website, it means that you should have the most important messages in the header. This is why many businesses don&#8217;t wait for their users to scroll down and get to the features of their product\/service, but they&#8217;re using the power of <a href=\"https:\/\/www.threecolts.com\/blog-articles\/putting-together-successful-video-marketing-strategy-2022\">video marketing<\/a> to convey their message better. Also, let&#8217;s not forget that <a href=\"https:\/\/blog.hubspot.com\/marketing\/state-of-video-marketing-new-data\">78% of people watch online videos<\/a> every week, and 55% view online videos every day.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-7163\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/04\/Wistia-video-in-the-header-wesite-section.jpg\" alt=\"Wistia video in the header website section\" width=\"840\" height=\"366\" \/><\/p>\n<p style=\"text-align: center;\"><em>Source: wistia.com<\/em><\/p>\n<ul>\n<li><strong>Call to action (CTA)<\/strong><\/li>\n<\/ul>\n<p>A CTA is a message (usually on a button), <span style=\"background-color: transparent;\">that triggers a certain response from the website visitors.\u00a0<\/span>The Call-to-action should be clearly defined and easy to understand by the website visitors. Naturally, a CTA placed in the header, right where visitors start their journey into the website, increases the chances to get the wanted action from the respective users.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-7164\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/04\/CTA-in-the-website-header.jpg\" alt=\"CTA in the website header\" width=\"840\" height=\"333\" \/><\/p>\n<p style=\"text-align: center;\"><em>Source: <a href=\"https:\/\/www.creatopy.com\/\">creatopy.com<\/a><\/em><\/p>\n<ul>\n<li><strong>Product featuring\u00a0<\/strong><\/li>\n<\/ul>\n<p>In case you run an eCommerce store, you will want to emphasize the quality and convenience of a certain product, and the best way to do it is to include that product in the header. The users\u2019 attention will be driven towards that best deal, and they will be prone to step into the buying process.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-679 size-large\" src=\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/04\/website-header-with-product-1024x300.png\" alt=\"\" width=\"1024\" height=\"300\" \/><\/p>\n<p style=\"text-align: center;\"><em>Source: amazon.com<\/em><\/p>\n<p>In any of the above cases, the general rule of thumb is: keep it simple, keep it clear, make the header engaging! Research shows that \u201c<a href=\"https:\/\/conversionxl.com\/blog\/above-the-fold\/\">the average difference in how users treat info above vs. below the fold is 84%.<\/a>\u201d So, it is best to focus your efforts on reducing those numbers as much as possible. And you\u2019ll do it best if you\u2019ve set yourself some goals as to what you want to transmit.<\/p>\n<p>Large websites, like <a href=\"http:\/\/www.youtube.com\">www.youtube.com<\/a>, limit the space dedicated to the header to only a small amount. This is done on purpose, as the intention is to let the users\u2019 attention be directed to something of more importance, like products, or services, or videos (e.g. YouTube).<br \/>\n<img loading=\"lazy\" class=\"aligncenter wp-image-651 size-full\" src=\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/04\/minimal-header-min.png\" alt=\"\" width=\"1891\" height=\"60\" \/><br \/>\nSometimes you don\u2019t even need a header, or if you do, you need just a small one.<\/p>\n<p>It all depends on the website&#8217;s particularities. Think about it and give your website the personality it needs, no matter what the web design trends are \u201ctelling\u201d you now and then.<\/p>\n<h3><\/h3>\n<h3>What Does Your Website Header Inspire?<\/h3>\n<p>Besides transmitting certain messages, you can also consider instilling certain emotions in the readers. Depending on the purpose you give to the header, it may inspire in the readers one of the following:<\/p>\n<ul>\n<li><strong>Curiosity<\/strong><\/li>\n<\/ul>\n<p>For certain websites, it would be suitable to set up a header that inspires curiosity in the readers. They will want to find out more, they will long for more, they will rush into exploring the rest of the story.<\/p>\n<p>It&#8217;s how I feel about this header from Canva. They make a huge promise right there: &#8220;Design anything&#8221;. And you&#8217;re invited to test this. Can you resist?<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-7167\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/04\/Canva-header-design.jpg\" alt=\"Canva header design\" width=\"850\" height=\"258\" \/><\/p>\n<ul>\n<li><strong>Action<\/strong><\/li>\n<\/ul>\n<p>In some cases, it\u2019s better to stir action directly from the header. With a call-to-action, you can invite users to click on a button, or perform some other interaction with the website, right off the bat. In the case of Planable, their USP is directly connected to the CTA below. also, if you&#8217;re not quite ready to buy, there&#8217;s an option to schedule a demo as well.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-7168\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/04\/Planable-CTAs-in-the-header.jpg\" alt=\"Planable CTAs in the header\" width=\"840\" height=\"459\" \/><\/p>\n<ul>\n<li><strong>Trust<\/strong><\/li>\n<\/ul>\n<p>It might be useful to start by inspiring trust in your visitors. You want them to take some action later on, and for doing that, they have to feel fully confident that they make the right decision.<\/p>\n<p>Let&#8217;s see how Salesforce does it. They state that they are the world&#8217;s largest CRM. Okay, you might say that 99% of the companies out there aren&#8217;t the first in their field. And you&#8217;d be right. But, if you read below, there&#8217;s definitely something that you can use. There&#8217;s a case study that shows how efficient the product is. You can leverage such a case study yourself.<br \/>\n<img loading=\"lazy\" class=\"aligncenter wp-image-7169\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/04\/Salesforce-inspiring-trust-from-the-website-header.jpg\" alt=\"Salesforce inspiring trust from the website header\" width=\"840\" height=\"385\" \/><\/p>\n<ul>\n<li><strong>Pain<\/strong><\/li>\n<\/ul>\n<p>Why on earth would you want to inspire pain in the readers, especially from the header? Well, many companies have their marketing based on the FUD principle (Fear, Uncertainty, Doubt). At an early stage of the conversion process, fear\/pain will trigger the decision to immediately apply a solution and make that pain fade out.<\/p>\n<p>This can be an approach for <a href=\"https:\/\/www.ekransystem.com\/en\/blog\/best-cyber-security-practices\">cybersecurity services<\/a>, physical security services, but also in healthcare or pension funds.<\/p>\n<p>Such an approach can be leveraged in campaigns that want to make people aware that you need to vaccinate against COVID, or to wear a seatbelt.<\/p>\n<ul>\n<li><strong>Laughter<\/strong><\/li>\n<\/ul>\n<p>Maybe you want to emotionally connect with the visitors, from the very beginning. And there\u2019s no better way to do this than make them laugh. And laugh loud. A sense of complicity is being formed and you\u2019ll have your users stand by your side, while they\u2019re exploring the website.<\/p>\n<ul>\n<li><strong>Familiarity<\/strong><\/li>\n<\/ul>\n<p>Connecting the users\u2019 situation with a similar situation presented in the header can create a certain degree of familiarity.<\/p>\n<h2>Types of Headers for Different Types of Websites<\/h2>\n<p>Depending on the website specificities, a header will fit better the overall design than another. Accordingly, you should have a clear idea of what type of header will best suit your own website (be it eCommerce, blog, portfolio, online newspaper, etc.).<\/p>\n<ul>\n<li>\n<h3>CTA-focused header<\/h3>\n<\/li>\n<\/ul>\n<p>In the case of Blue Apron, the website header uses a large video, instead of a large hero image. It transmits a sense of coziness, familiarity, appetite.<\/p>\n<p>Next, we have a CTA that invites the user to take action to benefit from the same cozy and yummy experience.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-7421\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/04\/blue-apron-video-and-cta-in-the-header.jpg\" alt=\"\" width=\"900\" height=\"604\" \/><\/p>\n<p>The CrazyEgg website comes with a header that invites users to take their product for a live demonstration. Their product is just a perfect fit for such real-time demonstrations. And it proves instantly the benefits of the product. Their are also using a visual cue, pointing out to the CTA: the hand of the man in the balloon is directing the eye towards the button.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-7175\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/04\/Crazyegg-CTA-in-the-website-header.jpg\" alt=\"Crazyegg CTA in the website header\" width=\"840\" height=\"383\" \/><\/p>\n<ul>\n<li style=\"text-align: justify;\">\n<h3>Brand-focused header<\/h3>\n<\/li>\n<\/ul>\n<p>This is a beautiful example of a website with a header focusing on brand identity and branding elements. It includes the logo, a replication of the brand logo colors in the upper part, as well as their slogan.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-659 size-full\" src=\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/04\/brand-header-min.png\" alt=\"\" width=\"1894\" height=\"246\" \/><\/p>\n<ul>\n<li style=\"text-align: justify;\">\n<h3>Content-focused header<\/h3>\n<\/li>\n<\/ul>\n<p>This is very suitable for blogs, and magazines, which promote articles and stories.<\/p>\n<p>But, I also found some exceptions.<\/p>\n<p>Patagonia is not promoting their shop on the homepage, but, they push stories that show their commitment to making a change in the world. This current story, featured in the website&#8217;s header, is about slavery and activism.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-7179\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/04\/Patagonia-website-header.jpg\" alt=\"Patagonia website header\" width=\"800\" height=\"362\" \/><\/p>\n<p>In the case of Ikea, the left-hand side of the screen prompts visitors to one of the online stores, while the other half prompts users to read the story of Ikea.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-7137\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2018\/07\/Ikea-grid-design.jpg\" alt=\"Ikea grid design\" width=\"800\" height=\"380\" \/><\/p>\n<ul>\n<li style=\"text-align: justify;\">\n<h3>Video background-focused header<\/h3>\n<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">BUKWILD integrated 3 different videos in the website header. Each of the videos can be played by placing the mouse over the corresponding section. What\u2019s interesting in this is the creative way they use videos as parts of a bigger \u201cpicture\u201d, one that represents their brand.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-7178\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/04\/Bukwild-header-video-focused.jpg\" alt=\"Bukwild header video-focused\" width=\"800\" height=\"396\" \/><\/p>\n<ul>\n<li style=\"text-align: justify;\">\n<h3>Product-focused header<\/h3>\n<\/li>\n<\/ul>\n<p>In the case of Cropp, an online fashion store, the latest collections are being featured in the header.<img loading=\"lazy\" class=\"aligncenter wp-image-7180\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/04\/Cropp-products-shown-in-the-header.jpg\" alt=\"Cropp products shown in the header\" width=\"800\" height=\"402\" \/><\/p>\n<p>Threadless.com puts wall-art in a context and features a CMYK Squad. The header also includes a clear CTA, for all those who feel they belong in a way to that scenario presented in the header by the \u201csquad\u201d.<\/p>\n<ul>\n<li style=\"text-align: justify;\">\n<h3>Personal branding-focused header<\/h3>\n<\/li>\n<\/ul>\n<p>In the case of the travel blog Alex in Wanderland, in the website header, apart from a photo of Alex, users can see the beginning of a story in this header: \u201cFive years and counting on the road\u2026\u201d. This is an invitation for the readers to want to explore more stories.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-667 size-full\" src=\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/04\/personal-branding-header1-min.png\" alt=\"\" width=\"1330\" height=\"926\" \/><\/p>\n<p>To wrap up\u2026<\/p>\n<p>Headers greatly contribute to a website\u2019s success or failure. Technically speaking, this upper part is naturally the first thing on the website that people interact with.<\/p>\n<p>[sibwp_form id=1]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What&#8217;s the first thing a user sees on your website? Exactly, the header. If that&#8217;s not appealing enough, if it doesn&#8217;t bring clarity, your users might just go away, and maybe never come back. We don&#8217;t want that, do we? Website headers are a central part of designing a website. They play a key role&hellip; <br \/> <a class=\"read-more\" href=\"https:\/\/colibriwp.com\/blog\/website-headers\/\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":5230,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[138],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>15+ Beautiful Website Headers and Why They Work So Well<\/title>\n<meta name=\"description\" content=\"Website headers are your website&#039;s business card. They can make or break your website. Need inspiration? We got you covered.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/colibriwp.com\/blog\/website-headers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"15+ Beautiful Website Headers and Why They Work So Well\" \/>\n<meta property=\"og:description\" content=\"Website headers are your website&#039;s business card. They can make or break your website. Need inspiration? We got you covered.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/colibriwp.com\/blog\/website-headers\/\" \/>\n<meta property=\"og:site_name\" content=\"ColibriWP Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-20T15:13:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-30T12:24:39+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/06\/artem-beliaikin-N35J0N8ZglQ-unsplash.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"iulian\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#website\",\"url\":\"https:\/\/colibriwp.com\/blog\/\",\"name\":\"ColibriWP Blog\",\"description\":\"WordPress know-how to boost your design skills\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/colibriwp.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/colibriwp.com\/blog\/website-headers\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/06\/artem-beliaikin-N35J0N8ZglQ-unsplash.jpg\",\"contentUrl\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/06\/artem-beliaikin-N35J0N8ZglQ-unsplash.jpg\",\"width\":6000,\"height\":4000},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/colibriwp.com\/blog\/website-headers\/#webpage\",\"url\":\"https:\/\/colibriwp.com\/blog\/website-headers\/\",\"name\":\"15+ Beautiful Website Headers and Why They Work So Well\",\"isPartOf\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/website-headers\/#primaryimage\"},\"datePublished\":\"2021-04-20T15:13:43+00:00\",\"dateModified\":\"2022-09-30T12:24:39+00:00\",\"author\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/120982e06c8218e6f4a5d83020751c1e\"},\"description\":\"Website headers are your website's business card. They can make or break your website. Need inspiration? We got you covered.\",\"breadcrumb\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/website-headers\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/colibriwp.com\/blog\/website-headers\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/colibriwp.com\/blog\/website-headers\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/colibriwp.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"15+ Beautiful Website Headers and Why They Work So Well (UPDATE 2021)\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/120982e06c8218e6f4a5d83020751c1e\",\"name\":\"iulian\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a1002ce001e8e8537800f38c05d827cf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a1002ce001e8e8537800f38c05d827cf?s=96&d=mm&r=g\",\"caption\":\"iulian\"},\"url\":\"https:\/\/colibriwp.com\/blog\/author\/iulian\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"15+ Beautiful Website Headers and Why They Work So Well","description":"Website headers are your website's business card. They can make or break your website. Need inspiration? We got you covered.","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:\/\/colibriwp.com\/blog\/website-headers\/","og_locale":"en_US","og_type":"article","og_title":"15+ Beautiful Website Headers and Why They Work So Well","og_description":"Website headers are your website's business card. They can make or break your website. Need inspiration? We got you covered.","og_url":"https:\/\/colibriwp.com\/blog\/website-headers\/","og_site_name":"ColibriWP Blog","article_published_time":"2021-04-20T15:13:43+00:00","article_modified_time":"2022-09-30T12:24:39+00:00","twitter_card":"summary_large_image","twitter_image":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/06\/artem-beliaikin-N35J0N8ZglQ-unsplash.jpg","twitter_misc":{"Written by":"iulian","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/colibriwp.com\/blog\/#website","url":"https:\/\/colibriwp.com\/blog\/","name":"ColibriWP Blog","description":"WordPress know-how to boost your design skills","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/colibriwp.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/colibriwp.com\/blog\/website-headers\/#primaryimage","inLanguage":"en-US","url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/06\/artem-beliaikin-N35J0N8ZglQ-unsplash.jpg","contentUrl":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/06\/artem-beliaikin-N35J0N8ZglQ-unsplash.jpg","width":6000,"height":4000},{"@type":"WebPage","@id":"https:\/\/colibriwp.com\/blog\/website-headers\/#webpage","url":"https:\/\/colibriwp.com\/blog\/website-headers\/","name":"15+ Beautiful Website Headers and Why They Work So Well","isPartOf":{"@id":"https:\/\/colibriwp.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/colibriwp.com\/blog\/website-headers\/#primaryimage"},"datePublished":"2021-04-20T15:13:43+00:00","dateModified":"2022-09-30T12:24:39+00:00","author":{"@id":"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/120982e06c8218e6f4a5d83020751c1e"},"description":"Website headers are your website's business card. They can make or break your website. Need inspiration? We got you covered.","breadcrumb":{"@id":"https:\/\/colibriwp.com\/blog\/website-headers\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/colibriwp.com\/blog\/website-headers\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/colibriwp.com\/blog\/website-headers\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/colibriwp.com\/blog\/"},{"@type":"ListItem","position":2,"name":"15+ Beautiful Website Headers and Why They Work So Well (UPDATE 2021)"}]},{"@type":"Person","@id":"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/120982e06c8218e6f4a5d83020751c1e","name":"iulian","image":{"@type":"ImageObject","@id":"https:\/\/colibriwp.com\/blog\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/a1002ce001e8e8537800f38c05d827cf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a1002ce001e8e8537800f38c05d827cf?s=96&d=mm&r=g","caption":"iulian"},"url":"https:\/\/colibriwp.com\/blog\/author\/iulian\/"}]}},"_links":{"self":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/635"}],"collection":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/comments?post=635"}],"version-history":[{"count":21,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/635\/revisions"}],"predecessor-version":[{"id":11335,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/635\/revisions\/11335"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media\/5230"}],"wp:attachment":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media?parent=635"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/categories?post=635"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/tags?post=635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}