# Hotspots setup settings in the Design tab

URL: https://www.panoramr.com/help/design-hotspots-setup
Category: Design and branding
Keywords: hotspots setup, hotspot style, hotspot size, hotspot hover, idle animation, entrance animation, hotspot icons, icon pack, frosted blur, hotspot border, information popup
Last checked: 2026-10-22

Every setting of the Hotspots setup panel in the Design tab: look, size, hover, idle and entrance animation, icons and popup style of every hotspot.

The Hotspots setup panel styles every hotspot in the tour at once: how a hotspot is drawn, how big it is, how it moves, which icon each type wears, and how a navigation arrow and an information popup are built. This page lists every setting of the Hotspots setup panel (Design tab > Hotspots setup) in the **Design** tab, in the order the panel shows them. A single hotspot's own text, target and variant are set in the **Hotspots** tab ([Hotspot types and settings](https://www.panoramr.com/help/hotspot-types)); the hotspot color alone is **Hotspot colour** in **Global aesthetics**; [Hotspot looks and presets](https://www.panoramr.com/help/hotspot-looks-and-presets) says which of the three presets does what.

**Who can use it.** The owner and, by default, an Admin collaborator can open the Design tab. Every plan has the panel. It is in the **Advanced** view only; the **Basic** view does not list it. 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 standard hotspot.

**When visitors get a change.** The preview row at the top of the **Look** tab, and the preview beside the panels, show 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)).

## Look

These settings are on the **Look** tab. At the top, a dark card called **Preview** draws one hotspot of each type (Info, Video, Image, Audio, Shop, Link, Navigation) with the same stylesheet as the published tour, so what it shows is what visitors get. If the icon color and the background color you chose are hard to tell apart, a warning above the tabs says so, with a button (**Use white icons** or **Use black icons**) that fixes it.

### Icon pack

Set the colors, blur, hover effect and the five icons from a ready-made pack with one click.

**Where:** the Hotspots setup panel (Design tab > Hotspots setup), **Look** tab > card **Icon pack**. Advanced view. The card is there only when the site has packs.
**Default:** none chosen
**What it does:** A click on a pack sets the hotspot colors, blur and opacity, the hover effect and the icons of the five types for the whole tour. The settings stay editable afterwards. The chosen pack is highlighted.
**What visitors see:** The hotspots in the pack's colors and icons.
**Related:** [Upload your own hotspot icons](https://www.panoramr.com/help/customizing-hotspot-icons-with-svg-and-png-uploads).

### Preset

Choose a ready-made bundle of the style settings below.

**Where:** the Hotspots setup panel (Design tab > Hotspots setup), **Look** tab > card **Preset** > **Preset**. Advanced view.
**Default:** **Classic solid** (`svg`)
**What it does:** Choosing a preset sets **Icon style**, **Border**, **Frosted blur** and **Background opacity** to its values: **Classic solid** (solid, no border, full background), **Classic bordered** (solid with a border), **Modern line** (line icons, a clear background, a border), **Glassmorphism** (solid icons on a 45 percent background with a border and the frosted blur) and **Marzipano original** (the old picture icons). **Custom...** means the style is hand-tuned; the list also shows your saved presets, marked `My preset`. Changing any of the four style settings by hand switches the list to **Custom...**. **Save preset** appears for **Custom...** or a saved preset, to keep the current style as a preset of yours; **Delete** removes a saved preset, and a tour that used it goes back to **Classic solid**. A saved preset also carries the size, hover effect, idle animation and icons, and the hotspot color if one is set; it does not carry the entrance animation.
**What visitors see:** The hotspots drawn in the preset's style.
**Related:** [Hotspot looks and presets](https://www.panoramr.com/help/hotspot-looks-and-presets).

### Icon style

Choose how the icon inside the badge is drawn.

**Where:** the Hotspots setup panel (Design tab > Hotspots setup), **Look** tab > card **Style** > **Icon style**. Advanced view.
**Default:** **Solid** (`svg`)
**What it does:** **Solid** fills the icons, **Line** draws them as outlines (a **Line** badge fills in on hover), and **Legacy PNG** uses the old picture icons, which the player does not recolor. Choosing one by hand sets **Preset** to **Custom...**.
**What visitors see:** Icons drawn that way. The old picture look has no tooltip or simple information variant, so such a hotspot opens as the classic box.
**Related:** **Preset**.

### Size

Make every hotspot smaller or larger.

**Where:** the Hotspots setup panel (Design tab > Hotspots setup), **Look** tab > card **Style** > **Size**. Advanced view.
**Default:** **Standard** (`standard`)
**What it does:** **Small**, **Standard** or **Large**. They scale the badge by 1, 1.5 and 2. However small the badge is drawn, its tap target is at least 44 pixels.
**What visitors see:** Hotspots of that size in every room.

### Border

Draw a ring around each hotspot badge.

**Where:** the Hotspots setup panel (Design tab > Hotspots setup), **Look** tab > card **Style** > **Border**. Advanced view.
**Default:** `off`
**What it does:** Adds a border in the hotspot's accent color. Switching it by hand sets **Preset** to **Custom...**.
**What visitors see:** A ring around the badge.

### Frosted blur

Blur what is behind each hotspot badge.

**Where:** the Hotspots setup panel (Design tab > Hotspots setup), **Look** tab > card **Style** > **Frosted blur**. Advanced view.
**Default:** `off`
**What it does:** Blurs the picture behind the badge by 12 pixels (an icon pack can set another amount). It shows most when the background is not fully opaque. Switching it by hand sets **Preset** to **Custom...**.
**What visitors see:** A frosted-glass badge.
**Related:** **Background opacity**.

### Background opacity

How solid the badge behind the icon is.

**Where:** the Hotspots setup panel (Design tab > Hotspots setup), **Look** tab > card **Style** > **Background opacity**. Advanced view.
**Default:** `100` percent
**What it does:** A slider from 0 to 100. At 0 only the icon (and a border, if on) is drawn. Changing it by hand sets **Preset** to **Custom...**.
**What visitors see:** A badge more or less see-through.

## Motion

These settings are on the **Motion** tab, in the card **Interaction**.

### Hover effect

What a hotspot does when the pointer is over it.

**Where:** the Hotspots setup panel (Design tab > Hotspots setup), **Motion** tab > card **Interaction** > **Hover effect**. Advanced view.
**Default:** **Enlarge (scale up)** (`enlarge`)
**What it does:** One of **None**, **Border highlight**, **Soft glow**, **Enlarge (scale up)**, **Enlarge with border**, **Enlarge with glow**, **Float / bounce**, **Wiggle / shake**, **Quick spin**, **Colour invert** or **Radiating pulse**.
**What visitors see:** The effect while the pointer rests on a hotspot that is not open. It applies to devices with a pointer; a touch screen never shows a stuck hover.

### Idle animation

A slow movement on every hotspot to draw the eye.

**Where:** the Hotspots setup panel (Design tab > Hotspots setup), **Motion** tab > card **Interaction** > **Idle animation**. Advanced view.
**Default:** **None** (`none`)
**What it does:** **None**, **Attention ring**, **Gentle float** or **Slow breathe**. The animations run out of step, so the hotspots do not move as one, and a hotspot stops its own animation while its popup is open.
**What visitors see:** The motion on every hotspot. A visitor who asked their device for less motion sees none.

### Entrance animation

How a room's hotspots appear when the visitor arrives.

**Where:** the Hotspots setup panel (Design tab > Hotspots setup), **Motion** tab > card **Interaction** > **Entrance animation**. Advanced view.
**Default:** **None** (`none`)
**What it does:** **None**, **Fade in** or **Pop in**. The hotspots wait until the picture has finished its transition, then appear one after another.
**What visitors see:** The hotspots arriving that way in each room. A visitor who asked for less motion sees them at once.

## Icons

These settings are on the **Icons** tab. The card **Icons by type** picks the icon of each type; the card **Components** picks how a navigation arrow and an information popup are built. Both cards are in the **Advanced** view.

### Info

The icon on information hotspots.

**Where:** the Hotspots setup panel (Design tab > Hotspots setup), **Icons** tab > card **Icons by type** > **Info**. Advanced view.
**Default:** Info Circle (`info`)
**What it does:** A list with the icons suggested for the type (Info Circle, Info Solid, Search, Star Highlight), then every other built-in icon under `More icons`, then your uploaded icons under `Custom icon`.
**What visitors see:** That icon on every information hotspot.
**Related:** [Upload your own hotspot icons](https://www.panoramr.com/help/customizing-hotspot-icons-with-svg-and-png-uploads).

### Video

The icon on video hotspots.

**Where:** the Hotspots setup panel (Design tab > Hotspots setup), **Icons** tab > card **Icons by type** > **Video**. Advanced view.
**Default:** Play Video (`play`)
**What it does:** Suggested: Play Video, Play Circle, Video Camera, Panorama Camera; then the same `More icons` and `Custom icon` lists.
**What visitors see:** That icon on every video hotspot.

### Audio

The icon on audio hotspots.

**Where:** the Hotspots setup panel (Design tab > Hotspots setup), **Icons** tab > card **Icons by type** > **Audio**. Advanced view.
**Default:** Audio Track (`audio`)
**What it does:** Suggested: Audio Track, Narrator Speaker, Spatial Headset; then the same `More icons` and `Custom icon` lists.
**What visitors see:** That icon on every audio hotspot.

### Link

The icon on web link hotspots.

**Where:** the Hotspots setup panel (Design tab > Hotspots setup), **Icons** tab > card **Icons by type** > **Link**. Advanced view.
**Default:** External Link (`weblink`)
**What it does:** Suggested: External Link, Chain Link, Arrow Right, Geomap Pin; then the same `More icons` and `Custom icon` lists.
**What visitors see:** That icon on every web link hotspot.

### Navigation arrow (icon)

The icon inside the arrow that takes a visitor to another room.

**Where:** the Hotspots setup panel (Design tab > Hotspots setup), **Icons** tab > card **Icons by type** > **Navigation arrow**. Advanced view.
**Default:** Navigation Chevron (`nav-chevron`)
**What it does:** Suggested: Navigation Chevron, Double Chevron, Navigation Arrow, Navigation Triangle; then the same `More icons` and `Custom icon` lists.
**What visitors see:** That symbol on every link hotspot.
**Related:** the Navigation arrow in **Components**.

### Navigation arrow (component)

How a link hotspot is built.

**Where:** the Hotspots setup panel (Design tab > Hotspots setup), **Icons** tab > card **Components** > **Navigation arrow**. Advanced view.
**Default:** **Standard floating arrow** (`nav-classic`)
**What it does:** **Standard floating arrow** or **Frosted glass chevron ring**: two different pieces of markup the player loads for the link hotspots.
**What visitors see:** A floating arrow, or a frosted-glass ring with a chevron.
**Related:** the Navigation arrow in **Icons by type**.

### Information popup

How an information hotspot opens when its own variant is not set.

**Where:** the Hotspots setup panel (Design tab > Hotspots setup), **Icons** tab > card **Components** > **Information popup**. Advanced view.
**Default:** **Collapsible content box** (`classic`)
**What it does:** **Collapsible content box**, **Lightweight hover tooltip** or **Immersive full-screen modal**. It is the tour's default: a hotspot that has its own variant in the **Hotspots** tab keeps it.
**What visitors see:** A box, a tooltip or a full-screen window when they open an information hotspot.
**Related:** [Hotspot types and settings](https://www.panoramr.com/help/hotspot-types).

## Troubleshooting

**I cannot see Hotspots setup.** It is in the **Advanced** view only: switch the view at the top of the editor.

**My changes to a hotspot's color do nothing.** The color alone is **Hotspot colour** in **Global aesthetics**, not here. An icon pack also sets colors.

**The hotspots look different from the preview row.** A hotspot with its own **Color Override** or **Variant** in the **Hotspots** tab keeps it. A tour on a Free plan in a Pro theme that was never hosted shows the Default look.

**The Preset list says Custom.** You changed one of the four style settings by hand. Pick a preset again, or use **Save preset** to keep your style.