{"id":23598,"date":"2025-11-13T04:23:32","date_gmt":"2025-11-13T04:23:32","guid":{"rendered":"https:\/\/ourdemy.dev\/?p=23598"},"modified":"2025-11-20T08:53:31","modified_gmt":"2025-11-20T08:53:31","slug":"how-do-i-set-up-a-hero-section-with-background-image-or-video-and-add-a-call-to-action-button","status":"publish","type":"post","link":"https:\/\/ourdemy.com\/en\/how-do-i-set-up-a-hero-section-with-background-image-or-video-and-add-a-call-to-action-button\/","title":{"rendered":"How do I set up a Hero section with background image or video, and add a call-to-action button?"},"content":{"rendered":"\n
\n
\n
\n
\n
\n \n 1\n <\/span>\n <\/div>\n
\n
Drag Hero1<\/span> onto your page. This creates the main container for the Hero section, usually at the very top so it\u2019s the first thing visitors notice.<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n
\n
\n \"Screenshot\n <\/div>\n <\/div>\n \n <\/div>\n <\/div>\n \n
\n
\n
\n
\n
\n \n 2\n <\/span>\n <\/div>\n
\n
In the settings panel, click Select Image<\/span> to add a background. You can upload a new picture from your computer or pick one from the library. Choose something clear and high-quality that fits your design.<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n
\n
\n \"Screenshot\n <\/div>\n <\/div>\n \n <\/div>\n <\/div>\n \n
\n
\n
\n
\n
\n \n 3\n <\/span>\n <\/div>\n
\n
Type your welcome text into the Title<\/span> field. \nUse the Title Highlight<\/span> option if you want to make certain words stand out.\nAdd extra details in the Description<\/span> field, and check the preview to see if the text looks good and easy to read.<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n
\n
\n \"Screenshot\n <\/div>\n <\/div>\n \n <\/div>\n <\/div>\n \n
\n
\n
\n
\n
\n \n 4\n <\/span>\n <\/div>\n
\n
You also can set a Background Color<\/span>. Pick a preset color or open the color box and use the sliders to adjust brightness, hue, and saturation until it looks right.<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n
\n
\n \"Screenshot\n <\/div>\n <\/div>\n \n <\/div>\n <\/div>\n \n
\n
\n
\n
\n
\n \n 5\n <\/span>\n <\/div>\n
\n
Change the Padding<\/span> values (top, bottom, left, right) to add space inside the Hero. This makes sure the text and other elements don\u2019t stick too close to the edges. Watch the live preview to see how your changes look.<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n
\n
\n \"Screenshot\n <\/div>\n <\/div>\n \n <\/div>\n <\/div>\n \n
\n
\n
\n
\n
\n \n 6\n <\/span>\n <\/div>\n
\n
Turn on Dark Mode<\/span> if you want the Hero to have a separate style for dark backgrounds. This keeps everything readable and balanced in both light and dark themes.<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n
\n
\n \"Screenshot\n <\/div>\n <\/div>\n \n <\/div>\n <\/div>\n \n
\n
\n
\n
\n
\n \n 7\n <\/span>\n <\/div>\n
\n
Add interactive elements inside the Hero. For example, drag in a Button<\/span>, write the label (like Get Started or Learn More), and link it to another part of your site. This makes your Hero section not just welcoming, but also useful. We also provide a guide on how to set up a button that you can refer to when implementing this.<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n
\n
\n \"Screenshot\n <\/div>\n <\/div>\n \n <\/div>\n <\/div>\n\n\n","protected":false},"excerpt":{"rendered":"

1 Drag Hero1 onto your page. This creates the main container for the Hero section, usually at the very top so it\u2019s the first thing visitors notice. 2 In the settings panel, click Select Image to add a background. You can upload a new picture from your computer or pick one from the library. Choose […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[40,34],"tags":[],"class_list":["post-23598","post","type-post","status-publish","format-standard","hentry","category-customize-your-site","category-help-center"],"yoast_head":"\nHow do I set up a Hero section with background image or video, and add a call-to-action button? - Ourdemy<\/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:\/\/ourdemy.com\/en\/how-do-i-set-up-a-hero-section-with-background-image-or-video-and-add-a-call-to-action-button\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How do I set up a Hero section with background image or video, and add a call-to-action button? - Ourdemy\" \/>\n<meta property=\"og:description\" content=\"1 Drag Hero1 onto your page. This creates the main container for the Hero section, usually at the very top so it\u2019s the first thing visitors notice. 2 In the settings panel, click Select Image to add a background. You can upload a new picture from your computer or pick one from the library. Choose […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ourdemy.com\/en\/how-do-i-set-up-a-hero-section-with-background-image-or-video-and-add-a-call-to-action-button\/\" \/>\n<meta property=\"og:site_name\" content=\"Ourdemy\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-13T04:23:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-20T08:53:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-8d3ef1bb55bf5db7-1763628602.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"1440\" \/>\n\t<meta property=\"og:image:height\" content=\"838\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/ourdemy.com\\\/how-do-i-set-up-a-hero-section-with-background-image-or-video-and-add-a-call-to-action-button\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ourdemy.com\\\/how-do-i-set-up-a-hero-section-with-background-image-or-video-and-add-a-call-to-action-button\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/ourdemy.com\\\/#\\\/schema\\\/person\\\/e7a7e53bb8a94cce8f134c3718702e42\"},\"headline\":\"How do I set up a Hero section with background image or video, and add a call-to-action button?\",\"datePublished\":\"2025-11-13T04:23:32+00:00\",\"dateModified\":\"2025-11-20T08:53:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ourdemy.com\\\/how-do-i-set-up-a-hero-section-with-background-image-or-video-and-add-a-call-to-action-button\\\/\"},\"wordCount\":308,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/ourdemy.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/ourdemy.com\\\/how-do-i-set-up-a-hero-section-with-background-image-or-video-and-add-a-call-to-action-button\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ourdemy.com\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/remote-img-8d3ef1bb55bf5db7-1763628602.gif\",\"articleSection\":[\"Customize Your Site\",\"Help Center\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/ourdemy.com\\\/how-do-i-set-up-a-hero-section-with-background-image-or-video-and-add-a-call-to-action-button\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ourdemy.com\\\/how-do-i-set-up-a-hero-section-with-background-image-or-video-and-add-a-call-to-action-button\\\/\",\"url\":\"https:\\\/\\\/ourdemy.com\\\/how-do-i-set-up-a-hero-section-with-background-image-or-video-and-add-a-call-to-action-button\\\/\",\"name\":\"How do I set up a Hero section with background image or video, and add a call-to-action button? - Ourdemy\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ourdemy.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ourdemy.com\\\/how-do-i-set-up-a-hero-section-with-background-image-or-video-and-add-a-call-to-action-button\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ourdemy.com\\\/how-do-i-set-up-a-hero-section-with-background-image-or-video-and-add-a-call-to-action-button\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ourdemy.com\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/remote-img-8d3ef1bb55bf5db7-1763628602.gif\",\"datePublished\":\"2025-11-13T04:23:32+00:00\",\"dateModified\":\"2025-11-20T08:53:31+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ourdemy.com\\\/how-do-i-set-up-a-hero-section-with-background-image-or-video-and-add-a-call-to-action-button\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ourdemy.com\\\/how-do-i-set-up-a-hero-section-with-background-image-or-video-and-add-a-call-to-action-button\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ourdemy.com\\\/how-do-i-set-up-a-hero-section-with-background-image-or-video-and-add-a-call-to-action-button\\\/#primaryimage\",\"url\":\"https:\\\/\\\/ourdemy.com\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/remote-img-8d3ef1bb55bf5db7-1763628602.gif\",\"contentUrl\":\"https:\\\/\\\/ourdemy.com\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/remote-img-8d3ef1bb55bf5db7-1763628602.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ourdemy.com\\\/how-do-i-set-up-a-hero-section-with-background-image-or-video-and-add-a-call-to-action-button\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/ourdemy.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How do I set up a Hero section with background image or video, and add a call-to-action button?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ourdemy.com\\\/#website\",\"url\":\"https:\\\/\\\/ourdemy.com\\\/\",\"name\":\"Ourdemy\",\"description\":\"Make your own online academy\",\"publisher\":{\"@id\":\"https:\\\/\\\/ourdemy.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ourdemy.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/ourdemy.com\\\/#organization\",\"name\":\"Ourdemy\",\"url\":\"https:\\\/\\\/ourdemy.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ourdemy.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/ourdemy.com\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/ouracademy-02.svg\",\"contentUrl\":\"https:\\\/\\\/ourdemy.com\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/ouracademy-02.svg\",\"width\":3163,\"height\":884,\"caption\":\"Ourdemy\"},\"image\":{\"@id\":\"https:\\\/\\\/ourdemy.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/ourdemy.com\\\/#\\\/schema\\\/person\\\/e7a7e53bb8a94cce8f134c3718702e42\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/042968b872d529b85b5b0faae638766460238b6758e95a7094fdb8c7c37635db?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/042968b872d529b85b5b0faae638766460238b6758e95a7094fdb8c7c37635db?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/042968b872d529b85b5b0faae638766460238b6758e95a7094fdb8c7c37635db?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\\\/\\\/ourdemy.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How do I set up a Hero section with background image or video, and add a call-to-action button? - Ourdemy","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:\/\/ourdemy.com\/en\/how-do-i-set-up-a-hero-section-with-background-image-or-video-and-add-a-call-to-action-button\/","og_locale":"en_US","og_type":"article","og_title":"How do I set up a Hero section with background image or video, and add a call-to-action button? - Ourdemy","og_description":"1 Drag Hero1 onto your page. This creates the main container for the Hero section, usually at the very top so it\u2019s the first thing visitors notice. 2 In the settings panel, click Select Image to add a background. You can upload a new picture from your computer or pick one from the library. Choose […]","og_url":"https:\/\/ourdemy.com\/en\/how-do-i-set-up-a-hero-section-with-background-image-or-video-and-add-a-call-to-action-button\/","og_site_name":"Ourdemy","article_published_time":"2025-11-13T04:23:32+00:00","article_modified_time":"2025-11-20T08:53:31+00:00","og_image":[{"width":1440,"height":838,"url":"https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-8d3ef1bb55bf5db7-1763628602.gif","type":"image\/gif"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ourdemy.com\/how-do-i-set-up-a-hero-section-with-background-image-or-video-and-add-a-call-to-action-button\/#article","isPartOf":{"@id":"https:\/\/ourdemy.com\/how-do-i-set-up-a-hero-section-with-background-image-or-video-and-add-a-call-to-action-button\/"},"author":{"name":"admin","@id":"https:\/\/ourdemy.com\/#\/schema\/person\/e7a7e53bb8a94cce8f134c3718702e42"},"headline":"How do I set up a Hero section with background image or video, and add a call-to-action button?","datePublished":"2025-11-13T04:23:32+00:00","dateModified":"2025-11-20T08:53:31+00:00","mainEntityOfPage":{"@id":"https:\/\/ourdemy.com\/how-do-i-set-up-a-hero-section-with-background-image-or-video-and-add-a-call-to-action-button\/"},"wordCount":308,"commentCount":0,"publisher":{"@id":"https:\/\/ourdemy.com\/#organization"},"image":{"@id":"https:\/\/ourdemy.com\/how-do-i-set-up-a-hero-section-with-background-image-or-video-and-add-a-call-to-action-button\/#primaryimage"},"thumbnailUrl":"https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-8d3ef1bb55bf5db7-1763628602.gif","articleSection":["Customize Your Site","Help Center"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ourdemy.com\/how-do-i-set-up-a-hero-section-with-background-image-or-video-and-add-a-call-to-action-button\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ourdemy.com\/how-do-i-set-up-a-hero-section-with-background-image-or-video-and-add-a-call-to-action-button\/","url":"https:\/\/ourdemy.com\/how-do-i-set-up-a-hero-section-with-background-image-or-video-and-add-a-call-to-action-button\/","name":"How do I set up a Hero section with background image or video, and add a call-to-action button? - Ourdemy","isPartOf":{"@id":"https:\/\/ourdemy.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ourdemy.com\/how-do-i-set-up-a-hero-section-with-background-image-or-video-and-add-a-call-to-action-button\/#primaryimage"},"image":{"@id":"https:\/\/ourdemy.com\/how-do-i-set-up-a-hero-section-with-background-image-or-video-and-add-a-call-to-action-button\/#primaryimage"},"thumbnailUrl":"https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-8d3ef1bb55bf5db7-1763628602.gif","datePublished":"2025-11-13T04:23:32+00:00","dateModified":"2025-11-20T08:53:31+00:00","breadcrumb":{"@id":"https:\/\/ourdemy.com\/how-do-i-set-up-a-hero-section-with-background-image-or-video-and-add-a-call-to-action-button\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ourdemy.com\/how-do-i-set-up-a-hero-section-with-background-image-or-video-and-add-a-call-to-action-button\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ourdemy.com\/how-do-i-set-up-a-hero-section-with-background-image-or-video-and-add-a-call-to-action-button\/#primaryimage","url":"https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-8d3ef1bb55bf5db7-1763628602.gif","contentUrl":"https:\/\/ourdemy.com\/wp-content\/uploads\/2025\/11\/remote-img-8d3ef1bb55bf5db7-1763628602.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/ourdemy.com\/how-do-i-set-up-a-hero-section-with-background-image-or-video-and-add-a-call-to-action-button\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ourdemy.com\/"},{"@type":"ListItem","position":2,"name":"How do I set up a Hero section with background image or video, and add a call-to-action button?"}]},{"@type":"WebSite","@id":"https:\/\/ourdemy.com\/#website","url":"https:\/\/ourdemy.com\/","name":"Ourdemy","description":"Make your own online academy","publisher":{"@id":"https:\/\/ourdemy.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ourdemy.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ourdemy.com\/#organization","name":"Ourdemy","url":"https:\/\/ourdemy.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ourdemy.com\/#\/schema\/logo\/image\/","url":"https:\/\/ourdemy.com\/wp-content\/uploads\/2023\/09\/ouracademy-02.svg","contentUrl":"https:\/\/ourdemy.com\/wp-content\/uploads\/2023\/09\/ouracademy-02.svg","width":3163,"height":884,"caption":"Ourdemy"},"image":{"@id":"https:\/\/ourdemy.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/ourdemy.com\/#\/schema\/person\/e7a7e53bb8a94cce8f134c3718702e42","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/042968b872d529b85b5b0faae638766460238b6758e95a7094fdb8c7c37635db?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/042968b872d529b85b5b0faae638766460238b6758e95a7094fdb8c7c37635db?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/042968b872d529b85b5b0faae638766460238b6758e95a7094fdb8c7c37635db?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/ourdemy.com"]}]}},"_links":{"self":[{"href":"https:\/\/ourdemy.com\/en\/wp-json\/wp\/v2\/posts\/23598","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ourdemy.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ourdemy.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ourdemy.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ourdemy.com\/en\/wp-json\/wp\/v2\/comments?post=23598"}],"version-history":[{"count":4,"href":"https:\/\/ourdemy.com\/en\/wp-json\/wp\/v2\/posts\/23598\/revisions"}],"predecessor-version":[{"id":24463,"href":"https:\/\/ourdemy.com\/en\/wp-json\/wp\/v2\/posts\/23598\/revisions\/24463"}],"wp:attachment":[{"href":"https:\/\/ourdemy.com\/en\/wp-json\/wp\/v2\/media?parent=23598"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ourdemy.com\/en\/wp-json\/wp\/v2\/categories?post=23598"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ourdemy.com\/en\/wp-json\/wp\/v2\/tags?post=23598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}