Icon bar settings in the Design tab

The icon bar is a bar of round buttons over the tour: previous and next room, zoom, play, full screen, map and more. This page lists every setting of the Icon bar panel (Design tab > Icon bar) in the Design tab, in the order the panel shows them. To choose which bars a tour has, start with Customize the player's bars, sidebar and gallery.

Who can use it. The owner and, by default, an Admin collaborator can open the Design tab; it is not open to Editors or Viewers. Every plan has the icon bar. In the Basic view the panel shows Enable icon bar and the Icons tab; the Advanced view adds the Placement and Style tabs. A tour on a Free plan that wears a Pro theme and has never been hosted shows visitors the free Default look, which has the icon bar off: see What visitors get.

When visitors get a change. The preview beside the panels shows it at once. Visitors get it after you click Save & Render, or after Publish changes when the tour uses Draft Workflows (My changes do not show for visitors).

Turn the bar on

Enable icon bar

The switch at the top of the panel puts the bar in the tour. It starts off.

Where: the Icon bar panel (Design tab > Icon bar), the switch at the top. Basic and Advanced view. Default: off What it does: Adds the bar to the tour's player. The other settings of the panel only matter while it is on. A dot beside Icon bar in the list of modules shows that it is on. What visitors see: A bar of round buttons over the picture. With the switch off they see no bar. On a screen 768 pixels wide or narrower the bar is not drawn when the tour has the phone's own bars, which the default settings give it. Related: Mobile navigation and the phone layout.

Where the bar sits

These settings are on the Placement tab, in the card Layout. The tab is in the Advanced view only.

Style

Choose the shape of the bar: a pill with a gap around it, or a strip along a whole edge.

Where: the Icon bar panel (Design tab > Icon bar), Placement tab > card Layout > Style. Advanced view. Default: Floating pill (floating) What it does: Floating pill is a rounded bar with a gap round it. Full width is a strip that runs the whole length of the edge you choose in Position: across it at the bottom or the top, down it at the left or the right. Any style can go at any edge. What visitors see: A pill stands in the middle of its edge. At the foot of the player it stands above the thumbnails of Bottom nav – thumbnails when they are showing, and above the closed handle of the Info and media panel. A strip at the foot pushes the thumbnails up so that it does not cover them. A bar at the top starts under the top nav bars. Related: Position, Margin (px).

Position

Choose which edge of the player the bar is on.

Where: the Icon bar panel (Design tab > Icon bar), Placement tab > card Layout > Position. Advanced view. Default: Bottom (bottom) What it does: Puts the bar at the Bottom, Top, Left or Right of the player. At the left or the right the buttons stand one above the other instead of side by side. What visitors see: The bar at that edge. At a side it makes way for the side menu when that is open on the same side. Related: Style.

Margin (px)

Set the gap between a floating pill and the edge it is at.

Where: the Icon bar panel (Design tab > Icon bar), Placement tab > card Layout > Margin (px). Advanced view. Default: 10 pixels What it does: A number from 0 to 100. The field shows only while Style is Floating pill; a strip has no gap. What visitors see: The pill that many pixels from its edge. The thumbnails and the Info and media panel keep that gap too when the pill stands above them. Needs: Style set to Floating pill. Related: Style, Position.

Which buttons the bar has

These settings are on the Icons tab, in the card Icons in the bar. The tab is there in both views. The card has a row for each button: a handle, its picture, its name and a switch. The card's heading says how many are on, for example 3 on.

Icons in the bar

The order of the rows is the order of the buttons. Drag a row, or press the up and down arrows beside it, to move it.

Where: the Icon bar panel (Design tab > Icon bar), Icons tab > card Icons in the bar. Basic and Advanced view. Default: prev, next, zoom, play, grid, move, vr, fullscreen, accessibility, info, floorplan, map, lang, listRooms What it does: Sets the order of the buttons. The rows are named as the same buttons are in the other bars: an icon has one name everywhere. A row that is switched off keeps its place in the list. What visitors see: The buttons that are on, in that order: from left to right in a bar at the bottom or the top, from top to bottom in a bar at a side. Field of View Zoom and Pitch Movement are a pair of buttons each, and a pair stays together in its row's place. Related: Icon lists of the other bars.

Prev Navigation

Goes to the previous room.

Where: the Icon bar panel (Design tab > Icon bar), Icons tab > Icons in the bar > Prev Navigation. Basic and Advanced view. Default: on What it does: Adds a button with the tooltip Previous Room. What visitors see: A press moves to the room before the one on show, in the order of the tour's panoramas. From the first room it goes to the last. Related: Next Navigation.

Next Navigation

Goes to the next room.

Where: the Icon bar panel (Design tab > Icon bar), Icons tab > Icons in the bar > Next Navigation. Basic and Advanced view. Default: on What it does: Adds a button with the tooltip Next Room. What visitors see: A press moves to the room after the one on show. From the last room it goes to the first. Related: Prev Navigation.

Field of View Zoom

Zooms the picture in and out.

Where: the Icon bar panel (Design tab > Icon bar), Icons tab > Icons in the bar > Field of View Zoom. Basic and Advanced view. Default: on What it does: Adds a pair of buttons: Zoom Out (Wider FOV) and Zoom In (Narrow FOV). What visitors see: Holding a button zooms until it is let go, with the mouse or a finger. Related: Restrict how far visitors can look and zoom.

Autorotate

Starts and stops the tour turning by itself.

Where: the Icon bar panel (Design tab > Icon bar), Icons tab > Icons in the bar > Autorotate. Basic and Advanced view. Default: off What it does: Adds a play and pause button with the tooltip Toggle Auto-Rotation. What visitors see: The button shows a play triangle while the picture is still and a pause sign while it turns. Pressing it starts or stops the turning, and the button goes back to the play sign when a visitor presses on the picture with the mouse. At the start it shows what the tour is doing; for a visitor who asked their device for less motion the tour does not turn by itself. Related: Kiosks and autorotate.

Room Pictures

Opens a window with a picture of every room.

Where: the Icon bar panel (Design tab > Icon bar), Icons tab > Icons in the bar > Room Pictures. Basic and Advanced view. Default: on What it does: Adds a button that opens the Media Window on its pictures. Its tooltip is the Modal button label of the Media window panel, View all Panos to start with. What visitors see: The window of room pictures. Needs: Room Pictures must also be on in the Foot links of Side nav – list menu (it is on to start with): the button is left out of the bar when that link is switched off. Related: Customize the player's bars.

Pitch Movement

Looks up and down.

Where: the Icon bar panel (Design tab > Icon bar), Icons tab > Icons in the bar > Pitch Movement. Basic and Advanced view. Default: on What it does: Adds a pair of buttons: Pitch Up and Pitch Down. What visitors see: Holding a button tilts the view up or down until it is let go. Related: Field of View Zoom.

VR Mode

Enters virtual reality.

Where: the Icon bar panel (Design tab > Icon bar), Icons tab > Icons in the bar > VR Mode. Basic and Advanced view. Default: on What it does: Adds a goggles button with the tooltip Enter VR. What visitors see: A press loads the VR part of the player and starts VR. How it behaves in a headset was not tried for this page; VR mode and Cardboard says what the player sends. Related: VR mode and Cardboard.

Fullscreen

Fills the screen with the tour.

Where: the Icon bar panel (Design tab > Icon bar), Icons tab > Icons in the bar > Fullscreen. Basic and Advanced view. Default: off What it does: Adds a button with the tooltip Toggle Fullscreen. What visitors see: A press fills the screen with the tour, and a second press leaves full screen; the picture on the button changes with it. Where the browser does not allow full screen the button does nothing.

Accessibility Mode

Opens the text version of the tour.

Where: the Icon bar panel (Design tab > Icon bar), Icons tab > Icons in the bar > Accessibility Mode. Basic and Advanced view. Default: off What it does: Adds a button with the tooltip Accessibility Linear View. What visitors see: A press reloads the page as the text version of the tour, the same address with ?accessibility=true. Related: Accessibility settings.

Room Info

Shows what the tour says about the room on show.

Where: the Icon bar panel (Design tab > Icon bar), Icons tab > Icons in the bar > Room Info. Basic and Advanced view. Default: off What it does: Adds a button with the tooltip Information that opens the Media Window on the room's text and media, and the tour's media. What visitors see: In a room with no text and no media, and with none for the whole tour, the button is dimmed and cannot be pressed; its tooltip reads No Information Available. Needs: The room's Description, or media attached to the room or the tour. Related: The Info & Media Panel.

Floor Plan

Opens the tour's floor plan.

Where: the Icon bar panel (Design tab > Icon bar), Icons tab > Icons in the bar > Floor Plan. Basic and Advanced view. Default: off What it does: Adds a button with the tooltip View Floorplan. What visitors see: A press opens the floor plan in the Media Window. A tour with no floor plan shows no button. Needs: A floor plan on the Floor Plans tab (in the Advanced view). Related: Floor plans and minimaps.

Map

Opens the map of where the panoramas were taken.

Where: the Icon bar panel (Design tab > Icon bar), Icons tab > Icons in the bar > Map. Basic and Advanced view. Default: off What it does: Adds a button with the tooltip View Map. What visitors see: A press opens the map. A tour in which no panorama has a position shows no button. Needs: A position on at least one panorama. Related: Geolocation and OpenStreetMap.

Language Switcher

Lets a visitor change the language of the tour.

Where: the Icon bar panel (Design tab > Icon bar), Icons tab > Icons in the bar > Language Switcher. Basic and Advanced view. Default: Nothing is saved for a new tour. The switch reads off, but until it has been switched on and off once a tour in more than one language still shows the globe. What it does: Adds a globe button with the tooltip Change Language. What visitors see: The globe opens a list of the tour's languages by code (EN), and choosing one reloads the tour in that language. A tour with one language shows no globe. Needs: At least one added language. Related: Make a tour in several languages.

List All Rooms

Opens a list of every room by name.

Where: the Icon bar panel (Design tab > Icon bar), Icons tab > Icons in the bar > List All Rooms. Basic and Advanced view. Default: off What it does: Adds a button with the tooltip View All Rooms. Switching it on also gives the Media Window its Room list tab. What visitors see: The list of rooms in the Media Window. Related: Media window.

Colors of the bar

These settings are on the Style tab, which is in the Advanced view only.

Use your own colours

Colors the icon bar apart from the rest of the player.

Where: the Icon bar panel (Design tab > Icon bar), Style tab > Use your own colours. Advanced view. Default: off What it does: While it is off the bar wears the colors and the glass effect of Global aesthetics. Switching it on shows the three fields below. What visitors see: With it on, the bar and its buttons in the colors below; with it off, the tour's global colors. Related: Brand colors.

Interface Icon Color

The color of the buttons' pictures.

Where: the Icon bar panel (Design tab > Icon bar), Style tab > Interface Icon Color. Advanced view. Default: #ffffff What it does: Sets the color of every icon in the bar. It counts only while Use your own colours is on. What visitors see: The icons in that color. Needs: Use your own colours on.

Action Bar Background Color

The color of the bar itself.

Where: the Icon bar panel (Design tab > Icon bar), Style tab > Action Bar Background Color. Advanced view. Default: #07077d What it does: Sets the bar's color. The bar is drawn with the glass opacity of Global aesthetics, 60 percent to start with, so the picture shows through. It counts only while Use your own colours is on. What visitors see: The bar in that color. Needs: Use your own colours on. Related: Global aesthetics.

Hover Brightness

How much a button lightens under the pointer.

Where: the Icon bar panel (Design tab > Icon bar), Style tab > Hover Brightness. Advanced view. Default: 25 percent What it does: A slider from 0 to 100. It sets how much white is laid over a button while the pointer is on it. It counts only while Use your own colours is on. What visitors see: The button lighter by that share when the pointer is over it. Needs: Use your own colours on.

A setting with no control

Info image

A picture that older tours kept for the Room Info button. The panel has no field for it any more.

Where: Nowhere in the Design tab. The panel's field for it went when Room Info began to open the Media Window. Default: none What it does: Nothing is shown from it. A tour that had saved a picture here still holds it, and the asset library names it "info image" where it is used. What visitors see: Nothing. Room Info opens the room's text and media, not this picture. A picture of the whole tour goes in the tour's media on the Tour tab. Related: Room Info.

Troubleshooting

There is no icon bar in my tour. Check Enable icon bar. On a screen 768 pixels wide or narrower the bar is not drawn while the phone's bars are in use. On a Free plan, a tour in a Pro theme that has never been hosted shows the free Default look, which has the bar off. A change that is not saved or published does not reach visitors yet.

A button I switched on is missing. Floor Plan needs a floor plan, Map needs a panorama with a position, and Language Switcher needs a tour in more than one language. Room Pictures is left out when its link is off in the side menu's Foot links.

A button is dimmed and does nothing. Room Info is dimmed in a room that has no text or media, and no media for the whole tour.