{"id":95718,"date":"2022-04-14T10:24:50","date_gmt":"2022-04-14T14:24:50","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/?p=95718"},"modified":"2022-07-21T12:40:05","modified_gmt":"2022-07-21T16:40:05","slug":"hero-block","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/hero-block\/","title":{"rendered":"How To Create a Hero Block In WordPress"},"content":{"rendered":"<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/How-to-Create-a-Hero-Block-1024x538.png\" alt=\"Create a hero block in the WordPress block editor\" class=\"wp-image-95724\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/How-to-Create-a-Hero-Block-1024x538.png 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/How-to-Create-a-Hero-Block-300x158.png 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/How-to-Create-a-Hero-Block-768x403.png 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/How-to-Create-a-Hero-Block.png 1200w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>This article is all about creating a hero block, or \u201chero section\u201d, in the WordPress block editor. A hero section of a website is typically a large banner or full-width image with some text on it, meant to entice visitors to stay on a page and consume the information, click a button, or sign up for something. <\/p>\n\n\n\n<p>Hero sections are designed to be large and attention-grabbing. With the right plugins and themes, you can create large hero sections that get attention. There are even specific templates for this type of design. However, if you don\u2019t want to use a plugin, and you\u2019re happy with the theme you have already, you can easily simulate the hero section with your own hero block right in your Gutenberg editor.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"#cover\">Create a Hero Section Using a Cover Block<\/a><\/li><li><a href=\"#image\">Creating Hero Blocks using the Image Block<\/a><\/li><li><a href=\"#image\">Using Themes With Hero Sections<\/a><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cover\">Create a Hero Section Using a Cover Block<\/h2>\n\n\n\n<p>Gutenberg comes with a variety of blocks that can grab the attention of your visitors.  For your hero section, you can try out the cover block. A cover block gives you an image background with text over it. <\/p>\n\n\n\n<p>Hero sections typically feature a large, full-width image. The width of the image in your cover block will conform to the content section of your theme. So it may or may not be full width. However, the cover block can still be used to create an attention-grabbing section of your post or page.<\/p>\n\n\n\n<ol class=\"article_list wp-block-list\"><li><a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/logging-into-wordpress-dashboard\/]\">Log into your WordPress dashboard<\/a><\/li><li>Select a post to edit or create new content<\/li><li>Use the plus sign to create a new block<br><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"332\" class=\"wp-image-95619\" style=\"width: 500px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/wordpress-blocks_010.png\" alt=\"Plus sign to create block in Gutenberg\"><\/li><li>Choose <strong>Cover<\/strong><\/li><li>Select an image for you cover block and fill in some text<\/li><\/ol>\n\n\n\n<p>Notice that the cover block provides a lot of options for customization. For example:<\/p>\n\n\n\n<p>By clicking on the image, you can:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Create a fixed or repeated background<\/li><li>Adjust color overlay<\/li><li>Apply gradient effect<\/li><li>Choose the focal point<\/li><li>Adjust opacity<\/li><li>Provide \u201calt\u201d text<\/li><\/ul>\n\n\n\n<p>For the text:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Adjust font size<\/li><li>Adjust typography, including letter case and spacing<\/li><li>Change text color<\/li><\/ul>\n\n\n\n<p>The hero block below uses a background image with a black and white gradient applied, and gray text with a border:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"967\" height=\"544\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/my-hero2.png\" alt=\"\" class=\"wp-image-95759\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/my-hero2.png 967w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/my-hero2-300x169.png 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/my-hero2-768x432.png 768w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure><\/div>\n\n\n\n<p>The advantage of using a cover block is that you can change the text or image as needed, so you don\u2019t have to create a whole new image for each update.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"image\">Creating Hero Blocks using the Image Block<\/h2>\n\n\n\n<p>A hero block can also simply be a large image that you use in your post. You can use a graphics program to create the image and then place text in the image for your hero block. Using a graphics program may be a hindrance, but if you have one, it can give you limitless options for creating custom graphics for your content. <\/p>\n\n\n\n<p>Graphics programs can range in price up to hundreds of dollars, but you can also find free ones or lower-cost applications that can give you the creative freedom to make what you need for WordPress sites now and in the future. Examples of free graphics programs include\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/www.adobe.com\/express\/\" target=\"_blank\">Adobe Express<\/a>,\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/www.canva.com\/\" target=\"_blank\">Canva<\/a>, and\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/www.gimp.org\/\" target=\"_blank\">Gimp<\/a>.<\/p>\n\n\n\n<p>Images that you can use as a hero block may differ in size depending on the theme that you\u2019re using, or your preference. The following was created (for free) in Adobe Express:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"567\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/07\/adobe-express-interface-1024x567.jpg\" alt=\"\" class=\"wp-image-98923\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/07\/adobe-express-interface-1024x567.jpg 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/07\/adobe-express-interface-300x166.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/07\/adobe-express-interface-768x426.jpg 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/07\/adobe-express-interface.jpg 1440w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p>Adobe Express and Canva can give you thousands of templates and pre-made images that you can customize for your use. They also include options for a premium version that typically requires a monthly subscription. If you wish to avoid all of the advertising, you can opt for free software like Gimp. Its only drawback is its complexity, but it provides a lot of control.<\/p>\n\n\n\n<p>Once you have your image created, it\u2019s a simple matter to add the image block as a hero block in your content:<\/p>\n\n\n\n<ol class=\"article_list wp-block-list\"><li>Edit your content or create a new post.<\/li><li>Select where you\u2019re going to put the hero block in your content, then click on the <strong>+ sign<\/strong> to add a block.<\/li><li>Position the block, if needed, then upload your created image.  Here you can see an example of a hero block added as an image block.<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/07\/insert-image-block-as-hero.jpg\" alt=\"Adding a hero block using an image block\" class=\"wp-image-98925\" width=\"834\" height=\"718\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/07\/insert-image-block-as-hero.jpg 832w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/07\/insert-image-block-as-hero-300x258.jpg 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/07\/insert-image-block-as-hero-768x661.jpg 768w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"themes\">Using Themes With Hero Sections<\/h2>\n\n\n\n<p>As mentioned above, there are a variety of WordPress themes that come with the ability to create full-width hero sections. Below, we will take a look at three of these themes. You can consider using these themes on your site, or take some inspiration from them.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Astra<\/h3>\n\n\n\n<p>The <a href=\"https:\/\/wordpress.org\/themes\/astra\/\">Astra theme<\/a> comes with a free version that allows you to create a full-width layout (within the content area) with a few clicks. This can add more dimension to your hero sections if you are using the cover block method provided above. But if you would like to go further, the pro addon allows you to create a dedicated hero section like the one you see below:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"722\" height=\"376\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/astra_hero2.png\" alt=\"\" class=\"wp-image-95758\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/astra_hero2.png 722w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/astra_hero2-300x156.png 300w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure><\/div>\n\n\n\n<p>Considering that the dedicated header section is only available with a paid upgrade, you will have to decide if the benefit is worth it to you and fits within your budget.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Neve<\/h3>\n\n\n\n<p>For a free alternative to Astra, the <a href=\"https:\/\/wordpress.org\/themes\/neve\/\">Neve theme<\/a> allows you to create full-width hero sections on pages. The page title will be the text over the image, and the featured image will be used as the background for the hero section. It\u2019s important to note that this is built into the theme and is not a Gutenberg block.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"411\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/hero-back-to-school-1024x411.png\" alt=\"\" class=\"wp-image-95760\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/hero-back-to-school-1024x411.png 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/hero-back-to-school-300x121.png 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/hero-back-to-school-768x309.png 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/hero-back-to-school-1536x617.png 1536w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/hero-back-to-school.png 1653w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Crio<\/h3>\n\n\n\n<p>The <a href=\"https:\/\/wordpress.org\/themes\/crio\/\">Crio theme<\/a> also provides a full-width hero section, using the title of the page for the text element and accepting a featured image as the background for the section. This hero section will display under the main header and navigation area of the site.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"313\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/Crio-hero-1024x313.png\" alt=\"\" class=\"wp-image-95764\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/Crio-hero-1024x313.png 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/Crio-hero-300x92.png 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/Crio-hero-768x235.png 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/Crio-hero.png 1183w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator\">\n\n\n\n<p>Whether you decide to use your own hero block or pick a theme that supports a hero section, it\u2019s a great way to grab your reader\u2019s attention and convince them to keep reading. Using power words in your headlines can have an incredible effect on how your readers respond to your content. Pairing these powerful phrases with evocative images will motivate them even more.<\/p>\n\n\n\n<p>Click here to learn more about using <a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/\">Blocks in WordPress<\/a>.<\/p>\n\n\n<p>Looking for more guides? We have over 400 <a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/wordpress-how-to-articles?mktgp=t&amp;utm_source=id$$post_id$$&amp;utm_medium=link&amp;utm_campaign=supportcenter&amp;utm_term=wp-how-to\">WordPress How To Articles<\/a> to help you!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article is all about creating a hero block, or \u201chero section\u201d, in the WordPress block editor. A hero section of a website is typically a large banner or full-width image with some text on it, meant to entice visitors to stay on a page and consume the information, click a button, or sign up<a class=\"moretag\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/hero-block\/\"> Read More ><\/a><\/p>\n","protected":false},"author":17,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4524],"tags":[],"class_list":["post-95718","post","type-post","status-publish","format-standard","hentry","category-blocks"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How To Create a Hero Block In WordPress | InMotion Hosting<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/hero-block\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Create a Hero Block In WordPress | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"This article is all about creating a hero block, or \u201chero section\u201d, in the WordPress block editor. A hero section of a website is typically a large banner or full-width image with some text on it, meant to entice visitors to stay on a page and consume the information, click a button, or sign up Read More &gt;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/hero-block\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-14T14:24:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-21T16:40:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/How-to-Create-a-Hero-Block-1024x538.png\" \/>\n<meta name=\"author\" content=\"Christopher Maiorana\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christopher Maiorana\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/hero-block\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/hero-block\/\"},\"author\":{\"name\":\"Christopher Maiorana\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/c6922c56c84e17079fd558e07b7ef72f\"},\"headline\":\"How To Create a Hero Block In WordPress\",\"datePublished\":\"2022-04-14T14:24:50+00:00\",\"dateModified\":\"2022-07-21T16:40:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/hero-block\/\"},\"wordCount\":1051,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/hero-block\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/How-to-Create-a-Hero-Block-1024x538.png\",\"articleSection\":[\"Blocks\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/hero-block\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/hero-block\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/hero-block\/\",\"name\":\"How To Create a Hero Block In WordPress | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/hero-block\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/hero-block\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/How-to-Create-a-Hero-Block-1024x538.png\",\"datePublished\":\"2022-04-14T14:24:50+00:00\",\"dateModified\":\"2022-07-21T16:40:05+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/hero-block\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/hero-block\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/hero-block\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/How-to-Create-a-Hero-Block.png\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/How-to-Create-a-Hero-Block.png\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/hero-block\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Create a Hero Block In WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support &amp; Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/c6922c56c84e17079fd558e07b7ef72f\",\"name\":\"Christopher Maiorana\",\"description\":\"Christopher Maiorana joined the InMotion community team in 2015 and regularly dispenses tips and tricks in the Support Center, Community Q&A, and the InMotion Hosting Blog.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/chris-m-4623144b\/\"],\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/christopherm\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Create a Hero Block In WordPress | InMotion Hosting","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:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/hero-block\/","og_locale":"en_US","og_type":"article","og_title":"How To Create a Hero Block In WordPress | InMotion Hosting","og_description":"This article is all about creating a hero block, or \u201chero section\u201d, in the WordPress block editor. A hero section of a website is typically a large banner or full-width image with some text on it, meant to entice visitors to stay on a page and consume the information, click a button, or sign up Read More >","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/hero-block\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2022-04-14T14:24:50+00:00","article_modified_time":"2022-07-21T16:40:05+00:00","og_image":[{"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/How-to-Create-a-Hero-Block-1024x538.png","type":"","width":"","height":""}],"author":"Christopher Maiorana","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"Christopher Maiorana","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/hero-block\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/hero-block\/"},"author":{"name":"Christopher Maiorana","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/c6922c56c84e17079fd558e07b7ef72f"},"headline":"How To Create a Hero Block In WordPress","datePublished":"2022-04-14T14:24:50+00:00","dateModified":"2022-07-21T16:40:05+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/hero-block\/"},"wordCount":1051,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/hero-block\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/How-to-Create-a-Hero-Block-1024x538.png","articleSection":["Blocks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/hero-block\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/hero-block\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/hero-block\/","name":"How To Create a Hero Block In WordPress | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/hero-block\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/hero-block\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/How-to-Create-a-Hero-Block-1024x538.png","datePublished":"2022-04-14T14:24:50+00:00","dateModified":"2022-07-21T16:40:05+00:00","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/hero-block\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/hero-block\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/hero-block\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/How-to-Create-a-Hero-Block.png","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/How-to-Create-a-Hero-Block.png","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/hero-block\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"How To Create a Hero Block In WordPress"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support &amp; Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/c6922c56c84e17079fd558e07b7ef72f","name":"Christopher Maiorana","description":"Christopher Maiorana joined the InMotion community team in 2015 and regularly dispenses tips and tricks in the Support Center, Community Q&A, and the InMotion Hosting Blog.","sameAs":["https:\/\/www.linkedin.com\/in\/chris-m-4623144b\/"],"url":"https:\/\/www.inmotionhosting.com\/support\/author\/christopherm\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/95718","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=95718"}],"version-history":[{"count":19,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/95718\/revisions"}],"predecessor-version":[{"id":98932,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/95718\/revisions\/98932"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=95718"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=95718"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=95718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}