The Design tab: panels, live preview and saving

The Design tab is where you change how a tour looks and what its player offers: a list of panels on the left, the settings of the open panel next to it, and a live preview of the tour on the right. This page describes the tab itself. The settings inside each panel have a page of their own, listed under The panels.

Who can use it. The owner, and a collaborator whose role includes the Design Tab: by default an Admin. Editors and Viewers do not see the tab. Saving needs the Settings Tab as well, which an Admin has by default: see Choose what Viewers, Editors and Admins can open. Every plan has the tab.

Basic and Advanced. The Basic view lists 11 of the 16 panels and shows the main options inside them. Advanced lists all 16 and every option. Switching the view hides options and never changes a saved value.

When visitors get a change. The preview shows an edit at once. Visitors get it after you click Save & Render, or after Publish changes when the tour uses Draft Workflows.

The panels

The left column lists the panels in four groups. A panel opens in the column next to the list. A panel you have not opened is not drawn yet, so the tab opens quickly; once opened it keeps what you typed while you move between panels.

The Basic view leaves out Pan and zoom controls, Mobile navigation, Hotspots setup, Media window and Floorplan minimap.

Panel list

Choose which panel to edit. The tab opens on Themes, in both views.

Where: Design tab (Design tab > Themes), the list on the left. On a phone the list is one row of buttons that scrolls sideways, below the preview. Basic and Advanced view. Default: Opens on Themes. An address that ends in ?panel= and a panel's id opens that panel instead; the Designs gallery uses this to send you to Themes after you choose a design. A panel the Basic view hides is not opened from an address. What it does: Shows one panel at a time. Switching to Basic while an Advanced-only panel is open moves you to Themes. What visitors see: Nothing changes by opening a panel. Only a changed option does. Related: What each tab in the tour editor does.

Module dot

A small green dot beside a panel's name shows that its switch is on.

Where: Design tab (Design tab > Themes), beside the names of Top nav bar – dropdown, Top nav bar – multi menu, Bottom nav – thumbnails, Side nav – list menu, Icon bar, Pan and zoom controls, Intro page, Info and media panel and Floorplan minimap. Basic and Advanced view. Default: Follows each panel's own switch, whose default you find on the panel's page. What it does: It reads the panel's switch as it is now, including an edit you have not saved. A grey dot means the switch is off. Panels with no switch (Themes, Global aesthetics, Transitions and cameras, Branding, Mobile navigation, Hotspots setup, Media window) show no dot. What visitors see: A part with its switch off is not in the tour.

The live preview

The preview on the right is the real tour, drawn by the same player visitors use, with your unsaved edits applied. It is for you only. Visitors and the Preview tab show what is saved.

Preview state

Says how far the preview is behind your edits.

Where: Design tab (Design tab > Themes), at the top right of the page header. Basic and Advanced view. Default: Preview is live What it does: One of five states: Preview is live, Updating… while a color or font change is on its way, Preview out of date when a change needs the tour to be drawn again, Refreshing… while it is drawn, and Preview couldn't update when a request failed. A change to a hotspot's look, a color or a font reaches the preview without a reload; a change to a layout, a bar or a template makes the preview draw a copy of the tour from your edits after a short pause. What visitors see: Nothing. The preview is the editor's own copy; it is never shown to visitors. Related: The Auto box and the Refresh preview button.

Refresh preview

Redraws the preview now, from your unsaved edits.

Where: Design tab (Design tab > Themes), beside the preview state. It shows only while the state is Preview out of date or Preview couldn't update. Basic and Advanced view. Default: Not shown while the preview is live. What it does: Stores your edits as a draft for 30 minutes and loads the preview from it. The draft is yours alone and is ignored once the tour's saved design changes. What visitors see: Nothing. Related: The Auto box.

Auto

Redraws the preview by itself a moment after you stop editing.

Where: Design tab (Design tab > Themes), the checkbox at the right of the preview state. Basic and Advanced view. Default: On. What it does: With it on, a change that needs a redraw waits about a second after your last edit, then redraws. With it off the preview stays as it is and shows Preview out of date until you click Refresh preview. The choice is kept in this browser, not on your account. What visitors see: Nothing. Related: The Refresh preview button.

Unsaved changes

Warns that the tour's saved design differs from what you see.

Where: Design tab (Design tab > Themes), a word with an orange dot at the top right of the page header, left of the preview state. Basic and Advanced view. Default: Not shown until you change something. What it does: Appears while any option differs from the saved tour. While it shows, following a link to another page of Panoramr asks Leaving this page discards your unsaved changes. Leave anyway?, and closing or reloading the tab brings up your browser's own warning. The browser's Back button and logging out are not asked about, so save first. What visitors see: Nothing, until you click Save & Render. Related: The Save & Render button.

Device view

Shows the preview as a phone, a tablet or a computer would.

Where: Design tab (Design tab > Themes), three round buttons above the preview: Desktop View, Tablet View and Mobile View. Basic and Advanced view. Default: Desktop View What it does: Sets the preview's screen to 375 by 812 pixels for Mobile View, 768 by 1024 for Tablet View, or a window the size of the space available for Desktop View. The tour reacts as it would on that screen, so the phone's own bars appear in Mobile View. The size is scaled down to fit and never enlarged. What visitors see: Nothing changes; this only changes what you look at. Visitors on a real phone get the layout their screen asks for. Related: Mobile navigation.

Desktop size

Chooses how large the desktop preview is drawn before it is fitted to the space.

Where: Design tab (Design tab > Themes), three buttons beside the device buttons: Small (1x), Medium (1.5x) and Large (2x). They show in Desktop View only. Basic and Advanced view. Default: Medium What it does: Draws the tour on a desktop screen that many times the size of the space, then scales it down to fit. A larger setting shows the tour as on a bigger monitor, with the picture smaller. What visitors see: Nothing changes. Related: The device buttons above.

Saving

Save & Render

Stores every panel's options and draws the preview again from the saved tour.

Where: Design tab (Design tab > Themes), the blue button at the top right. Basic and Advanced view. Default: Not applicable. What it does: Saves all the panels' options in one go. The button says Saving... while it works, and the preview reloads from the saved tour afterwards. If the tour does not use Draft Workflows, the tour's stored page is made again with the next visit. It needs the Settings Tab as well as the Design Tab; without it the save is refused with a 403 error. A tour that is being handed to a new owner cannot be saved until the move is done. What visitors see: The new design on their next visit, unless the tour uses Draft Workflows: then they keep the published version until you click Publish changes. Related: When do my changes show?, Draft Workflows.

Standard look notice

Tells you that visitors see the free Default look while the editor shows a Pro theme.

Where: Design tab (Design tab > Themes), a bar under the tab row. Basic and Advanced view. Not shown for a free trial tour. Default: Not shown. What it does: Appears when the tour wears a Pro theme and neither a paid plan nor hosting lets visitors have it. The bar names the theme, says the editor still shows it, and links to Host this tour, which opens the hosting part of the Publish tab. What visitors see: The free Default look with the tour's own content, until the tour is hosted or its owner is on a plan with Pro themes. Related: Pro themes.

My Tours

Goes back to the list of your tours.

Where: Design tab (Design tab > Themes), a button in the page header. Not shown on a free trial guest tour. Basic and Advanced view. Default: Not applicable. What it does: Opens My Tours. If you have unsaved changes, it asks first whether to leave. What visitors see: Nothing.

Troubleshooting

Save & Render answers with a 403 error. Your role has the Design Tab but not the Settings Tab. Ask the tour's owner to tick both for your role on the Client Workspaces page.

The preview does not show my edit. Look at the state at the top right. If it says Preview out of date, click Refresh preview. If you switched Auto off, the preview waits for you.

Visitors do not see what I saved. The tour may use Draft Workflows (look for Draft mode active above the tabs): click Publish changes. Otherwise see When do my changes show?.

A panel is missing. You are in the Basic view, which hides five panels. Switch to Advanced with the switch at the right end of the tab row.

The preview is dark or empty after I changed a panel. Click Refresh preview. If the state says Preview couldn't update, check your connection and try again; your edits are still in the panels.