{"id":79433,"date":"2021-11-02T13:24:53","date_gmt":"2021-11-02T13:24:53","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=79433"},"modified":"2025-12-02T05:32:28","modified_gmt":"2025-12-02T03:32:28","slug":"elementor-hero-banner","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/elementor-hero-banner\/","title":{"rendered":"How To Get the Hero Banner Right With Elementor"},"content":{"rendered":"\n

Hero banners should be a key part of your home page. Visualizations coupled with enticing content must become the most important 3 seconds of a visitor\u2019s life (excluding when their cat stands up). Banners can contain powerful headlines, awesome imagery, tempting snippets, and a call-to-action, all with the aim of directing the visitor to carry on.<\/p>\n\n\n\n

Or you could skip the banner and not bother with the CTA button. That\u2019s great if you want to risk having the viewer leave your site in 0.001 seconds. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Getting the banner right makes a huge difference in rewarding the visitor for their time. Give them the assurance that they made the right decision to visit. Think of a product\u2019s packaging in a shop; if it conveys what\u2019s irresistibly inside, then you\u2019re more likely to pick it up. Hooking interest is the crux of the banner.<\/p>\n\n\n\n

Landing on the domain, Unicorns.com, only to discover a page filled with molten lava GIFs will inevitably lead to disappointment and loss of trust.<\/p>\n\n\n\n

Experience brings me to 5 awesome tips that form my checklist when creating an effective hero banner. Dare I miss a step \u2014 I think not!<\/p>\n\n\n\n

Tip 1: The Ideal Time To Create the Hero Banner<\/strong><\/h3>\n\n\n\n

Straight after the header has been forged in stone (or an Elementor Template<\/a>), I\u2019ll work on the banner. Spending excessive time on this doesn\u2019t bother me because it helps to define the messaging that\u2019ll be carried onwards throughout the site.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

If the banner informs the viewer that you\u2019re an award-winning architect, then the next section better back it up, rather than showering the page with images that are unrelated to your content. Would you purchase a product again if the contents didn\u2019t resemble the packaging? Of course not. <\/p>\n\n\n\n

The banner allows you to set out the window of what comes next, and it will influence decisions for content and other pages. The hero banner dangled the carrot, and now service is the meal!<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

This banner demonstrated the client\u2019s use of digital technology without appearing complex or conflicting with the headline\u2019s focus on social media marketing. Rather than a tech-heavy image, we opted for a business using mobile equipment to increase relatability.<\/p>\n\n\n\n

Tip 2: Image Sizing and Responsiveness Matters<\/h3>\n\n\n\n

If you care about user experience, then image sizing and responsiveness are crucial. Depending on your image tool of choice, a landscape layout of at least 1920px x 1080px should be the starting point. Go for the best resolution that you can obtain with your brain locked onto the color scheme<\/a> for the site. If the website\u2019s color theme is red, then steer away from blue hinted images unless you\u2019re planning on a high-contrast impact. And please, don\u2019t dodge image compression. Always remember to convert PNG to JPG where required or the eventual WebP format.<\/p>\n\n\n\n

Setting up the image within the banner is wonderful fun when deciding on scroll versus fixed. Who hasn\u2019t spent time playing around with the options? Though, always be mindful that the wording within and the image should complement one another.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The sublime image resonates with the branding and should tantalize visitors enough to want to dig deeper. No matter how big the screen, the chocolate stands its ground behind the headlines and isn\u2019t fighting for attention.<\/p>\n\n\n\n

Just because it works for the desktop, it\u2019s easy to shrug your shoulders when the image on the mobile view loses its effect. Don\u2019t worry; Elementor gives the ability to add an alternate image for the mobile version to save you from creating a separate section on mobile.<\/p>\n\n\n\n

In the mobile mode, click on the section\u2019s background image, and add in an appropriately sized image. My quick tip is to add a copy of the original image and then resize with WordPress\u2019 scaling and cropping to obtain the portrait layout.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The background image for the mobile view is an alternate size of 400px x 700px compared to the desktop image of 1920px x 1080px, allowing better presentation with the headlines. Responsiveness should always include font sizes too, and I recommend using REM instead of Pixels for sizing to make the banner\u2019s contents more accessible. Below is the final result based on the alternate images.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Tip 3: Sliders and Carousels Should Be Seen Below the Fold Rather Than on the Banner<\/h3>\n\n\n\n

[Drumroll] This argument rages on, though I\u2019m a firm believer that the age of sliders, prominent a decade ago, is not recommended for the hero banner. <\/p>\n\n\n\n

[Fights off the onslaught] Hold on, sliders can still be applied elsewhere on the home page, especially below the fold (that\u2019s the bottom of the page before you scroll downwards on your device). Sliders cause loading delays of your page, and even if it\u2019s super-quick to load, the viewer may have to watch many slides to get the full message. You could lose their interest before they hit the barn-storming climax, let alone did you have enough powerful phrases and images to maintain the momentum?<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Did we need three slides to simply state that \u2018We\u2019ll show you how to dance in 3 easy steps’? And imagine the viewer seeing Slide 2 before Slide 1; well, in that case, the order is all messed up.<\/p>\n\n\n\n

We worked on a site where the images were so varied in color and quality that the 12-slides specified drove me crazy. Just because twenty-other sites do it doesn\u2019t mean you need to follow that path. If the evidence is strong, then go ahead, but be mindful of the lag it\u2019ll add to speed. <\/p>\n\n\n\n

I challenge you to check the scores with the slider above the fold and below, and the difference will be stark. The same applies to video backgrounds or animated GIFs where lazy loading has been applied to all images; you\u2019ll see drops in the % score.<\/p>\n\n\n\n

Tip 4: The Importance of Page Speed and the 3-Second Conversion<\/h2>\n\n\n\n

Not optimizing images hurts the loading of the home page leading to a drop in the page speed score, and ultimately if the visitor remains on the site. Home pages with a heavy-duty banner, sliders galore, and several font families increase the likelihood of breaching the 3-second rule. <\/p>\n\n\n\n

Ambiguous commentary impacts on conversion too. When the banner doesn\u2019t fit the reason that led the viewer to your site, then the trust equation is wiped out. Choose your wording carefully. Keep it to the point. Entice their interest to go further.<\/p>\n\n\n\n

Google understands human impatience, hence the rise of the Core Web Vitals. I can\u2019t help but test page scores regularly as I build sections. Optimizing images, ensuring that fonts are preloaded, and not throwing a ton of text may prevent visitors from jumping ship upon arrival. <\/p>\n\n\n\n

Time and again, I\u2019ll see punches in the air because sites are hitting 98+ % for the desktop score, though you want to do all that you can to hit 90+ % for the mobile as 70% of viewers are coming from such devices.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

What happens above the fold will significantly impact the score, and that\u2019s why I advise on sliders\/carousels being deployed below the fold. If the banner\u2019s full headline requires the viewer to scroll down, then you\u2019re asking a lot.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

To round off conversion, the call-to-action button is often confused as simply a \u2018contact me\u2019 or \u2018see more\u2019 link, when in fact it can provide a message to convert the viewer. Rather than stating \u2018see more\u2019, spin it to be a more active invite such as, \u2018Find the best design for you. <\/p>\n\n\n\n

Tip 5: Implement SEO Keywords and craft a powerful headline <\/strong><\/h3>\n\n\n\n

Making the banner\u2019s headlines relevant for search engines and linking to the basis of the website is massively important. Keywords form a major part of SEO. Headlines without keywords are on par with a car without wheels (which is fine if you\u2019ve converted it into a unique garden studio). <\/p>\n\n\n\n

In the vital first 3-seconds, upon arrival at your website, visitors will take note of the headline. Punchy and emotive words that demonstrate a solution or empathize with a problem can hook the viewer. Depending on the domain, or the promise made in the Google snippet, the headline better repay visitors for clicking to reach your site.<\/p>\n\n\n\n

There is a danger with headlines becoming diluted and losing impact when forcing in keywords. Thus watch out for text sounding unnatural in delivery. Say it aloud and revisit if the words are not hitting you. <\/p>\n\n\n\n

A common trick is to add power words coupled with numbers leading to a promise that can only be met if they keep reading on. Single sentences of less than 10 words are stronger than a lengthy paragraph. Great examples are news sites where conversion rates are high.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Although the keyword \u2018architect\u2019 is only present in the sub-header, the headline text of \u2018In 3 affordable stages \u2013 we\u2019ll design your perfect home\u2019 aimed to give an appealing guarantee of what to expect by continuing.<\/p>\n\n\n\n

Try to define what makes you different from the competition. Resist fancy words because no one wants to open a dictionary to understand the context and avoid overused clich\u00e9 slogans. <\/p>\n\n\n\n

The call-to-action of \u2018get the blueprint\u2019 should prompt the viewer to do just that after they\u2019ve been hooked by the words \u2018affordable\u2019 and \u2018perfect home.\u2019 Tug the heartstrings without sounding like an overplayed record.<\/p>\n\n\n\n

Keep Your Hero Section Fresh and Inviting<\/h2>\n\n\n\n

When a hero banner possesses enough imagination and thoughtful wording to stop the viewer from closing the window, then you\u2019re on the right path. Always keep them simple and ensure the message clearly directs further action. And never be afraid of changing them regularly, at least every two months. Otherwise, the repeat visitors will lose the initial pull. Surely as the basis of the website changes, so should the banner.\u00a0<\/p>\n\n\n\n

Want to talk about hero banner design with Imran? Click\u00a0here<\/a>\u00a0to learn more about the various design services that he offers.<\/p>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

Hero banners should be a key part of your home page, says our community expert Imran Siddiq. In his new article, Imran shares 5 awesome tips that form his checklist when creating an effective hero banner.<\/p>\n","protected":false},"author":1135403,"featured_media":79514,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[44,17,32],"tags":[184],"marketing_persona":[47],"marketing_intent":[49],"class_list":["post-79433","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","category-inspiration","category-design","tag-community-experts"],"acf":[],"yoast_head":"\nHow To Get the Hero Banner Right With Elementor<\/title>\n<meta name=\"description\" content=\"Hero banners should be a key part of your home page, says our community expert Imran Siddiq. In his new article, Imran shares 5 awesome tips that form his checklist when creating an effective hero banner.\" \/>\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\/elementor-hero-banner\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Get the Hero Banner Right With Elementor\" \/>\n<meta property=\"og:description\" content=\"Hero banners should be a key part of your home page, says our community expert Imran Siddiq. In his new article, Imran shares 5 awesome tips that form his checklist when creating an effective hero banner.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/elementor-hero-banner\/\" \/>\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-11-02T13:24:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-02T03:32:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/11\/Expert-Corner-Blog.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Imran Siddiq\" \/>\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=\"Imran Siddiq\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/elementor-hero-banner\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/elementor-hero-banner\/\"},\"author\":{\"name\":\"Imran Siddiq\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/36a253e34e12e80df77d0aecf4a33784\"},\"headline\":\"How To Get the Hero Banner Right With Elementor\",\"datePublished\":\"2021-11-02T13:24:53+00:00\",\"dateModified\":\"2025-12-02T03:32:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/elementor-hero-banner\/\"},\"wordCount\":1681,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/elementor-hero-banner\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/11\/Expert-Corner-Blog.png\",\"keywords\":[\"Community Experts\"],\"articleSection\":[\"Elementor\",\"Inspiration\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/elementor-hero-banner\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/elementor-hero-banner\/\",\"url\":\"https:\/\/elementor.com\/blog\/elementor-hero-banner\/\",\"name\":\"How To Get the Hero Banner Right With Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/elementor-hero-banner\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/elementor-hero-banner\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/11\/Expert-Corner-Blog.png\",\"datePublished\":\"2021-11-02T13:24:53+00:00\",\"dateModified\":\"2025-12-02T03:32:28+00:00\",\"description\":\"Hero banners should be a key part of your home page, says our community expert Imran Siddiq. In his new article, Imran shares 5 awesome tips that form his checklist when creating an effective hero banner.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/elementor-hero-banner\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/elementor-hero-banner\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/elementor-hero-banner\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/11\/Expert-Corner-Blog.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/11\/Expert-Corner-Blog.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/elementor-hero-banner\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor\",\"item\":\"https:\/\/elementor.com\/blog\/category\/elementor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How To Get the Hero Banner Right With Elementor\"}]},{\"@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\/36a253e34e12e80df77d0aecf4a33784\",\"name\":\"Imran Siddiq\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/84711c10b0f67a3107790eaddf6965a9da7a66e6bf967c8cf45eb8964568245a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/84711c10b0f67a3107790eaddf6965a9da7a66e6bf967c8cf45eb8964568245a?s=96&d=mm&r=g\",\"caption\":\"Imran Siddiq\"},\"description\":\"Imran is a Web Design and Marketing Expert, as well as a seasoned Elementor expert. He calls himself a geek, a nerd, an adoptive father, a tinkerer, and a promoter of anything that makes him smile.\",\"url\":\"https:\/\/elementor.com\/blog\/author\/user-5f03700aa9b52\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Get the Hero Banner Right With Elementor","description":"Hero banners should be a key part of your home page, says our community expert Imran Siddiq. In his new article, Imran shares 5 awesome tips that form his checklist when creating an effective hero banner.","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\/elementor-hero-banner\/","og_locale":"en_US","og_type":"article","og_title":"How To Get the Hero Banner Right With Elementor","og_description":"Hero banners should be a key part of your home page, says our community expert Imran Siddiq. In his new article, Imran shares 5 awesome tips that form his checklist when creating an effective hero banner.","og_url":"https:\/\/elementor.com\/blog\/elementor-hero-banner\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2021-11-02T13:24:53+00:00","article_modified_time":"2025-12-02T03:32:28+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/11\/Expert-Corner-Blog.png","type":"image\/png"}],"author":"Imran Siddiq","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Imran Siddiq","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/elementor-hero-banner\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/elementor-hero-banner\/"},"author":{"name":"Imran Siddiq","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/36a253e34e12e80df77d0aecf4a33784"},"headline":"How To Get the Hero Banner Right With Elementor","datePublished":"2021-11-02T13:24:53+00:00","dateModified":"2025-12-02T03:32:28+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/elementor-hero-banner\/"},"wordCount":1681,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/elementor-hero-banner\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/11\/Expert-Corner-Blog.png","keywords":["Community Experts"],"articleSection":["Elementor","Inspiration","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/elementor-hero-banner\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/elementor-hero-banner\/","url":"https:\/\/elementor.com\/blog\/elementor-hero-banner\/","name":"How To Get the Hero Banner Right With Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/elementor-hero-banner\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/elementor-hero-banner\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/11\/Expert-Corner-Blog.png","datePublished":"2021-11-02T13:24:53+00:00","dateModified":"2025-12-02T03:32:28+00:00","description":"Hero banners should be a key part of your home page, says our community expert Imran Siddiq. In his new article, Imran shares 5 awesome tips that form his checklist when creating an effective hero banner.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/elementor-hero-banner\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/elementor-hero-banner\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/elementor-hero-banner\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/11\/Expert-Corner-Blog.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/11\/Expert-Corner-Blog.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/elementor-hero-banner\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Elementor","item":"https:\/\/elementor.com\/blog\/category\/elementor\/"},{"@type":"ListItem","position":3,"name":"How To Get the Hero Banner Right With Elementor"}]},{"@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\/36a253e34e12e80df77d0aecf4a33784","name":"Imran Siddiq","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/84711c10b0f67a3107790eaddf6965a9da7a66e6bf967c8cf45eb8964568245a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/84711c10b0f67a3107790eaddf6965a9da7a66e6bf967c8cf45eb8964568245a?s=96&d=mm&r=g","caption":"Imran Siddiq"},"description":"Imran is a Web Design and Marketing Expert, as well as a seasoned Elementor expert. He calls himself a geek, a nerd, an adoptive father, a tinkerer, and a promoter of anything that makes him smile.","url":"https:\/\/elementor.com\/blog\/author\/user-5f03700aa9b52\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/79433","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\/1135403"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=79433"}],"version-history":[{"count":4,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/79433\/revisions"}],"predecessor-version":[{"id":146265,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/79433\/revisions\/146265"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/79514"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=79433"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=79433"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=79433"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=79433"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=79433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}