{"id":32464,"date":"2021-03-09T16:54:13","date_gmt":"2021-03-09T15:54:13","guid":{"rendered":"https:\/\/urbanflavour.pl\/how-to-add-virtual-walk-on-site-wordpress\/"},"modified":"2024-08-15T12:21:02","modified_gmt":"2024-08-15T10:21:02","slug":"how-to-add-virtual-walk-on-site-wordpress","status":"publish","type":"post","link":"https:\/\/urbanflavour.pl\/en\/how-to-add-virtual-walk-on-site-wordpress\/","title":{"rendered":"8 steps how to add a virtual tour to a WordPress website?"},"content":{"rendered":"<div class=\"gb-container gb-container-ede25c6e\"><div class=\"gb-inside-container\">\n\n<p class=\"has-text-align-justify\">If you have already created <a href=\"https:\/\/urbanflavour.pl\/en\/virtual-walk-offer\/\" class=\"ek-link\">a virtual tour in Google Maps<\/a> and are wondering how to add a virtual tour to a WordPress website, then this guide is for you. The whole should take us no more than 5 minutes. The whole process looks very similar to adding <a href=\"https:\/\/urbanflavour.pl\/en\/google-map-on-website\/\" class=\"ek-link\">Google Maps to a Website<\/a> and in part like adding <a href=\"https:\/\/urbanflavour.pl\/en\/virtual-walk-on-fanpage\/\" class=\"ek-link\">a virtual walk on Facebook.<\/a> Most of the virtual tours on this site have been posted in a similar way &#8211; you will find them in my <a href=\"https:\/\/urbanflavour.pl\/portfolio-wirtualne-spacery\/\" class=\"ek-link\">portfolio.<\/a><\/p>\n\n<\/div><\/div>\n<h2 class=\"wp-block-heading\">How to add a virtual tour on a WordPress website?<\/h2>\n\n<p>You have to start with the fact that we must first of all have <a href=\"https:\/\/urbanflavour.pl\/en\/how-to-add-your-company-in-google-maps\/\" class=\"ek-link\">a company in Google Maps<\/a>, and then a virtual walk in Google Maps that we want to add on the site. If you don&#8217;t have one yet, take a look at my <strong><a href=\"https:\/\/urbanflavour.pl\/en\/virtual-walk-offer\/\" class=\"ek-link\">offer<\/a><\/strong> of Google Street View virtual tours.<\/p>\n\n<h2 class=\"wp-block-heading\">1. Open Google Maps<\/h2>\n\n<p class=\"has-text-align-justify\">We enter <a href=\"http:\/\/maps.google.com\" target=\"_blank\" rel=\"noopener\">Google Maps<\/a> in a computer browser on a computer.<\/p>\n\n<h2 class=\"wp-block-heading\">2. Find your business on Google Maps<\/h2>\n\n<p class=\"has-text-align-justify\">In the upper left corner in the search box, enter the address of our company and click Enter or magnifying glass.<\/p>\n\n<figure class=\"wp-block-image alignwide size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/6-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-1024x576.jpg\" alt=\"Search for your business on google maps\" class=\"wp-image-28601\" title=\"Urbanflavour.pl\" srcset=\"https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/6-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-1024x576.jpg 1024w, https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/6-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-830x467.jpg 830w, https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/6-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-500x281.jpg 500w, https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/6-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress.jpg 1400w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<p class=\"has-text-align-justify\"><em>If we have our company in Google Maps and a virtual walk, we must first add the company to the maps, and then order a virtual Google tour.<\/em><\/p>\n\n<h2 class=\"wp-block-heading\">3. Open a virtual tour in Google Maps<\/h2>\n\n<ul class=\"wp-block-list\"><li><em>Option 1:<\/em> Google Virtual Tour can be found in the <em>Photos<\/em> tab and there we will find the rectangle <em>&#8220;Street View and spherical photos.&#8221;<\/em><\/li><li><em>Option 2:<\/em> We can also find a small orange man in the lower right corner that we can grab and lower on the map in place of blue dots.<\/li><\/ul>\n\n<figure class=\"wp-block-image alignwide size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/5-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-1024x576.jpg\" alt=\"Photos and virtual tour on Google Maps\" class=\"wp-image-28599\" title=\"Urbanflavour.pl\" srcset=\"https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/5-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-1024x576.jpg 1024w, https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/5-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-830x467.jpg 830w, https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/5-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-500x281.jpg 500w, https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/5-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress.jpg 1400w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<h2 class=\"wp-block-heading\">4. Select the start view<\/h2>\n\n<p class=\"has-text-align-justify\">It is important to select the appropriate view before creating the HTML code in step 5. If we want it to start from the entrance to the premises, we go to this place. If we want to start with an interesting place inside our walk, we open it in this place and set the frame in exactly the way we want to show visitors to our website with a virtual walk. This view will be saved in the HTML code.<\/p>\n\n<figure class=\"wp-block-image alignwide size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/3-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-1024x576.jpg\" alt=\"Virtual tour on Google Maps\" class=\"wp-image-28595\" title=\"Urbanflavour.pl\" srcset=\"https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/3-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-1024x576.jpg 1024w, https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/3-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-830x467.jpg 830w, https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/3-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-500x281.jpg 500w, https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/3-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress.jpg 1400w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<h2 class=\"wp-block-heading\">5. Create and copy HTML code<\/h2>\n\n<ul class=\"wp-block-list\"><li>If we have already chosen the right &#8220;frame&#8221;, then in the upper left corner on the gray square with the name of our company and the creator of the virtual walk, click on three gray dots and select Share or place a photo.<\/li><li>In the <em>&#8220;Share&#8221;<\/em> window we select <em>&#8220;Placing the map<\/em> in which we will see a window with a virtual walk.<\/li><\/ul>\n\n<figure class=\"wp-block-image alignwide size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/1-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-1024x576.jpg\" alt=\"Share\" class=\"wp-image-28591\" title=\"Urbanflavour.pl\" srcset=\"https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/1-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-1024x576.jpg 1024w, https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/1-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-830x467.jpg 830w, https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/1-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-500x281.jpg 500w, https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/1-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress.jpg 1400w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<h2 class=\"wp-block-heading\">6. Copy the HTML code<\/h2>\n\n<p class=\"has-text-align-justify\">In the map placement window, we can choose its size on the website. By default, the average average size is 600 pixels wide and 450 pixels high. The following parameters are responsible for this:<\/p>\n\n<p>&#8220;width=&#8221;600&#8243; height=&#8221;450&#8221;<\/p>\n\n<p>I will recommend another method.<\/p>\n\n<p class=\"has-text-align-justify\">We copy the link as it is, and then enter our own parameters depending on the width of our page and the place where we place the virtual tour.<\/p>\n\n<p class=\"has-text-align-justify\">I prefer to set the parameter width=&#8221;100%&#8221;. When creating a code in Google Maps, we will not do this, but by pasting the code on the website, we can apply the width in percent, thanks to which the virtual walk will automatically adjust its width. The height it most often uses is about 400-500 pixels, due to mobile devices.<\/p>\n\n<h2 class=\"wp-block-heading\">7th Create a new page, or enter the editing of the already created<\/h2>\n\n<p class=\"has-text-align-justify\">A virtual tour can be added on a separate subpage, or added, for example, in the contact tab on our website. It doesn&#8217;t make much difference, and adding code looks the same. We can add to the post, or to the page.<\/p>\n\n<figure class=\"wp-block-image alignwide size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/2-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-1024x576.jpg\" alt=\"Add a new Page or post\" class=\"wp-image-28593\" title=\"Urbanflavour.pl\" srcset=\"https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/2-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-1024x576.jpg 1024w, https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/2-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-830x467.jpg 830w, https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/2-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-500x281.jpg 500w, https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/2-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress.jpg 1400w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<ul class=\"wp-block-list\"><li>Enter our admin panel (WordPress Dashboard) naszadres.pl\/wp-admin\/<\/li><li>On the top bar we select New post &gt; or Page<\/li><li>If we want to add a code to an existing page, go to Posts &gt; All Posts &gt; Select a post and click on it<\/li><\/ul>\n\n<h2 class=\"wp-block-heading\">8. Add custom HTML block<\/h2>\n\n<p class=\"has-text-align-justify\">If we are already editing a page \/ post, we create a new block called <em>&#8220;Custom HTML<\/em> &#8221; and there we paste our copied HTML code from Google Maps.<\/p>\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/4-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-1024x576.jpg\" alt=\"Adding HTML in wordpress\" class=\"wp-image-28597\" title=\"Urbanflavour.pl\" srcset=\"https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/4-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-1024x576.jpg 1024w, https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/4-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-830x467.jpg 830w, https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/4-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-500x281.jpg 500w, https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/4-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress.jpg 1400w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<p><em>Remember to enter the appropriate sizes in the width and height parameters.<\/em><\/p>\n\n<figure class=\"wp-block-gallery alignwide columns-2 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/7-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-1024x576.jpg\" alt=\"Add HTML with a virtual tour from Google Maps\" data-id=\"28603\" data-full-url=\"https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/7-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress.jpg\" data-link=\"https:\/\/urbanflavour.pl\/7-jak-dodac-wirtualny-spacer-na-stronie-wordpress\/\" class=\"wp-image-28603\" title=\"Urbanflavour.pl\" srcset=\"https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/7-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-1024x576.jpg 1024w, https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/7-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-830x467.jpg 830w, https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/7-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-500x281.jpg 500w, https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/7-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress.jpg 1400w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/8-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-1024x576.jpg\" alt=\"Add HTML with a virtual tour from Google Maps\" data-id=\"28605\" data-full-url=\"https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/8-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress.jpg\" data-link=\"https:\/\/urbanflavour.pl\/8-jak-dodac-wirtualny-spacer-na-stronie-wordpress\/\" class=\"wp-image-28605\" title=\"Urbanflavour.pl\" srcset=\"https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/8-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-1024x576.jpg 1024w, https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/8-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-830x467.jpg 830w, https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/8-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-500x281.jpg 500w, https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/8-Jak-dodac-wirtualny-spacer-na-stronie-Wordpress.jpg 1400w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><\/ul><\/figure>\n\n<p>If it&#8217;s a new post, then we set the thumbnail and other data, publish and you&#8217;re done! Also remember to add a new page to the menu, or appropriate links to easily find it. Well, that would be enough.<\/p>\n\n<h2 class=\"wp-block-heading\">Video tutorial<\/h2>\n\n<p>If you prefer to see how to dod it below I put how to do it all on the example of the post you are reading.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>See How to add a virtual tour to a Wordpress website in 8 easy steps to your Wordpress-based website in 5 minutes.<\/p>\n","protected":false},"author":1,"featured_media":28894,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,36,49],"tags":[],"class_list":["post-32464","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-en","category-google-my-busines","category-virtual-tours","infinite-scroll-item","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-33"],"featured_image_urls_v2":{"full":["https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/Jak-dodac-wirtualny-spacer-na-stronie-Wordpress.jpg",1920,1080,false],"thumbnail":["https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-500x281.jpg",500,281,true],"medium":["https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-830x467.jpg",830,467,true],"medium_large":["https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/Jak-dodac-wirtualny-spacer-na-stronie-Wordpress.jpg",768,432,false],"large":["https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/Jak-dodac-wirtualny-spacer-na-stronie-Wordpress-1024x576.jpg",1024,576,true],"1536x1536":["https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/Jak-dodac-wirtualny-spacer-na-stronie-Wordpress.jpg",1536,864,false],"2048x2048":["https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/Jak-dodac-wirtualny-spacer-na-stronie-Wordpress.jpg",1920,1080,false],"gform-image-choice-sm":["https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/Jak-dodac-wirtualny-spacer-na-stronie-Wordpress.jpg",300,169,false],"gform-image-choice-md":["https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/Jak-dodac-wirtualny-spacer-na-stronie-Wordpress.jpg",400,225,false],"gform-image-choice-lg":["https:\/\/urbanflavour.pl\/wp-content\/uploads\/2021\/03\/Jak-dodac-wirtualny-spacer-na-stronie-Wordpress.jpg",600,338,false]},"post_excerpt_stackable_v2":"<p>See How to add a virtual tour to a Wordpress website in 8 easy steps to your Wordpress-based website in 5 minutes.<\/p>\n","category_list_v2":"<a href=\"https:\/\/urbanflavour.pl\/en\/kategoria\/blog-en\/\" rel=\"category tag\">Blog<\/a>, <a href=\"https:\/\/urbanflavour.pl\/en\/kategoria\/blog-en\/google-my-busines\/\" rel=\"category tag\">Google My Busines<\/a>, <a href=\"https:\/\/urbanflavour.pl\/en\/kategoria\/portfolio-en\/virtual-tours\/\" rel=\"category tag\">Virtual Tours<\/a>","author_info_v2":{"name":"Marcin Krokowski","url":"https:\/\/urbanflavour.pl\/en\/author\/marcin_d3rfw32\/"},"comments_num_v2":"2 comments","_links":{"self":[{"href":"https:\/\/urbanflavour.pl\/en\/wp-json\/wp\/v2\/posts\/32464","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/urbanflavour.pl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/urbanflavour.pl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/urbanflavour.pl\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/urbanflavour.pl\/en\/wp-json\/wp\/v2\/comments?post=32464"}],"version-history":[{"count":2,"href":"https:\/\/urbanflavour.pl\/en\/wp-json\/wp\/v2\/posts\/32464\/revisions"}],"predecessor-version":[{"id":34515,"href":"https:\/\/urbanflavour.pl\/en\/wp-json\/wp\/v2\/posts\/32464\/revisions\/34515"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/urbanflavour.pl\/en\/wp-json\/wp\/v2\/media\/28894"}],"wp:attachment":[{"href":"https:\/\/urbanflavour.pl\/en\/wp-json\/wp\/v2\/media?parent=32464"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/urbanflavour.pl\/en\/wp-json\/wp\/v2\/categories?post=32464"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/urbanflavour.pl\/en\/wp-json\/wp\/v2\/tags?post=32464"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}