{"id":68820,"date":"2021-06-17T00:28:00","date_gmt":"2021-06-17T00:28:00","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=68820"},"modified":"2021-06-17T00:28:00","modified_gmt":"2021-06-17T00:28:00","slug":"hero-image","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/hero-image\/","title":{"rendered":"How to Design a Hero Image: Best Practices and Examples"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"68820\" class=\"elementor elementor-68820\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a157cb5 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a157cb5\" 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-2402a04\" data-id=\"2402a04\" 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-9a262fe elementor-widget elementor-widget-text-editor\" data-id=\"9a262fe\" 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><b>About the author: Mark Gerkules, Web Designer @ <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/\"   title=\"Elementor\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"1154\">Elementor<\/a><\/b><\/p><p><span style=\"font-weight: 400\">Mark is a Web Designer at Elementor. Apart from his love for UI\/UX, he loves football, traveling around the world, and a good schnitzel.\u00a0<\/span><\/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-f29536e elementor-widget elementor-widget-text-editor\" data-id=\"f29536e\" 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><\/p>\n<p>If you&#8217;ve ever asked yourself \u201cwhat&#8217;s a hero image?\u201d, you&#8217;ve come to the right place. In this post, we delve into the subject of hero images in web design and how you can build and design them to create powerful visual effects.&nbsp;<\/p>\n<p>A hero image is the term used by web creators to describe oversized content at the top of a <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/webpage-website\/\"   title=\"webpage\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"5042\">webpage<\/a> (\u201cabove the fold\u201d content, to be exact). This content falls within the encompassing \u201chero section\u201d: any visual content or text that falls above the fold.<\/p>\n<p>The role of a hero image is to welcome your visitor at their first glimpse of your company or organization. The abundance of hero image-types in the web creation toolbox make it easy to imagine why there are so many reasons to include a hero image in your site. Let&#8217;s understand the top benefits of doing so, and whyHow To Design a Hero Image: Best Practices and Examples these techniques have become major <a href=\"https:\/\/elementor.com\/blog\/web-design-trends\/\" target=\"_blank\" rel=\"noopener\">web design trends<\/a> among web creators.<\/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-3925feb elementor-align-center elementor-widget elementor-widget-button\" data-id=\"3925feb\" data-element_type=\"widget\" data-gac=\"CTA_Elements\" data-gaa=\"Link\" data-gal=\"Position_Text_CTA\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/elementor.com\/blog\/website-layout-ideas\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Decide Which Page Layout Helps Your Hero Image Stand Out<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\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-5e18a71 blog-toc elementor-widget elementor-widget-heading\" data-id=\"5e18a71\" 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\">Table Of Contents<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-93e3f82 blog-toc elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"93e3f82\" 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=\"#what-is-hero-image\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">What Is a Hero Image?<\/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=\"#why-use-hero-image\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Why Should You Use a Hero Image?<\/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=\"#4-types-hero-image\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">The 4 Types of Hero Images<\/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=\"#how-to-test-hero-image\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">How To Test Your Hero Image: Methods We Love<\/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=\"#be-your-websites-hero\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Be Your Website's Hero<\/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\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-11519b1 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"11519b1\" 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-26eea43\" data-id=\"26eea43\" 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-5f14bbb elementor-widget elementor-widget-menu-anchor\" data-id=\"5f14bbb\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"what-is-hero-image\"><\/div>\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-8ede0d7 elementor-widget elementor-widget-heading\" data-id=\"8ede0d7\" 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 Hero Image?\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-edf9a8c elementor-widget elementor-widget-text-editor\" data-id=\"edf9a8c\" 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>Embracing the virtue of \u201ca good first impression\u201d, hero images usually have one or more of the following characteristics:\u00a0<\/p><ul><li>A high-quality photograph<\/li><li>An engaging video\u00a0<\/li><li>An image slider or <a href=\"https:\/\/elementor.com\/help\/media-carousel-widget-pro\/\" target=\"_blank\" rel=\"noopener\">media carousel<\/a><\/li><li>An animated or static illustration<\/li><li>Headings and descriptions next to or in front of the visual content<\/li><\/ul><p>In terms of styling, common design details that you\u2019ll see applied to hero images include:<\/p><ul><li><a href=\"https:\/\/elementor.com\/blog\/website-background-images\/\" target=\"_blank\" rel=\"noopener\">Background images<\/a> or videos with background overlays<\/li><li>Fixed or sticky positioning\u00a0<\/li><li>Hover effects the change the transparency or overlay\u00a0<\/li><li>Elements of contrast that differentiate the image from the header above it or from the content that ensues\u00a0<\/li><\/ul><p>The novelty of hero images in web design is that on the one hand, you&#8217;re working with a very specific, defined space on the web page. On the other hand, the choices of styling, effects, and techniques to use when designing this part of your page content \u2014 are absolutely endless.<\/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-8148d45 elementor-widget elementor-widget-menu-anchor\" data-id=\"8148d45\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"why-use-hero-image\"><\/div>\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-6125dc9 elementor-widget elementor-widget-heading\" data-id=\"6125dc9\" 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\">Why Should You Use a Hero Image?\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-357a7e9 elementor-widget elementor-widget-text-editor\" data-id=\"357a7e9\" 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>When the design and functionality of your hero image hold a high caliber, you automatically attain credibility and user trust. Your hero image and its surrounding hero content often present your first opportunity to relay your organization&#8217;s unique selling point, and the main user touchpoint for conversion. When you&#8217;re looking to trigger certain user behaviors, a powerful top-notch hero image that makes a strong first impression on your visitors is the way to start.<\/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-cbe015e elementor-widget elementor-widget-heading\" data-id=\"cbe015e\" 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\">You Can Make a Lasting First Impression<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1be0da9 elementor-widget elementor-widget-video\" data-id=\"1be0da9\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/06\/hero-image.mp4\" autoplay=\"\" loop=\"\" controls=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\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-83724f4 elementor-widget elementor-widget-text-editor\" data-id=\"83724f4\" 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>First impressions matter in many areas of life, but especially when it comes to how users relate to website aesthetics.\u00a0<\/p><p>Human-Computer Interaction (HCI) and Visualization expert findings at <a href=\"https:\/\/research.google\/pubs\/pub38315\/\">Google Research<\/a> attest to the influence hero images have on a website\u2019s success:\u00a0<\/p><p>This study, \u201cThe role of visual complexity and prototypicality regarding first impression of\u00a0<span>websites: Working towards understanding aesthetic judgments\u201d investigates how visual complexity and prototypicality impact a website\u2019s design and its users&#8217; first impressions.\u00a0<\/span><\/p><p>The authors showed 119 real website screenshots to their study participants, and found that visual complexity and prototypicality affect user aesthetic perception within the first 50ms of exposure, and sometimes even within 17ms.\u00a0<\/p><p>As web creators, our takeaway from these findings is fairly straightforward: the hero image we choose and how we present it on our page influences user sentiment and behavior(s) in a major way.<\/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-15f97be elementor-widget elementor-widget-heading\" data-id=\"15f97be\" 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\">You\u2019ll Make the Most Of Your Above the Fold Content<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e076771 elementor-widget elementor-widget-image\" data-id=\"e076771\" 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<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/the-fold-of-a-webpage-crazyegg-r4q76n1asu3nn2wnfrufyl06pnenwwoj4x42wovvt2.png\" title=\"the-fold-of-a-webpage crazyegg\" alt=\"above the fold web design\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Taken from: crazyegg.com<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\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-05707e2 elementor-widget elementor-widget-text-editor\" data-id=\"05707e2\" 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 webpage\u2019s \u201cabove the fold\u201d section can be defined in simple terms: the content that fills your screen\/appears above the web browser window\u2019s bottom border once your page loads. If the content requires scrolling in order to be seen, it means it&#8217;s located \u201cbelow the fold\u201d.\u00a0<\/p><p>The \u201cabove the fold\u201d concept originates in print design and publishing, long before the days of digital media. We all know what it\u2019s like to immediately notice something on the top half of a front page, and it\u2019s even safe to say that front page content is often what makes us decide whether or not to buy a newspaper, or simply stop at a newsstand.<\/p><p>This is exactly why your above the fold content can be a major deal-breaker in your website success.\u00a0<\/p><p>What do we mean?<\/p><p>If a site visitor is confused by your above the fold content and imagery, he may be quick to exit your site. If your hero image and its surrounding above the fold content are clear, engaging, and well-representative of your value proposition, he&#8217;s more inclined to stay put.\u00a0<\/p><p>Ultimately, the more you invest in your hero image and content, the less likely users are to make a quick exit.<\/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-2241c74 elementor-widget elementor-widget-heading\" data-id=\"2241c74\" 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<h4 class=\"elementor-heading-title elementor-size-default\">Don\u2019t Forget Responsive Design<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6308f88 elementor-widget elementor-widget-text-editor\" data-id=\"6308f88\" 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>Keep in mind that the location of a screen&#8217;s fold is subjective to the device&#8217;s screen size. This is an important consideration in <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/responsive-website\/\"   title=\"responsive\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"7348\">responsive<\/a> design, as above the fold content must be styled and configured in a way that&#8217;s applicable to more than one device size.<\/p><p>Web designers and developers often use\u00a0<a href=\"https:\/\/css-tricks.com\/snippets\/css\/media-queries-for-standard-devices\/\">device-specific breakpoints<\/a>\u00a0to\u00a0guarantee this responsiveness. This gives you complete control over your site design&#8217;s adaptivity to relevant screen sizes, and avoids compromised appearance or impact of your hero image.<\/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-1d5592b elementor-widget elementor-widget-heading\" data-id=\"1d5592b\" 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\">You State Your Value Proposition Without Information Overload\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7f7066e elementor-widget elementor-widget-image\" data-id=\"7f7066e\" 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\/value-proposition-hero-image-r4q76nz4zo4xyovaaa92j2rnb1a14ls9h1rkdyuftu.png\" title=\"value proposition hero image\" alt=\"value proposition in hero image\" 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-6034b9c elementor-widget elementor-widget-text-editor\" data-id=\"6034b9c\" 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>You might be familiar with the concept \u201c<a href=\"https:\/\/www.interaction-design.org\/literature\/topics\/information-overload\">information overload<\/a>\u201d in website design and user experience: we want to prevent using too much content, especially written content, when representing our brand and business value.\u00a0<\/p><p>In this sense, using a picture, illustration, or video is worth 1,000 words. Honing down on\u00a0<a style=\"background-color: #ffffff\" href=\"https:\/\/elementor.com\/blog\/brand-imagery\/\" target=\"_blank\" rel=\"noopener\">effective brand imagery<\/a>\u00a0will\u00a0capture your entire story in one visual medium.\u00a0Instead of verbalizing your brand story and proposition, you may be able to lighten your user&#8217;s cognitive load in a simple, user-friendly way.\u00a0<\/p><p>The screenshot above is taken from <a href=\"https:\/\/www.millbrookconstruction.com.au\/\">Millbrook Construction<\/a>, a Perth-based construction company specializing in \u201cresidential construction with a high-end finish and attention to detail&#8221;. For their Elementor site, the homepage hero image makes perfect use of its \u201cabove the fold\u201d interface. The appealing, crisp photograph of a blissful, modern home and outdoor pool triggers positive, relaxing vibes.\u00a0<\/p><p>Taking this one step further, the styling choices of full-height and \u201cCover\u201d sized background image indicate the company\u2019s robust talent for creating luxurious residential properties. The value proposition is as clear as the pool water, and users comfortably absorb all the information necessary.<\/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-a4faf6b elementor-widget elementor-widget-heading\" data-id=\"a4faf6b\" 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\">Your Hero Images Can Help Convert Leads\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-705e206 elementor-widget elementor-widget-image\" data-id=\"705e206\" 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\/hero-image-lead-conversion-r4q778nl60x92418xj6v1xjsdig3ty2cvw48y1zs0e.png\" title=\"hero image lead conversion\" alt=\"hero image lead conversion\" 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-1beadf1 elementor-widget elementor-widget-text-editor\" data-id=\"1beadf1\" 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>Engaging, visible touch points are a basic ingredient for a conversion-breeding user flow. This is why the relationship between hero section&#8217;s call to action and your hero image itself can make or break your website creation goals.\u00a0<\/p><p>Whether your CTA texts read \u201cSign Up Now\u201d, \u201cLearn More\u201d, \u201cContact Us\u201d, and the like, your hero image must be seamlessly coordinated on all fronts: visibility, messaging, <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/website-color-schemes\/\"   title=\"color scheme\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"5706\">color scheme<\/a>, look and feel, and more.\u00a0<\/p><p>Credible, effective conversations with prospective customers rely on a comfortable, natural atmosphere; visually pleasing imagery is the way to make this happen.<\/p><p>This is exactly what we see on the Elementor site created by <a href=\"https:\/\/caricaturestl.com\/\">Caricature STL<\/a>, a team of caricature artists who provide event entertainment services. The\u00a0<a style=\"background-color: #ffffff\" href=\"https:\/\/elementor.com\/help\/animated-headline-pro\/\" target=\"_blank\" rel=\"noopener\">animated headline<\/a><span>\u00a0<\/span><span>(hero text) accounts for the\u00a0<\/span><span>happy customers in their hero images, showing\u00a0<\/span><span>what the caricature artists provide for each person.<\/span><\/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-f753478 elementor-widget elementor-widget-menu-anchor\" data-id=\"f753478\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"4-types-hero-image\"><\/div>\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-48f7a1c elementor-widget elementor-widget-heading\" data-id=\"48f7a1c\" 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\">The 4 Types of Hero Images\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4844e5c elementor-widget elementor-widget-text-editor\" data-id=\"4844e5c\" 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>So, once you&#8217;ve rolled up your sleeves and start addressing the practicalities, what goes into the decision process of which type of hero image to use?\u00a0<\/p><p>Let\u2019s explore the four different types of hero images and how to evaluate which one will fit your site best.<\/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-d0e52a2 elementor-widget elementor-widget-heading\" data-id=\"d0e52a2\" 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 Product Hero Image\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a88f756 elementor-widget elementor-widget-image\" data-id=\"a88f756\" 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\/product-hero-image-exmaple-r4q6z67gi7vnelr51jn55guctg7orh1aryj7njyfpc.png\" title=\"product hero image exmaple\" alt=\"product hero image\" 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-c01fbde elementor-widget elementor-widget-text-editor\" data-id=\"c01fbde\" 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 product hero image is a large, high-definition image of the brand&#8217;s product. These images can be presented in static or in motion\/in action \u2014 as long as they visualize the product&#8217;s value proposition.\u00a0<\/p><p>Popular ways among web creators to present and style their product hero images can include:<\/p><ul><li>A detailed example\/snapshot of an individual product, as we see above on Australian subscription company\u00a0<a href=\"https:\/\/avolovers.com.au\/\">avo lover&#8217;s<\/a>\u00a0site.\u00a0<\/li><li>A screenshot of a digital product interface, such as a dashboard.<\/li><\/ul><p>Product hero images are commonly found on <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/features\/ecommerce\/\"   title=\"e-commerce\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"5538\">e-commerce<\/a> sites (although not exclusively). Prospective shoppers expect to see real product examples, fostering educated decision-making about the store&#8217;s relevance to their shopping needs.<\/p><p>Avo lover used Elementor to build their e-commerce site, used by their customers to sign up for weekly subscriptions of fresh avocados delivered to their door.\u00a0<\/p><p>Avo lover&#8217;s customer base is a niche market within a narrowly defined area of interest, and so their product hero image choice makes perfect sense. Prospective subscribers are avocado enthusiasts; seeing an up-close, intricate photograph of the produce is exactly what they&#8217;re looking to see.<\/p><p><strong>Best Practices:<\/strong><\/p><ul><li><strong>Invest in the Quality of Background Images<\/strong><\/li><\/ul><p>Whether your <a href=\"https:\/\/elementor.com\/blog\/website-background-images\/\" target=\"_blank\" rel=\"noopener\">background image<\/a> is a photograph, a video, an illustration, etc., the image file should be as lightweight as possible, with crystal-clear resolution.<\/p><ul><li><strong>Pay Attention to Levels of Contrast<\/strong><\/li><\/ul><p>If you&#8217;re adding text in front of your hero image (or a component of any kind) \u2014 make sure the <a href=\"https:\/\/elementor.com\/blog\/contrast-web-design\/\" target=\"_blank\" rel=\"noopener\">contrast between the website elements<\/a> is strong and easily visible. This is where background overlays and <a href=\"https:\/\/elementor.com\/blog\/introducing-filter-blend-mode\/\" target=\"_blank\" rel=\"noopener\">filter effects<\/a> can be extremely helpful.<\/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-2253e57 elementor-widget elementor-widget-heading\" data-id=\"2253e57\" 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 Customer Hero Image<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-de8784a elementor-widget elementor-widget-video\" data-id=\"de8784a\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/elementor.com\/marketing\/wp-content\/uploads\/sites\/9\/2021\/06\/customer-hero-image.mp4\" autoplay=\"\" loop=\"\" controls=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\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-8ff685f elementor-widget elementor-widget-text-editor\" data-id=\"8ff685f\" 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 next type of hero image used by online businesses takes an alternative approach to showing their added value: showing their customer using the product. This perspective is a strategic way to empathize with your online visitors, succinctly demonstrating that you understand their pain point and can satisfy their needs.\u00a0<\/p><p>The video snippet above is taken from the Elementor site created by <a href=\"https:\/\/www.jetzt-losleben.com\/\">Alexander Fischer<\/a>, a Stuggart-based personal trainer who provides an array of health and fitness-related services.<\/p><p>Alexander&#8217;s customer hero image was shows more than just a satisfied client enjoying a healthy, fit lifestyle. The hero image goes the extra mile by presenting a video that presents his client bonding and connecting with loved ones. Clients become up to the task of engaging in youthful activities, since their personal trainer has helped them get back into shape.\u00a0<\/p><p><strong>Best Practices:<\/strong><\/p><ul><li><strong>Convey Your Use-Cases &amp; Customer Experience<\/strong><\/li><\/ul><p>Differentiate your product by showing its most dominant use-case. An image that conveys your business goals and value demonstrates how the visitor will benefit from your one-of-a-kind offering.<\/p><ul><li><strong>Relate To Your Target Audience<\/strong><\/li><\/ul><p>Make sure your target audience is accounted for when you select the type of person to feature in your image. Choose an image that communicates your understanding of the field and ability to delight your clients.<\/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-90a9d78 elementor-widget elementor-widget-heading\" data-id=\"90a9d78\" 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 Founder Hero Image\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-76e64f3 elementor-widget elementor-widget-image\" data-id=\"76e64f3\" 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\/founder-hero-image-r4q6y3o2q0ew6lb4akzft8kggnhmzvsaynsaz7jl26.png\" title=\"founder hero image\" alt=\"founder hero image\" 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-d7421b4 elementor-widget elementor-widget-text-editor\" data-id=\"d7421b4\" 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 founder hero image is a large image of the founder of the business owner, placed in the hero section to greet the site visitor upon arrival.\u00a0<\/p><p>Founder hero images are often used in independent portfolio websites, individual business owners like a psychologist, makeup artists, or musicians, as shown in Jasmine Cain&#8217;s <a href=\"https:\/\/www.jasminecain.com\/\">Elementor website<\/a> above.\u00a0<\/p><p>A founder hero image&#8217;s greatest virtue is that it puts a face to a name; it connects the website visitor to the service provider, creating a personable dynamic between the two individuals.\u00a0<\/p><p>Choosing the footage for your founder hero image should be handled with care. With many options to choose from, what it comes down to is: what will convey your brand message in the strongest possible way? Is it a picture of the founder looking directly at the camera and smiling, or perhaps looking in a different direction? Or, would a candid photograph of the business owner hard at work be a better fit?<\/p><p><strong>Best Practices:<\/strong><\/p><ul><li><strong>Pay Attention To Sizing &amp; Dimensions<\/strong><\/li><\/ul><p>Use a clear, correctly-sized image (or video) that shows visitors the exact details they need to see. If necessary, you can focus on more important areas in your images by cropping them and removing less important content.<\/p><ul><li><strong>Focus On What Your Image Should Convey<\/strong><\/li><\/ul><p>The role of the background should be to emphasize the person in front of it, not the other way around. The most impactful founder hero images will show the business owner smiling, implying his passion for customer happiness.<\/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-baad665 elementor-widget elementor-widget-heading\" data-id=\"baad665\" 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 Non-Contextual Hero Image\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-89704af elementor-widget elementor-widget-image\" data-id=\"89704af\" 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\/non-contextual-hero-image-r4q78d2nbwgkxcejdintj5clx2ww0xitdg64kybuku.png\" title=\"non-contextual hero image\" alt=\"non contextual hero image\" 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-95a447f elementor-widget elementor-widget-text-editor\" data-id=\"95a447f\" 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>Non-contextual hero images are, as the name suggests, footage that displays something seemingly \u201cunrelated\u201d to the product or business owner. The goal of a non-contextual hero image is to make an impression on the visitor through visual association or subliminal messaging. Seeing the non-contextual image shows the user what the product or brand is about, but in an indirect way.\u00a0<\/p><p>This technique is used, for example, in the sample above from the Elementor site built by Oklahoma-based digital marketing firm <a href=\"https:\/\/aptechokc.com\/\">AP Technology<\/a>. The firm\u2019s website uses a wide and clear background image that shows a unique angle of Oklahoma City skyscrapers. This photograph depicts the business&#8217;s value proposition, as stated in the site\u2019s hero text: build your business and watch it grow, as tall as the city\u2019s highest office towers.\u00a0<\/p><p>As soon as the human eye sees the physical structures towering over the sky, it understands that these marketing professionals work to lift businesses off the ground, as far as sky-high.\u00a0<\/p><p><strong>Best Practices:<\/strong><\/p><ul><li><strong>Make Sure Visitors Understand Why the Image Is Relevant<\/strong><\/li><\/ul><p>Although you\u2019re not displaying a direct visual of your product itself, make sure your product value&#8217;s connection with your non-contextual hero image is still easy to identify. Users shouldn\u2019t need to spend time thinking about its relevance.<\/p><ul><li><strong>Draw a Clear Connection Between Hero Image and Hero Text<\/strong><\/li><\/ul><p>The hero text you place in conjunction with your image must be directly related to its visual content. This is a necessity, even if it requires multiple iterations of your text and choice of wording.\u00a0<\/p><ul><li><strong>Create a Cohesive Design Scheme<\/strong><\/li><\/ul><p>The colors you choose for <a href=\"https:\/\/elementor.com\/help\/button-widget\/\" target=\"_blank\" rel=\"noopener\">button texts and backgrounds<\/a>, headings, or descriptions should be coordinated with the hero image or illustration. This also applies to your site&#8217;s clickable accents: the nav menu items, the logo, etc.<\/p><p>We all know how important a consistent visual language is to our website prestige, brand presence, and professional credibility. This is where <a href=\"https:\/\/elementor.com\/blog\/web-design-style-guide\/\" target=\"_blank\" rel=\"noopener\">design style guides<\/a> can be really helpful, especially to ensure that your hero images are aligned with your website design.\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-25d5278 elementor-widget elementor-widget-menu-anchor\" data-id=\"25d5278\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"how-to-test-hero-image\"><\/div>\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-05bc4d0 elementor-widget elementor-widget-heading\" data-id=\"05bc4d0\" 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 Test Your Hero Image: Methods We Love<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-02a200f elementor-widget elementor-widget-text-editor\" data-id=\"02a200f\" 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>Once you start testing multiple options for your hero image, you can immediately gauge which option drives more engagement and derive insights into which design is more effective \u2014 and ultimately stick to that one.<\/p>\n<p>Here are some go-to testing methods that are easy to set up, and provide a wealth of knowledge for making sure you\u2019re using the best hero image possible.<\/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-ce52a19 elementor-widget elementor-widget-heading\" data-id=\"ce52a19\" 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\">A\/B Test Your Hero Image \n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9f678ca elementor-widget elementor-widget-text-editor\" data-id=\"9f678ca\" 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\/B testing requires the designer to create two or more options for the hero section (be it two versions of the headings and their copy, the hero image itself, the section\u2019s layout, the font sizing, or anything else you can think of) \u2014 it\u2019s completely up to you.\u00a0<\/p><p>Imagine that you\u2019ve decided to use a <a href=\"https:\/\/elementor.com\/help\/blend-mode-and-css-filters\/\" target=\"_blank\" rel=\"noopener\">blend mode<\/a> for when users hover over your hero image, but you&#8217;re not sure which mode will enhance the user experience most.\u00a0<\/p><p>Performing an <a href=\"https:\/\/elementor.com\/blog\/a-b-testing\/\" target=\"_blank\" rel=\"noopener\">A\/B test<\/a> between two different mode options (there are 13 blend mode options, after all), lets you try out more than one mode to see which one generates more hovering, clicking, and ultimately more engagement.\u00a0<\/p><p>One of the most common and important steps in A\/B testing your hero section is to also test at least two CTA button options \u2014 to identify which button breeds the most conversions.\u00a0<span>\u00a0<\/span><\/p><p>More specifically, testing the color of a CTA button is always a helpful experiment that lets you understand which button color attracts and engages users the most. Button color A\/B tests are widely popular among web creators, as they&#8217;re quick and easy to perform and barely require any additional design resources.<\/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-ebf2f7a elementor-widget elementor-widget-heading\" data-id=\"ebf2f7a\" 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\">Use Heatmap Tools To Discover User Behavior<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-27fba65 elementor-widget elementor-widget-text-editor\" data-id=\"27fba65\" 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>Heatmap tools identify and analyze where users click on a webpage. These tools allow website and <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/features\/landing-page-builder\/\"   title=\"landing page\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"2487\">landing page<\/a> owners to see exactly how users are actively navigating the content. This is accomplished once the tool identifies whether or not users engage with the main elements (and how so), such as links, buttons, opt-ins, and of course, CTAs.\u00a0<\/p><p>Some insights that website owners can derive from using heatmap tools include:\u00a0<\/p><ul><li>Non-clickable elements are distracting users.<\/li><li>Button sizes are too big or too small.<\/li><li>Button colors aren&#8217;t visible.<\/li><\/ul>\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-a7f5000 elementor-widget elementor-widget-menu-anchor\" data-id=\"a7f5000\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"be-your-websites-hero\"><\/div>\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-5adb632 elementor-widget elementor-widget-heading\" data-id=\"5adb632\" 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\">Be Your Website\u2019s Hero<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c20ec77 elementor-widget elementor-widget-text-editor\" data-id=\"c20ec77\" 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>Designing your hero section and its hero image is one of the most crucial and influential decisions in your web design process. Web creators often relate to a website\u2019s hero section as the \u201copening act\u201d of your website presentation, essentially your welcome gesture.\u00a0<\/p><p>Website trends constantly evolve, adding new features to web creation possibilities. It\u2019s always important to keep your hero section at the forefront of your design considerations \u2014 making sure it always reaches its potential in introducing your website to the crowds.\u00a0<\/p><p>We\u2019re always looking for <a href=\"https:\/\/elementor.com\/blog\/web-design-inspiration\/\">inspiration<\/a> and ideas for powerful hero images and how to create them in a unique way.\u00a0<\/p><p>Show us your examples in the comments!<\/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>Hero images are what web creators often use to welcome visitors to their site content in an engaging, attractive format. This is where we explore hero image design best practices and beautiful examples of how to do it right.<\/p>\n","protected":false},"author":370665,"featured_media":68822,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[32],"tags":[79],"marketing_persona":[47],"marketing_intent":[48],"class_list":["post-68820","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-build"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Design a Hero Image: Best Practices and Examples<\/title>\n<meta name=\"description\" content=\"Web creators use hero images to welcome users to their webpage in an engaging way. Master hero image design best practices, inspired by beautiful examples.\" \/>\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\/hero-image\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Design a Hero Image: Best Practices &amp; Examples\" \/>\n<meta property=\"og:description\" content=\"Web creators use hero images to welcome users to their webpage in an engaging way. Learn hero image design best practices, including beautiful examples.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/hero-image\/\" \/>\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=\"2021-06-17T00:28:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2021\/06\/24.05.2021_HOW-TO-DESIGN-A-HERO-IMAGE_BLOG-01.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1201\" \/>\n\t<meta property=\"og:image:height\" content=\"629\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Mark Gerkules\" \/>\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=\"Mark Gerkules\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/hero-image\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/hero-image\/\"},\"author\":{\"name\":\"Mark Gerkules\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/0ae11238cf58e3c00802db1c1606e2c5\"},\"headline\":\"How to Design a Hero Image: Best Practices and Examples\",\"datePublished\":\"2021-06-17T00:28:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/hero-image\/\"},\"wordCount\":2959,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/hero-image\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/06\/24.05.2021_HOW-TO-DESIGN-A-HERO-IMAGE_BLOG-02.png\",\"keywords\":[\"Build\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/hero-image\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/hero-image\/\",\"url\":\"https:\/\/elementor.com\/blog\/hero-image\/\",\"name\":\"How to Design a Hero Image: Best Practices and Examples\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/hero-image\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/hero-image\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/06\/24.05.2021_HOW-TO-DESIGN-A-HERO-IMAGE_BLOG-02.png\",\"datePublished\":\"2021-06-17T00:28:00+00:00\",\"description\":\"Web creators use hero images to welcome users to their webpage in an engaging way. Master hero image design best practices, inspired by beautiful examples.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/hero-image\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/hero-image\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/hero-image\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/06\/24.05.2021_HOW-TO-DESIGN-A-HERO-IMAGE_BLOG-02.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/06\/24.05.2021_HOW-TO-DESIGN-A-HERO-IMAGE_BLOG-02.png\",\"width\":1201,\"height\":629,\"caption\":\"how to design a hero image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/hero-image\/#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 Design a Hero Image: Best Practices and Examples\"}]},{\"@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\/0ae11238cf58e3c00802db1c1606e2c5\",\"name\":\"Mark Gerkules\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ef084535520a902a2d2f1da4dc3498448604b996ea4a10c6ec2238865dd737db?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ef084535520a902a2d2f1da4dc3498448604b996ea4a10c6ec2238865dd737db?s=96&d=mm&r=g\",\"caption\":\"Mark Gerkules\"},\"description\":\"Mark is a Web Designer at Elementor. Apart from his love for UI\/UX, he loves football, traveling around the world, and a good schnitzel.\",\"url\":\"https:\/\/elementor.com\/blog\/author\/user-5e1adb7e6ea5a\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Design a Hero Image: Best Practices and Examples","description":"Web creators use hero images to welcome users to their webpage in an engaging way. Master hero image design best practices, inspired by beautiful examples.","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\/hero-image\/","og_locale":"en_US","og_type":"article","og_title":"How to Design a Hero Image: Best Practices & Examples","og_description":"Web creators use hero images to welcome users to their webpage in an engaging way. Learn hero image design best practices, including beautiful examples.","og_url":"https:\/\/elementor.com\/blog\/hero-image\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2021-06-17T00:28:00+00:00","og_image":[{"width":1201,"height":629,"url":"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2021\/06\/24.05.2021_HOW-TO-DESIGN-A-HERO-IMAGE_BLOG-01.png","type":"image\/png"}],"author":"Mark Gerkules","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Mark Gerkules"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/hero-image\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/hero-image\/"},"author":{"name":"Mark Gerkules","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/0ae11238cf58e3c00802db1c1606e2c5"},"headline":"How to Design a Hero Image: Best Practices and Examples","datePublished":"2021-06-17T00:28:00+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/hero-image\/"},"wordCount":2959,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/hero-image\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/06\/24.05.2021_HOW-TO-DESIGN-A-HERO-IMAGE_BLOG-02.png","keywords":["Build"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/hero-image\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/hero-image\/","url":"https:\/\/elementor.com\/blog\/hero-image\/","name":"How to Design a Hero Image: Best Practices and Examples","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/hero-image\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/hero-image\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/06\/24.05.2021_HOW-TO-DESIGN-A-HERO-IMAGE_BLOG-02.png","datePublished":"2021-06-17T00:28:00+00:00","description":"Web creators use hero images to welcome users to their webpage in an engaging way. Master hero image design best practices, inspired by beautiful examples.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/hero-image\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/hero-image\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/hero-image\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/06\/24.05.2021_HOW-TO-DESIGN-A-HERO-IMAGE_BLOG-02.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/06\/24.05.2021_HOW-TO-DESIGN-A-HERO-IMAGE_BLOG-02.png","width":1201,"height":629,"caption":"how to design a hero image"},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/hero-image\/#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 Design a Hero Image: Best Practices and Examples"}]},{"@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\/0ae11238cf58e3c00802db1c1606e2c5","name":"Mark Gerkules","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ef084535520a902a2d2f1da4dc3498448604b996ea4a10c6ec2238865dd737db?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ef084535520a902a2d2f1da4dc3498448604b996ea4a10c6ec2238865dd737db?s=96&d=mm&r=g","caption":"Mark Gerkules"},"description":"Mark is a Web Designer at Elementor. Apart from his love for UI\/UX, he loves football, traveling around the world, and a good schnitzel.","url":"https:\/\/elementor.com\/blog\/author\/user-5e1adb7e6ea5a\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/68820","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\/370665"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=68820"}],"version-history":[{"count":6,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/68820\/revisions"}],"predecessor-version":[{"id":93929,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/68820\/revisions\/93929"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/68822"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=68820"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=68820"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=68820"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=68820"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=68820"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}