# Pan and zoom controls settings in the Design tab

URL: https://www.panoramr.com/help/design-pan-and-zoom-controls
Category: Design and branding
Keywords: pan and zoom, zoom buttons, arrow buttons, view controls, on-screen controls, play pause button, controls position, arrow buttons to turn the picture, on screen arrows
Last checked: 2026-10-22

Every setting of the Pan and zoom controls panel in the Design tab: where it is, what it starts as, what it does and what visitors see.

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](https://www.panoramr.com/help/customizing-the-ui-top-navigation-bottom-bar-and-sidebars).

**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](https://www.panoramr.com/help/customizing-the-ui-top-navigation-bottom-bar-and-sidebars#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](https://www.panoramr.com/help/when-do-changes-show)).

## 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](https://www.panoramr.com/help/design-icon-bar), 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](https://www.panoramr.com/help/configuring-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](https://www.panoramr.com/help/adding-custom-logos-and-brand-colors-to-the-tour-player).

### 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.