How to Add a 360° Panorama Image to WordPress

 ›  CMS WordPress  ›  How to Add a 360° Panorama Image to WordPress

Panoramic images are becoming more popular for creating 3D tours and immersive experiences on websites.
Here’s how you can add a panorama to your site.
Log in to your WordPress admin panel by going to Your_Domain/wp-admin/ or through your Client Area;

To display a panorama on your site, you’ll need to install the «iPanorama 360» plugin.
To install it, go to «Plugins» / «Add New Plugin».

Search for «ipanorama 360» in the search bar. When the plugin appears in the results, click «Install Now».

Click the «Activate».

You’ll now see a new menu item labeled «iPanorama 360» in your WordPress admin sidebar.

Go to «iPanorama 360» / «Add New».

Enter a name for your Panorama.

Turn on the «Auto Load» option.

Go to the «Scenes» tab.

Click the «+» button to add a new scene to your panorama.

In the form on the right, locate the «Image» field to upload your panoramic image.
Click the folder icon to select and upload your file.

In the popup window, you can choose an image from your Media Library or upload a new one directly from your computer.

In the popup window, you can either select an image from your Media Library or upload a new one by clicking on the «Upload Files» tab.

Click the «Choose».

The uploaded image will be displayed at the top of the screen.

In the «Title» field, enter a name for the scene. This title will help organize scenes in the left column and will also be visible on your website when users view the panorama.

If you prefer not to show the title on your website, simply uncheck the «Title» option.

By default, the panorama image is displayed centered with no zoom applied.
If this works for you, no additional adjustments are needed.
However, if you want the image to start with a specific zoom level or a different starting position, you can easily customize it:

• Adjust the image's position by clicking and dragging it at the top of the screen.
• Use your mouse scroll wheel to set the desired zoom level.
• Once everything is positioned and zoomed as you like, click the copy buttons next to «Camera Start Position» and «Camera Start Zoom» to save your settings.

Click the «SAVE».

To preview your panorama, click the «PREVIEW» button.

The last step is to add the panorama to a page on your website. To do this, navigate to the «SHORTCODE» tab.

Copy the shortcode from the «Standard shortcode» field.

Now, go to «Pages» / «All Pages».

You can choose an existing page or create a new one.
For this example, let’s create a new page by clicking the «Add New Page» button.

Enter a name for the page and click the «Use Divi Builder» button.

Select «Build From Scratch».

Choose a layout structure that fits your page design. In this example, we’ll use a single-column layout.

From the list of available modules, select «Code».

Paste the shortcode you copied earlier into the «Code» field.

Click the «Save».

Click the «...» button at the bottom of the screen.

Click the «Publish».

Click the «Save».

Preview your website page to ensure the panorama is working properly.