Pan and zoom controls settings in the Design tab

The pan and zoom controls are a small set of on-screen buttons that turn the picture up, down, left and right and zoom it in and out. This page lists every setting of the Pan and zoom controls panel (Design tab > Pan and zoom controls) in the Design tab, in the order the panel shows them. For where the panel sits among the other bars, 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 controls. The panel is in the Advanced view only: in the Basic view the module is not in the list, and what it saved stays in the tour. A tour on a Free plan that wears a Pro theme and has never been hosted shows visitors the free Default look, which puts the bar's position, layout and colors back to the starting values below (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 pan and zoom bar

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

Where: the Pan and zoom controls panel (Design tab > Pan and zoom controls), the switch at the top. Advanced view. Default: off What it does: Shows the buttons over the picture: up, down, left, right, zoom in and zoom out. The other settings of the panel only matter while it is on. A dot beside Pan and zoom controls in the list of modules shows that it is on. What visitors see: A bar of square buttons on the picture. Pressing and holding a button keeps the view moving; letting go lets it slow to a stop. With the switch off the bar is not drawn. The visitor can still drag the picture: this bar is an extra. Related: Icon bar settings, which has its own zoom buttons.

Where the bar sits

These settings are on the Layout tab, in the card Position.

Anchor

Choose which of eight places on the picture the bar is in.

Where: the Pan and zoom controls panel (Design tab > Pan and zoom controls), Layout tab > card Position > Anchor. Advanced view. Default: Center right (center-right) What it does: A square of eight places to choose from: the four corners and the middle of each edge (the middle of the square is not a choice). The choice is saved as one word pair such as bottom-right. The buttons stand one above the other at a corner or a side, and side by side at the top middle and the bottom middle. What visitors see: The bar at that place. At the top it sits below the top nav bar. At the bottom it stands above the thumbnails of Bottom nav – thumbnails where the thumbnails would reach under it, and above the Icon bar when the tour has one; where the thumbnails are a short strip in the middle it stays at the foot. Related: Horizontal layout.

Horizontal layout

Lay the buttons out in a row instead of a column.

Where: the Pan and zoom controls panel (Design tab > Pan and zoom controls), Layout tab > card Position > Horizontal layout. Advanced view. Default: off What it does: Puts the buttons side by side in a rounded strip. The switch shows only while Anchor is one of the four corners; a side or a middle place does not offer it, because the top middle and the bottom middle are already a row. What visitors see: A strip of buttons in the corner instead of a column. Needs: Anchor set to a corner. Related: Anchor.

Which buttons the bar has

These settings are on the Layout tab, in the card Buttons.

Play and pause toggle

Adds a button that stops and starts the automatic turning.

Where: the Pan and zoom controls panel (Design tab > Pan and zoom controls), Layout tab > card Buttons > Play and pause toggle. Advanced view. Default: off What it does: Adds a seventh button after the zoom buttons, with the tooltip Toggle Autorotate. It starts and stops the tour's autorotate. What visitors see: A play or a pause picture, whichever the tour is doing now. It starts as pause when the tour turns by itself at the start, and as play for a visitor who asked their device for less motion. A press starts or stops the turning, and the picture follows when something else starts or stops the turning. Related: Auto-rotate and autoplay for kiosks and displays.

Colors of the bar

These settings are on the Style tab.

Use your own colours

Colors the bar apart from the rest of the player.

Where: the Pan and zoom controls panel (Design tab > Pan and zoom controls), Style tab > Use your own colours. Advanced view. Default: off What it does: While it is off the buttons wear the colors and the glass effect of Global aesthetics, the icons in the tour's icon color. Switching it on shows the three fields below. What visitors see: With it on, the buttons and their icons 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 Pan and zoom controls panel (Design tab > Pan and zoom controls), Style tab > Interface Icon Color. Advanced view. Default: #ffffff What it does: Sets the color of the arrows and the plus and minus. It counts only while Use your own colours is on. What visitors see: The icons in that color. Needs: Use your own colours on.

Controls Background Color

The color of the buttons themselves.

Where: the Pan and zoom controls panel (Design tab > Pan and zoom controls), Style tab > Controls Background Color. Advanced view. Default: #07077d What it does: Sets the color behind each button. It 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 buttons in that color. Needs: Use your own colours on. Related: Global aesthetics.

Hover Brightness

How much a button lightens under the pointer.

Where: the Pan and zoom controls panel (Design tab > Pan and zoom controls), Style tab > Hover Brightness. Advanced view. Default: 25 percent What it does: A slider. It sets how much white is mixed into 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.

Troubleshooting

There are no pan and zoom buttons in my tour. Check Enable pan and zoom bar, then save. The module is in the Advanced view only; click Advanced if you cannot find it. On a Free plan, a tour in a Pro theme that has never been hosted shows the free Default look. A change that is not saved or published does not reach visitors yet.

The bar is in the way of the thumbnails or the Icon bar. Choose another Anchor, or tick Horizontal layout in a corner. At the bottom the bar lifts itself above the thumbnails and the Icon bar where they would meet it.

There is no play and pause button. Switch on Play and pause toggle. It is a seventh button after the zoom buttons.

My colors do nothing. Interface Icon Color, Controls Background Color and Hover Brightness count only while Use your own colours is on.