Create Single Panorama

In this section, we will explain about creating Single Panorama. There are a few things that we’ll explain to you such as:

1. Setup Panorama
2. Panorama Type
3. Panorama Toolbar
4. Create Hotspot
5. Create Tour

1. Setup Panorama

You can create Single Panorama on the Single Panorama dashboard. Go to the WordPress Dashboard → Virtual Tour → Single Panorama. If you already on the Single Panorama dashboard, then click the plus button (+) and you can start setup the panorama options.

On the panorama editor, you will find the basic option for single panorama under the Panorama tab. Here’s the list of panorama options:

1. Panorama Name
   Provide a name for your panorama.
2. Panorama Type
   Choose your panorama image type. Please check the Panorama Type below for detail information.
3. Equirectangular Image
   Upload an image as a panorama image. This option will be shown when you choose the equirectangular panorama type.
4. Cubemap Image
   Upload an image as a panorama image. This option will be shown when you choose the cubemap panorama type.
5. Initial Coordinate
   The value of this option will set automatically. Please check the Panorama Toolbar below for detail information point number 3.
6. Panorama Height Dimension
   The height based on the percentage (%) of panorama width. (Example: 100 means 1:1, 200 means 2:1).
7. Toolbar Scheme
   Choose which toolbar scheme you want to use for your panorama.
8. Enable Auto Rotate
   Check this option to enable automatic rotation after panorama finish loading.
9. Auto Rotate Speed
   Define auto rotate speed.
10. Auto Rotate Direction
    Choose auto rotate direction for panorama image.
11. Show Autorotate Control
    Enable this option to show the auto rotate control.
12. Show Compass
    Enable this option to show the compass.
13. Compass North Location
    Set compass north location, you can also use the above button to set compass north location. This option will be shown if you enable Show Compass option.
14. Show Zoom Control
    Enable this option to show the zoom control.
15. Show Fullscreen Control
    Enable this option to show the fullscreen control.
16. Show Hotspot & Tour List
    Enable this option to show the hotspot & tour list info.
17. Panorama Map
    Any option to control panorama map.
18. Show Panorama Map
    Enable this option to show the panorama map.
19. Select Panorama Map
    Choose the panorama map that you want to use. This option will be shown if you enable Show Panorama Map option.
20. Map Dimension
    The dimension based on the percentage (%) of panorama container size. (Example: 10 means 1:10, 50 means 1:2). This option will be shown if you enable Show Panorama Map option.
21. CSS
    Set CSS for this panorama.

2. Panorama Type

We provide 2 kind of panorama type which is equirectangular panorama type and cubemap panorama type. Below we will explain more detail for each panorama type.

1. Equirectangular
   When you choose to use the equirectangular panorama type, you will need to insert 1 image for the panorama image. You can use images below for example:

   https://support.jegtheme.com/wp-content/uploads/2019/10/bma-1.jpg

    

2. Cubemap
   If you choose to use the cubemap panorama type, you will need to insert 6 images which are for front area image, back area image, left area image, right area image, top area image, and bottom area image. It’s like a normal cube. You can use images below for example:

   https://support.jegtheme.com/wp-content/uploads/2019/10/front.jpg
   https://support.jegtheme.com/wp-content/uploads/2019/10/back.jpg
   https://support.jegtheme.com/wp-content/uploads/2019/10/left.jpg
   https://support.jegtheme.com/wp-content/uploads/2019/10/right.jpg
   https://support.jegtheme.com/wp-content/uploads/2019/10/top.jpg
   https://support.jegtheme.com/wp-content/uploads/2019/10/bottom.jpg
   

3. Panorama Toolbar

On the Single Panorama editor, we provide several buttons on the top toolbar that have important functions. Please check the image below for detail:

1. Create Hotspot
   You can use this button to toggle (show/hide) the create hotspot interface.
2. Create Tour
   You can use this button to toggle (show/hide) the create tour interface.
3. Set Initial Coordinate
   You can use this button to set the initial coordinate (initial view) of the panorama when the first load. You just need to find the spot that you want to use as initial coordinate by dragging the panorama view then click Set Initial Coordinate button.
4. Set Panorama North
   You can use this button to set the north direction. You just need to find the spot that you want to use as north direction by dragging the panorama view then click the Set Panorama North button.
5. Device Mode
   You can use this button to switch the panorama view based on device mode. We provide 3 kinds of device mode such as desktop mode, tablet mode, and phone mode.
6. Exit
   You can use this button to exit from the panorama editor.
7. Save Option
   You can use this option to save your panorama setup.
8. Panorama Shortcode
   You can copy the panorama shortcode on this button. You just need to click the button and the panorama shortcode will copy automatically on the clipboard.

4. Create Hotspot

After have done with setup the panorama option, you can start create the Hotspot. You can add multiple hotspots on the single panorama.

The hotspot is part of the Single Panorama feature. With this feature, you will be able to flag or pin a certain spot on the panorama image and showing some information such as short caption, post content, product content, etc.

You can follow the instruction below to adding new hotspot:

1. Click the Create Hotspot toolbar.
2. After the create hotspot interface showed, you can drag the panorama view to find the spot that you want to put the hotspot pin.
3. If you already find the right spot, then you can click ADD NEW button to adding a new hotspot.
4. Next, you can set up the hotspot option to fit with your need.

Here’s the list of hotspot options:

1. Hotspot Key
   Hotspot key that you can use for CSS or JavaScript purpose.
2. Hotspot Title
   Insert text for hotspot title.
3. Hotspot Shape
   Choose hotspot shape.
4. Hotspot Badge
   Badge for this hotspot. This option will be shown when you choose Badge shape on the Hotspot Shape option.
5. Hotspot Background Color
   Choose the background color for the hotspot. This option will not be shown if you choose Badge shape on the Hotspot Shape option.
6. Hotspot Shape Width
   Set shape size, bigger hotspot indicate that they need more attention.
7. Icon Type
   Choose which icon type you want to use. This option will not be shown if you choose Badge shape on the Hotspot Shape option.
8. Hotspot Icon
   Icon for this hotspot. This option will not be shown if you choose Badge shape on the Hotspot Shape option and you need to choose Font Icon on the Icon Type option.
9. Hotspot Icon Color
   Color for this hotspot icon. This option will not be shown if you choose Badge shape on the Hotspot Shape option and you need to choose Font Icon on the Icon Type option.
10. Icon Font size
    Set hotspot size, bigger hotspot indicate that they need more attention. This option will not be shown if you choose Badge shape on the Hotspot Shape option and you need to choose Font Icon on the Icon Type option.
11. Image Icon
    Upload your image icon. This option will not be shown if you choose Badge shape on the Hotspot Shape option and you need to choose Image on the Icon Type option.
12. Hotspot Coordinate
    Set the coordinate for this hotspot.
13. Hover Behaviour
    Choose how hotspot behavior when hovered.
14. Select Product
    Type the title of the WooCommerce product that you want to show. This option will be shown if you choose the WooCommerce Product on the Hover Behavior option.
15. Select Post
    Type the title of the post that you want to show. This option will be shown if you choose the Post Content on the Hover Behavior option.
16. Hover Theme
    Choose hover theme to be used.
17. Hover balloon min-width
    Define the minimum width for the balloon. This option will be shown if you choose Short Tooltips or Long Text Tooltips on the Hover Behavior option.
18. Hover balloon max-width
    Define maximum width for the balloon. This option will be shown if you choose Short Tooltips or Long Text Tooltips on the Hover Behavior option.
19. Tooltip Text
    Insert text that shown on the tooltip when hotspot hovered. This option will be shown if you choose Short Tooltips on the Hover Behavior option.
20. Tooltip Position
    Position of tooltips. This option will be shown if you choose Short Tooltips or Long Text Tooltips on the Hover Behavior option.
21. Tooltip Content
    Tooltips content. This option will be shown if you choose Long Text Tooltips on the Hover Behavior option.
22. Click Behaviour
    Choose how behavior reacts when hotspot clicked.
23. Hotspot URL
    Insert URL for the hotspot. This option will be shown if you choose Open new page on the Click Behavior option.
24. Hotspot Video
    Insert YouTube or Vimeo video. This option will be shown if you choose Video Popup on the Click Behavior option.
25. Hotspot Gallery
    Show gallery when icon clicked. This option will be shown if you choose Gallery Popup on the Click Behavior option.

5. Create Tour

After have done with setup the hotspot option, you can start create the Tour. You can add multiple tours on the single panorama.

The tour also part of the Single Panorama feature. With this feature, you will be able to flag or pin a certain spot on the panorama image then assign certain single panorama on that spot. When the spot clicked, the single panorama that relates to that spot will be loaded dynamically.

You can follow the instruction below to adding new tour:

1. Click the Create Tour toolbar.
2. After the create tour interface showed, you can drag the panorama view to find the spot that you want to put the tour pin.
3. If you already find the right spot, then you can click ADD NEW button to adding a new tour.
4. Next, you can set up the tour option to fit with your need.

Here’s the list of tour options:

1. Tour Key
   Tour key that you can use for CSS or JavaScript purpose.
2. Tour Title
   Insert text for tour title.
3. Select Tour
   Select the single panorama as the tour spot.
4. Tour Shape
   Choose the tour shape.
5. Tour Badge
   Badge for this tour. This option will be shown if you choose Badge shape on the Tour Shape option.
6. Tour Background Color
   Choose a background color for the tour. This option will not be shown if you choose Badge shape on the Tour Shape option.
7. Tour Shape Width
   Set shape size, bigger tour indicate that they need more attention.
8. Icon Type
   Choose which icon type you want to use. This option will not be shown if you choose Badge shape on the Tour Shape option.
9. Tour Icon
   Icon for this tour. This option will not be shown if you choose Badge shape on the Tour Shape option and you need to choose Font Icon on the Icon Type option.
10. Tour Icon Color
    Color for this tour icon. This option will not be shown if you choose Badge shape on the Tour Shape option and you need to choose Font Icon on the Icon Type option.
11. Icon Font Size
    Set tour size, bigger tour indicate that they need more attention. This option will not be shown if you choose Badge shape on the Tour Shape option and you need to choose Font Icon on the Icon Type option.
12. Image Icon
    Upload your image icon. This option will not be shown if you choose Badge shape on the Hotspot Shape option and you need to choose Image on the Icon Type option.
13. Tour Coordinate
    Set the coordinate for this tour.
14. Hover Behaviour
    Choose how hotspot behavior when hovered.
15. Tooltip Text
    Insert text that shown on the tooltip when tour hovered.
16. Hover Theme
    Choose hover theme to be used.
17. Tooltip Position
    Position of tooltips.
18. Hover balloon min-width
    Define the minimum width for the balloon.
19. Hover balloon max-width
    Define maximum width for the balloon.