{"id":20730,"date":"2021-02-23T15:00:02","date_gmt":"2021-02-23T14:00:02","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=20730"},"modified":"2021-02-23T13:21:09","modified_gmt":"2021-02-23T12:21:09","slug":"how-to-add-360-image-to-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-add-360-image-to-wordpress\/","title":{"rendered":"How to Add an Interactive 360 Degree Image to WordPress"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]Technology continues to change our everyday lives and empower us to do things once possible only in our imagination. Now we have the tools which let us complete a lot of actions blazingly fast from the convenience of our computers and phones, including going on virtual tours and exploring distant places. That is possible thanks to 360 degree pictures which represent a huge achievement of technology development.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Interactive 360 photographs consist of several images that, placed one next to the other, form a continuous circle around the spot where the photos were taken. They are usually shot with special 360 cameras that come with two ultra-wide lenses (each lens has a visual angle of at least 180 degrees) and then joined together using a stitching software. You can also create them with special apps on smartphones. An interactive 360 image puts us in the photographer’s shoes and allows us to observe the surrounding environment of the place where the photo was taken.<\/strong> By moving our mouse (or our head in the case of VR headsets) in whatever direction we please, we can take control of the view.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Incorporating interactive images<\/a> into a marketing strategy can highly benefit brands, but 360 degree photographs can help them break through the online noise even more efficiently. We will now discuss the principal advantages of this in-demand service and demonstrate how to add an interactive 360 image to a WordPress website using a plugin.[\/vc_column_text][vc_empty_space height=”80px”][vc_widget_sidebar sidebar_id=”new-top-picks-banner”][vc_empty_space height=”80px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Benefits of 360 Photography<\/h2>\n

[\/vc_column_text][vc_column_text]Recognizing the potential of 360 degree images can help your brand in the long run. Here are some of the main reasons why you should consider adding them to your site:
\n[\/vc_column_text][vc_empty_space height=”72px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Increase User Engagement<\/h3>\n

[\/vc_column_text][vc_column_text]We love and appreciate seeing great visual content, and interactive 360 degree photos, in particular, have the power to captivate users\u2019 attention and make them browse websites longer as opposed to pages with still imagery<\/strong>. An interactive 360 image is immersive and can conjure up beautiful emotions, which is why people enjoy seeing and exploring them. And the more time users spend on your site, the higher the chance of them converting to paying customers.[\/vc_column_text][vc_empty_space height=”72px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Stand Out from Competitors<\/h3>\n

[\/vc_column_text][vc_column_text]Interactive 360 degree photos allow you to differentiate your brand and your products from competitors. For instance, if you run an eCommerce store, you can create captivating product presentations, allow users to zoom into your products, and rotate them however they please to get a sense of what your products are like. Not many brands use this type of photographs to their advantage<\/strong>, but you should consider adding them to your site because they can help you attract potential customers. After seeing and touching a product in person, inspecting it via an interactive 360 image is the next best thing.<\/strong>[\/vc_column_text][vc_empty_space height=”72px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Bring Your Business to Life<\/h3>\n

[\/vc_column_text][vc_column_text]360 degree images let people take virtual tours of your business and get to know it on the inside. They can explore your resort, restaurant, shop, venue, or hotel from the comfort of their home, and understand how it\u2019s organized and the services it offers.<\/strong> By providing people with a fully immersive experience as no 2D picture can, you can inspire and convince them to visit your establishment in person.[\/vc_column_text][vc_empty_space height=”72px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Attract New Customers<\/h3>\n

[\/vc_column_text][vc_column_text]Appealing 360 imagery is a remarkable marketing tool that can bring new clients your way.<\/strong> For example, if you\u2019re listed on Google Places, interactive 360 degree photos can help attract users to your business. Once they come and visit your business, you have the chance to show them what makes you better than competitors and let the quality of your service persuade them to come back.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Now that we\u2019ve listed the pros of using 360 degree photographs, let\u2019s show you how to add them to your WordPress website.
\n[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Introduction to the WP VR Plugin<\/h2>\n

[\/vc_column_text][vc_empty_space height=”21px”]

\n
\n \"WP <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The best way of adding a 360 image to WordPress is by using the WP VR \u2013 360 Panorama and Virtual Tour Creator For WordPress<\/a> plugin. You can use it to create detailed virtual tours, too. Even the free version includes a myriad of customization options, more than any other similar plugin on the market. But to make an absolute most of its powerful options, you should consider purchasing one of the three available subscription plans<\/a>. WP VR is compatible with WPBakery, Gutenberg, and Elementor. In this tutorial, we will be using the Gutenberg page builder to show you how to upload the 360 degree photographs to your site.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Before you start creating your first virtual tour, let\u2019s go over the plugin\u2019s options so you understand its potency. You should modify general settings first to make them fit your needs.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]To do that, go to WP VR > Get Started<\/strong><\/em> and click on the Settings<\/strong><\/em> tab (or scroll down the page until you reach the General Setup Options<\/strong><\/em> section). You can enable other user roles<\/a> to create virtual tours on your site (Editors and Authors), activate a mobile resizer that will make your 360 image suitable for mobile devices<\/strong>, enable script control which loads the WP VR assets only on selected pages with virtual tours, customize the notification for users visiting the tour from mobile devices to remind them to flip their phone to landscape mode for a more immersive experience, and more.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"General <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Once that is taken care of, head over to WP VR > Add New Tour<\/strong><\/em>. First up, you can enter the name of your tour.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Enter <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Then, select the General<\/strong><\/em> tab on the left and modify Basic<\/strong><\/em> settings. If you wish, you can upload the preview image that will be displayed before the tour loads. However, if you enable the Tour Autoload<\/strong><\/em> option, the preview image won\u2019t be visible.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Upload <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Moreover, you can display control buttons on your interactive 360 image<\/strong>, including Zoom In<\/em>, Zoom Out<\/em>, and Full Screen<\/em>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The Scene Fade Duration<\/strong><\/em> option allows you to enable the faded effect while users move from one scene to the next. It\u2019s also possible to activate the Auto Rotation<\/strong><\/em> and set up the rotation speed and direction, as well as specify the time after which the rotation will start again and when it will stop.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"General <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]At the bottom of the page, there is the Using This Tour<\/strong><\/em> section where you can find the tour\u2019s shortcode that you can add to your pages and posts.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Tour\" <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Advanced Controls<\/strong><\/em> are available to premium users only. You can use them to control what users can do on your 360 image. For instance, you can allow them to zoom in and out of the photo using their keyboard or their mouse, activate the gyroscope control, add a compass, and much more. You can also create a Scene Gallery<\/em> and allow people to take a look at all the scenes included in the virtual tour. The pro version of WP VR enables you to add background music<\/strong>, to make the user experience all the more enjoyable. Control Buttons<\/strong><\/em> is another premium option that lets you add advanced buttons to the image, such as Move Up\/Down\/Left\/Right<\/em>, and customize the icon for each control button.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]In case you wish to add several scenes and allow users to switch between them, you can take care of that by selecting Scenes<\/strong><\/em> and modify the settings to your requirements. You need to upload at least one 360 image (but you can add more if you want to have more scenes), enter a scene ID, and set at least one scene as default. When you finish, press the Preview<\/strong><\/em> button to see what it all looks like before saving the changes.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Scenes\" <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Premium users can customize each scene by adding titles to them, specifying the name of the author, and deciding how far a user can navigate left, right, up, and down, and more.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]WP VR enables you to add hotspots to your interactive 360 degree photo.<\/strong> You have the possibility to add textual information, images, and videos, or add scene hotspots to let users go from one scene to the next by using hotspots.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Hotspot\" <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Another great thing about this plugin is that it lets you create video virtual tours<\/strong>, too. As a premium user, you can also embed Google Street View.[\/vc_column_text][vc_empty_space height=”72px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to Add 360 Images to Your Site Using the WP VR Plugin<\/h3>\n

[\/vc_column_text][vc_column_text]Once you took care of all the settings and tweaked them to your needs, go to Scenes<\/em>. Then, upload your interactive 360 photo, enter a scene ID, and set that scene as default. You can go with one scene only.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Scene <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]You can see what the tour looks like by pressing the Preview<\/strong><\/em> button. If you\u2019re happy with the final result, click on Publish<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Now, to display the image on your page, first add the WP VR<\/strong><\/em> block to it (in Elementor, you need to use the WPVR widget, while in WPBakery you have to paste the shortcode to the desired page or post).[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"WPVR <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Look at the block options on the right side of the screen. Click on the first one \u2013 Id<\/strong><\/em> and select the tour you\u2019ve only just created.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Block <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Next, click on Preview<\/em> to see how the 360 image looks like on your page, and then Publish<\/em> it.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"360 <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Of course, if you wish, you can upload more scenes and add hotspots to make the image more informative for users.
\n[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Final Thoughts<\/h2>\n

[\/vc_column_text][vc_column_text]An interactive 360 image undoubtedly has the power to turn an ordinary website into an eye-catching and commanding one in an instant. The WP VR plugin is a remarkable choice that packs impressive options for free, not to mention even more practical settings that come with premium versions. Alternatively to this plugin, you can go with the lightweight Algori 360 Image<\/a> but it works only in Gutenberg or SR Product 360\u00b0 View<\/a> which is a good choice in case you run an online shop.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

360 degree photos can help your brand in the long run. Discover their main benefits and learn how to add an interactive 360 image to your site using a plugin<\/p>\n","protected":false},"author":4,"featured_media":20804,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,4,13],"class_list":["post-20730","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/20730","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=20730"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/20730\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/20804"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=20730"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=20730"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=20730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}