{"id":42,"date":"2020-12-15T12:30:44","date_gmt":"2020-12-15T12:30:44","guid":{"rendered":"https:\/\/help.webhealer.net\/?p=42"},"modified":"2021-05-14T14:19:11","modified_gmt":"2021-05-14T14:19:11","slug":"how-to-change-your-hero-image-to-a-video-or-map","status":"publish","type":"post","link":"https:\/\/help.webhealer.net\/index.php\/2020\/12\/15\/how-to-change-your-hero-image-to-a-video-or-map\/","title":{"rendered":"How to change your hero image to a video or map"},"content":{"rendered":"\n<p>The <strong>hero image<\/strong> of your website is the large image that stretches across the screen at the top of your site. With our templates, you have the option of changing this to another image &#8211; or even to a video or map. <\/p>\n\n\n\n<p>To change it, first click the round menu icon that appears in the top right-hand corner of your hero image block when you hover over it. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"337\" height=\"251\" src=\"https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step1-1.png\" alt=\"\" class=\"wp-image-43\" srcset=\"https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step1-1.png 337w, https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step1-1-300x223.png 300w, https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step1-1-60x45.png 60w, https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step1-1-150x112.png 150w\" sizes=\"(max-width: 337px) 100vw, 337px\" \/><\/figure>\n\n\n\n<p>Once you click this, the menu bar will appear. Select the &#8216;Background&#8217; button as seen below, and delete the current image by clicking &#8216;x&#8217;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"466\" height=\"349\" src=\"https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step2-9.png\" alt=\"\" class=\"wp-image-115\" srcset=\"https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step2-9.png 466w, https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step2-9-300x225.png 300w, https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step2-9-60x45.png 60w, https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step2-9-150x112.png 150w\" sizes=\"(max-width: 466px) 100vw, 466px\" \/><\/figure>\n\n\n\n<p>At this stage, you can either add a different image that you have saved on your device by clicking the upload button which will appear where the image was, or you can add <strong>a video<\/strong> from Youtube or Vimeo with the following steps:<\/p>\n\n\n\n<p>Find the video you want to add on Youtube or Vimeo (we will use Youtube for this example), and click the &#8216;Share&#8217; button which appears in the bottom right corner under the video. Then click &#8216;COPY&#8217; to copy the link.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"407\" height=\"263\" src=\"https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step3-2.png\" alt=\"\" class=\"wp-image-45\" srcset=\"https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step3-2.png 407w, https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step3-2-300x194.png 300w, https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step3-2-60x39.png 60w, https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step3-2-150x97.png 150w\" sizes=\"(max-width: 407px) 100vw, 407px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"542\" height=\"331\" src=\"https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step4.png\" alt=\"\" class=\"wp-image-46\" srcset=\"https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step4.png 542w, https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step4-300x183.png 300w, https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step4-60x37.png 60w, https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step4-150x92.png 150w\" sizes=\"(max-width: 542px) 100vw, 542px\" \/><\/figure>\n\n\n\n<p>Now, return to your editing page, and click the &#8216;video&#8217; icon within the &#8216;Background&#8217; menu. Paste the video link into the URL line. If you would like this video to play on a loop, click the &#8216;Loop&#8217; option.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"433\" height=\"335\" src=\"https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step5-2.png\" alt=\"\" class=\"wp-image-47\" srcset=\"https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step5-2.png 433w, https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step5-2-300x232.png 300w, https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step5-2-60x46.png 60w, https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step5-2-150x116.png 150w\" sizes=\"(max-width: 433px) 100vw, 433px\" \/><\/figure>\n\n\n\n<p>If you want to <strong>add a map<\/strong> of a specific location as your hero image, repeat the above steps up until selecting the &#8216;video&#8217; icon. Instead, select the &#8216;location&#8217; icon to the right. Then enter an address of your choice in the &#8216;Address&#8217; line. You can also use the zoom tool below to zoom in or out as you please.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"397\" height=\"272\" src=\"https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step6map-1.png\" alt=\"\" class=\"wp-image-49\" srcset=\"https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step6map-1.png 397w, https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step6map-1-300x206.png 300w, https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step6map-1-60x41.png 60w, https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step6map-1-150x103.png 150w\" sizes=\"(max-width: 397px) 100vw, 397px\" \/><\/figure>\n\n\n\n<p>And hey-presto!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"552\" src=\"https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step7map-1024x552.png\" alt=\"\" class=\"wp-image-50\" srcset=\"https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step7map-1024x552.png 1024w, https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step7map-300x162.png 300w, https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step7map-768x414.png 768w, https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step7map-1536x828.png 1536w, https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step7map-60x32.png 60w, https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step7map-150x81.png 150w, https:\/\/help.webhealer.net\/wp-content\/uploads\/2020\/12\/step7map.png 1720w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Watch the below video for a full step-by-step breakdown of changing your hero image to either another image, a video, or a location.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/help.webhealer.net\/wp-content\/uploads\/2021\/05\/Change-hero-image-SHORTER-VERSION.mp4\"><\/video><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><strong><span class=\"has-inline-color has-vivid-red-color\">*NB*<\/span>&nbsp;\u2013 Don\u2019t forget to click \u2018Update\u2019 in the bottom right-hand corner after you make any changes to your website so they will be saved!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The hero image of your website is the large image that stretches across the screen at the top of your site. With our templates, you have the option of changing this to another image &#8211; or even to a video or map. To change it, first click the round menu icon that appears in the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[],"_links":{"self":[{"href":"https:\/\/help.webhealer.net\/index.php\/wp-json\/wp\/v2\/posts\/42"}],"collection":[{"href":"https:\/\/help.webhealer.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/help.webhealer.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/help.webhealer.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/help.webhealer.net\/index.php\/wp-json\/wp\/v2\/comments?post=42"}],"version-history":[{"count":4,"href":"https:\/\/help.webhealer.net\/index.php\/wp-json\/wp\/v2\/posts\/42\/revisions"}],"predecessor-version":[{"id":274,"href":"https:\/\/help.webhealer.net\/index.php\/wp-json\/wp\/v2\/posts\/42\/revisions\/274"}],"wp:attachment":[{"href":"https:\/\/help.webhealer.net\/index.php\/wp-json\/wp\/v2\/media?parent=42"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/help.webhealer.net\/index.php\/wp-json\/wp\/v2\/categories?post=42"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/help.webhealer.net\/index.php\/wp-json\/wp\/v2\/tags?post=42"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}