{"id":675,"date":"2025-03-13T13:41:59","date_gmt":"2025-03-13T20:41:59","guid":{"rendered":"https:\/\/comm.engineering.asu.edu\/pitchfork\/?p=675"},"modified":"2025-04-16T10:02:23","modified_gmt":"2025-04-16T17:02:23","slug":"9-hero-blocks","status":"publish","type":"post","link":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/9-hero-blocks\/","title":{"rendered":"9. Hero blocks"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"09 Hero Blocks\" width=\"500\" height=\"375\" src=\"https:\/\/www.youtube.com\/embed\/LQOlZKP8ycQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>The <strong>UDS Hero block<\/strong> is a custom block in WordPress that highlights key content with a background image, heading, subtitle, and optional buttons. It is a single block with nested elements, each with its own settings.<\/p>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"edit_preview\" style=\"padding-top:var(--wp--preset--spacing--uds-size-6)\"><span class=\"highlight-gold\">Toggling between Preview and Edit views<\/span><\/h2>\n\n\n\n<p>UDS Hero blocks have two views: Preview and Edit, which allow you to work on the block (Edit) the see how it looks live (Preview). <\/p>\n\n\n\n<p>To switch between <strong>Preview<\/strong> and <strong>Edit<\/strong> views:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click the <strong>Preview<\/strong> button in the Top toolbar to see how the Hero block will appear.<\/li>\n\n\n\n<li>Click back the button to <strong>edit<\/strong> text, buttons, or images.<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"477\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/Preview-view-1024x477.png\" alt=\"A screenshot of WordPress Top toolbar with an arrow pointing to the Preview view and toggle indicating Switch to Edit.\" class=\"wp-image-597\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/Preview-view-1024x477.png 1024w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/Preview-view-300x140.png 300w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/Preview-view-768x358.png 768w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/Preview-view.png 1154w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"415\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/Edit-View-1024x415.png\" alt=\"A screenshot of WordPress Top toolbar with an arrow pointing to the Edit view and toggle indicating Switch to Preview.\" class=\"wp-image-598\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/Edit-View-1024x415.png 1024w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/Edit-View-300x122.png 300w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/Edit-View-768x311.png 768w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/Edit-View.png 1154w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"hero_block_structure\" style=\"padding-top:var(--wp--preset--spacing--uds-size-6)\"><strong><span class=\"highlight-gold\">Understanding the UDS Hero block structure<\/span><\/strong><\/h2>\n\n\n\n<p>The Hero block is one large block containing:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Background Image<\/li>\n\n\n\n<li>Heading<\/li>\n\n\n\n<li>Subtitle (optional)<\/li>\n\n\n\n<li>Supporting text (optional specially-formatted paragraph)<\/li>\n\n\n\n<li>Buttons (optional)<\/li>\n<\/ul>\n\n\n\n<p>Some settings apply to the entire Hero block, while others are found in nested elements.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"487\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/Hero-block-1024x487.png\" alt=\"A screenshot of WordPress Hero block with arrows indicating UDS Subtitle, Your Hero Headline and Buttons.\" class=\"wp-image-591\" style=\"width:574px;height:auto\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/Hero-block-1024x487.png 1024w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/Hero-block-300x143.png 300w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/Hero-block-768x365.png 768w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/Hero-block-1536x731.png 1536w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/Hero-block-2048x974.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"hero_size\" style=\"padding-top:var(--wp--preset--spacing--uds-size-4)\"><span class=\"highlight-gold\">UDS Hero block size<\/span><\/h2>\n\n\n\n<p>There are three size options available in UDS Hero blocks. Each has an optimum background image size associated with it:<\/p>\n\n\n\n<ul class=\"wp-block-list is-style-default\">\n<li><strong>Small<\/strong>: 1920 x 256 px<\/li>\n\n\n\n<li><strong>Medium<\/strong>: 1920 x 512 px<\/li>\n\n\n\n<li><strong>Large<\/strong>: 1920 x 684 px<\/li>\n<\/ul>\n\n\n\n<p>Choose your desired size from the dropdown list in the block settings on the right.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"466\" height=\"1024\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/Hero-size-466x1024.png\" alt=\"A screenshot of WordPress Hero block editor highlighting three Hero sizes. \" class=\"wp-image-592\" style=\"width:226px;height:auto\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/Hero-size-466x1024.png 466w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/Hero-size-137x300.png 137w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/Hero-size.png 624w\" sizes=\"auto, (max-width: 466px) 100vw, 466px\" \/><\/figure>\n<\/div>\n\n\n\n<div id=\"bkgd-image\" class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" style=\"padding-top:var(--wp--preset--spacing--uds-size-6)\"><span class=\"highlight-gold\">Adding a background image<\/span><\/h2>\n\n\n\n<p>Prepare your background image for web use and crop it to the desired hero size if possible. Images that vary from the desired size will work. Regardless of exact size, images will be confined in the hero space from edge to edge horizontally, and will center vertically. <\/p>\n\n\n\n<p>Below the hero size options is an &#8220;Add image&#8221; button. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"538\" height=\"231\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/add_hero_image.png\" alt=\"Screenshot of the UDS Hero &quot;Add image&quot; interface button.\" class=\"wp-image-604\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/add_hero_image.png 538w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/add_hero_image-300x129.png 300w\" sizes=\"auto, (max-width: 538px) 100vw, 538px\" \/><\/figure>\n\n\n\n<p>The media library will open. You can upload or select your image then click &#8220;Select&#8221; in the lower right corner.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"678\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/media_library_hero_image-1024x678.png\" alt=\"Screenshot of a WordPress media library with instructions to 1. Choose your image and 2. Click the Select button.\" class=\"wp-image-602\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/media_library_hero_image-1024x678.png 1024w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/media_library_hero_image-300x199.png 300w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/media_library_hero_image-768x508.png 768w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/media_library_hero_image.png 1059w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>The image will become the background of your hero.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"758\" height=\"603\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/hero_image_selected.png\" alt=\"Screenshot showing a UDS hero image selection.\" class=\"wp-image-603\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/hero_image_selected.png 758w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/hero_image_selected-300x239.png 300w\" sizes=\"auto, (max-width: 758px) 100vw, 758px\" \/><\/figure>\n\n\n\n<p>To see how it looks, you can click the &#8220;Switch to preview&#8221; (eye) button in the block menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"139\" height=\"79\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/switch-to-preview-button-hero.png\" alt=\"Close up screenshot of the Switch to Preview button.\" class=\"wp-image-605\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"hero_heading_subtitle\" style=\"padding-top:var(--wp--preset--spacing--uds-size-6)\"><span class=\"highlight-gold\">Adding and highlighting the heading and subtitle<\/span><\/h2>\n\n\n\n<p>Click the <strong>Heading<\/strong> field and enter text.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"433\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/hero-headline-1024x433.png\" alt=\"A screenshot of WordPress Hero block with arrows indicating Your Hero Headline.\" class=\"wp-image-593\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/hero-headline-1024x433.png 1024w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/hero-headline-300x127.png 300w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/hero-headline-768x325.png 768w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/hero-headline-1536x649.png 1536w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/hero-headline-2048x866.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Click the <strong>Subtitle<\/strong> field and enter text.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"622\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/Set-hero-subtitle-1024x622.png\" alt=\"A screenshot of WordPress Hero block with arrows indicating UDS Subtitle.\" class=\"wp-image-594\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/Set-hero-subtitle-1024x622.png 1024w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/Set-hero-subtitle-300x182.png 300w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/Set-hero-subtitle-768x467.png 768w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/Set-hero-subtitle.png 1405w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-admin\/post.php?post=204&amp;action=edit\" data-type=\"link\" data-id=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-admin\/post.php?post=204&amp;action=edit\">Read our Headings tutorial<\/a> to learn more about highlighting your heading.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"hero_buttons\" style=\"padding-top:var(--wp--preset--spacing--uds-size-6)\"><span class=\"highlight-gold\">Adding Buttons<\/span><\/h2>\n\n\n\n<p>The UDS Hero block supports up to 2 buttons that can be of different colors. You can customize the buttons in the block settings. <\/p>\n\n\n\n<p>Buttons are optional. If they are left blank, they will not display. So no need to delete them.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"412\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/hero-buttons-1024x412.png\" alt=\"A screenshot of WordPressHero block with arrows pointing to the buttons in the block and the right side highlighting styling options for the buttons.\" class=\"wp-image-595\" style=\"width:872px;height:auto\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/hero-buttons-1024x412.png 1024w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/hero-buttons-300x121.png 300w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/hero-buttons-768x309.png 768w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/hero-buttons-1536x618.png 1536w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/hero-buttons-2048x823.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"hero_margin\" style=\"padding-top:var(--wp--preset--spacing--uds-size-6)\"><span class=\"highlight-gold\">Adjusting the bottom margin<\/span><\/h2>\n\n\n\n<p>By default, UDS Hero blocks have a large bottom margin that may create extra space before the next section. This is especially noticeable if the next section uses a UDS Background Section block with a pattern in place.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>To remove the bottom margin:<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Select the <strong>UDS Hero block<\/strong>.<\/li>\n\n\n\n<li>Open the <strong>Styles tab <\/strong>in the right-side settings panel.<\/li>\n\n\n\n<li>Locate the <strong>Bottom Margin<\/strong> setting.<\/li>\n\n\n\n<li>Change the margin to <strong>0<\/strong> to reduce excess spacing.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"412\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/hero-margin-1024x412.png\" alt=\"Screenshot of the styles tab for a UDS Hero block showing the large default bottom margin settings.\" class=\"wp-image-596\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/hero-margin-1024x412.png 1024w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/hero-margin-300x121.png 300w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/hero-margin-768x309.png 768w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/hero-margin-1536x618.png 1536w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/hero-margin-2048x823.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"uds_heroes\" style=\"padding-top:var(--wp--preset--spacing--uds-size-6)\"><span class=\"highlight-gold\">UDS Video heroes<\/span><\/h2>\n\n\n\n<p>You may also put a video in the background of a UDS Hero Block with the UDS Hero &#8211; Video block:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"207\" height=\"129\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/Screenshot-2025-03-06-at-2.27.38\u202fPM.png\" alt=\"Screenshot of three different UDS hero options: standard, Post and Video\" class=\"wp-image-614\" \/><\/figure>\n\n\n\n<p>The only variable is that instead of setting just a background image, you set a background video and image (for when the video does not render for some reason, like on mobile or in low bandwidth situations).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"956\" height=\"175\" src=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/video-hero-options.png\" alt=\"screenshot of the options which must be selected for a UDS Video hero block.\n\" class=\"wp-image-618\" srcset=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/video-hero-options.png 956w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/video-hero-options-300x55.png 300w, https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/video-hero-options-768x141.png 768w\" sizes=\"auto, (max-width: 956px) 100vw, 956px\" \/><\/figure>\n\n\n\n<p>Background videos will need to be uploaded to the media library and cannot stream from a service like YouTube.<\/p>\n\n\n\n<p>Always add a video and related fallback image.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-copy-divider\" \/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"more_information\" style=\"padding-top:var(--wp--preset--spacing--uds-size-6)\"><span class=\"highlight-black\">More information<\/span><\/h2>\n\n\n\n<p><a href=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/docs\/uds-hero\/\">For more information, refer the Hero document<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-copy-divider\" \/>\n\n\n\n<div class=\"wp-block-group is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-b4f274ad wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-layout-constrained wp-container-core-group-is-layout-e11bbbc3 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\"><i class=\"fa-solid fa-left-long\"><\/i> Previous<\/h3>\n\n\n\n<p><a href=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/8-images\/\">8. Images<\/a><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-container-core-group-is-layout-084875ca wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Next <i class=\"fa-solid fa-right-long\"><\/i><\/h3>\n\n\n\n<p><a href=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/10-card-blocks\/\">10. Card blocks<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p class=\"mb-2\">Create and customize a UDS Hero block by adjusting its size and background image, styling text elements and managing buttons.<\/p>\n","protected":false},"author":5,"featured_media":809,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[16],"tags":[],"class_list":["post-675","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>9. Hero blocks - Pitchfork Theme for WordPress<\/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:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/9-hero-blocks\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"9. Hero blocks - Pitchfork Theme for WordPress\" \/>\n<meta property=\"og:description\" content=\"Create and customize a UDS Hero block by adjusting its size and background image, styling text elements and managing buttons.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/9-hero-blocks\/\" \/>\n<meta property=\"og:site_name\" content=\"Pitchfork Theme for WordPress\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-13T20:41:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-16T17:02:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/PF-Tutorial-Feature-Image_9.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Kristin Gasser\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/PF-Tutorial-Feature-Image_9.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kristin Gasser\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/9-hero-blocks\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/9-hero-blocks\\\/\"},\"author\":{\"name\":\"Kristin Gasser\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/#\\\/schema\\\/person\\\/860a71c1e8d59103fbf39181b9dc1626\"},\"headline\":\"9. Hero blocks\",\"datePublished\":\"2025-03-13T20:41:59+00:00\",\"dateModified\":\"2025-04-16T17:02:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/9-hero-blocks\\\/\"},\"wordCount\":555,\"image\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/9-hero-blocks\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/wp-content\\\/uploads\\\/sites\\\/79\\\/2025\\\/03\\\/PF-Tutorial-Feature-Image_9.1.jpg\",\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/9-hero-blocks\\\/\",\"url\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/9-hero-blocks\\\/\",\"name\":\"9. Hero blocks - Pitchfork Theme for WordPress\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/9-hero-blocks\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/9-hero-blocks\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/wp-content\\\/uploads\\\/sites\\\/79\\\/2025\\\/03\\\/PF-Tutorial-Feature-Image_9.1.jpg\",\"datePublished\":\"2025-03-13T20:41:59+00:00\",\"dateModified\":\"2025-04-16T17:02:23+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/#\\\/schema\\\/person\\\/860a71c1e8d59103fbf39181b9dc1626\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/9-hero-blocks\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/9-hero-blocks\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/9-hero-blocks\\\/#primaryimage\",\"url\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/wp-content\\\/uploads\\\/sites\\\/79\\\/2025\\\/03\\\/PF-Tutorial-Feature-Image_9.1.jpg\",\"contentUrl\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/wp-content\\\/uploads\\\/sites\\\/79\\\/2025\\\/03\\\/PF-Tutorial-Feature-Image_9.1.jpg\",\"width\":1920,\"height\":1080,\"caption\":\"Featured image for Pitchfork Tutorial No. 9: Hero blocks.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/2025\\\/03\\\/9-hero-blocks\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"9. Hero blocks\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/#website\",\"url\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/\",\"name\":\"Pitchfork Theme for WordPress\",\"description\":\"an ASU Engineering theme for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/#\\\/schema\\\/person\\\/860a71c1e8d59103fbf39181b9dc1626\",\"name\":\"Kristin Gasser\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8009ed8222bd96e32afa3d1bc47ec2ab359bedcda2d19602667902f6bb0232e2?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8009ed8222bd96e32afa3d1bc47ec2ab359bedcda2d19602667902f6bb0232e2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8009ed8222bd96e32afa3d1bc47ec2ab359bedcda2d19602667902f6bb0232e2?s=96&d=mm&r=g\",\"caption\":\"Kristin Gasser\"},\"url\":\"https:\\\/\\\/comm.engineering.asu.edu\\\/pitchfork\\\/author\\\/bergeson\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"9. Hero blocks - Pitchfork Theme for WordPress","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:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/9-hero-blocks\/","og_locale":"en_US","og_type":"article","og_title":"9. Hero blocks - Pitchfork Theme for WordPress","og_description":"Create and customize a UDS Hero block by adjusting its size and background image, styling text elements and managing buttons.","og_url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/9-hero-blocks\/","og_site_name":"Pitchfork Theme for WordPress","article_published_time":"2025-03-13T20:41:59+00:00","article_modified_time":"2025-04-16T17:02:23+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/PF-Tutorial-Feature-Image_9.jpg","type":"image\/jpeg"}],"author":"Kristin Gasser","twitter_card":"summary_large_image","twitter_image":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/PF-Tutorial-Feature-Image_9.jpg","twitter_misc":{"Written by":"Kristin Gasser","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/9-hero-blocks\/#article","isPartOf":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/9-hero-blocks\/"},"author":{"name":"Kristin Gasser","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/#\/schema\/person\/860a71c1e8d59103fbf39181b9dc1626"},"headline":"9. Hero blocks","datePublished":"2025-03-13T20:41:59+00:00","dateModified":"2025-04-16T17:02:23+00:00","mainEntityOfPage":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/9-hero-blocks\/"},"wordCount":555,"image":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/9-hero-blocks\/#primaryimage"},"thumbnailUrl":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/PF-Tutorial-Feature-Image_9.1.jpg","articleSection":["Tutorials"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/9-hero-blocks\/","url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/9-hero-blocks\/","name":"9. Hero blocks - Pitchfork Theme for WordPress","isPartOf":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/#website"},"primaryImageOfPage":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/9-hero-blocks\/#primaryimage"},"image":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/9-hero-blocks\/#primaryimage"},"thumbnailUrl":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/PF-Tutorial-Feature-Image_9.1.jpg","datePublished":"2025-03-13T20:41:59+00:00","dateModified":"2025-04-16T17:02:23+00:00","author":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/#\/schema\/person\/860a71c1e8d59103fbf39181b9dc1626"},"breadcrumb":{"@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/9-hero-blocks\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/9-hero-blocks\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/9-hero-blocks\/#primaryimage","url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/PF-Tutorial-Feature-Image_9.1.jpg","contentUrl":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/79\/2025\/03\/PF-Tutorial-Feature-Image_9.1.jpg","width":1920,"height":1080,"caption":"Featured image for Pitchfork Tutorial No. 9: Hero blocks."},{"@type":"BreadcrumbList","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/2025\/03\/9-hero-blocks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/comm.engineering.asu.edu\/pitchfork\/"},{"@type":"ListItem","position":2,"name":"9. Hero blocks"}]},{"@type":"WebSite","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/#website","url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/","name":"Pitchfork Theme for WordPress","description":"an ASU Engineering theme for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/comm.engineering.asu.edu\/pitchfork\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/comm.engineering.asu.edu\/pitchfork\/#\/schema\/person\/860a71c1e8d59103fbf39181b9dc1626","name":"Kristin Gasser","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/8009ed8222bd96e32afa3d1bc47ec2ab359bedcda2d19602667902f6bb0232e2?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/8009ed8222bd96e32afa3d1bc47ec2ab359bedcda2d19602667902f6bb0232e2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8009ed8222bd96e32afa3d1bc47ec2ab359bedcda2d19602667902f6bb0232e2?s=96&d=mm&r=g","caption":"Kristin Gasser"},"url":"https:\/\/comm.engineering.asu.edu\/pitchfork\/author\/bergeson\/"}]}},"_links":{"self":[{"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/posts\/675","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/comments?post=675"}],"version-history":[{"count":0,"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/posts\/675\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/media\/809"}],"wp:attachment":[{"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/media?parent=675"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/categories?post=675"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-json\/wp\/v2\/tags?post=675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}