How to build a complete showroom for a three-storey house: video cover, 360 scenes, connection points, floor plans, template, mobile version and publishing.
Full tutorial in Spanish: connect the 360 views, draw an area on the floor plan, create a unit and link its virtual tour. Set the area color to update automatically for available, reserved or sold units.
Spanish-language tutorial: configure a domain in Viewroom3D, create a CNAME record in Hostinger, wait for DNS propagation and verify the tour opens with HTTPS.
Spanish-language tutorial: create pages with HTML and CSS from ChatGPT, set up a map with points, and connect your presentation through the Enter button, the menu, and the starting-page settings. Includes five examples and a mobile preview.
Watch every action on a replica of the editor: upload resources to the Library, turn them into scenes, connect them, add transitions, prepare a floor plan, and publish.
Automatic playback
▣ Panel › Scenes
ScenesPresentationMore
1 thing to review◉ View showroomPublished · link only ▾
Scenes⁘ MapPlans
↗
⌾▣▹
1 · 360 2
▦ LibraryChoose a file
↑ Upload files
All 55FLAT 26VIDEO 22360° 7
2 selectedCreate scenes
Upload resourcesAdd images, panoramas, and videos to the Library
×
⇧Drop files hereor choose them from your device
sala-360.jpg8.4 MB100%
cocina-360.jpg7.1 MB72%
transicion.mp412.8 MB38%
3 filesUploading…
4 connected scenes · 21 loose− 100% + · Fit
▶ Video transitionPick the clip that plays between the two scenes
Choose their appearance, preview them, or edit their code.
ContactDark · Classic ▾◉ </>
QRGlass plate ▾◉ </>
GalleryMinimal ▾◉ </>
ValuesLight ▾◉ </>
✦ AI Assistant×
qwen3.7-flash
Describe the result you want and the assistant prepares changes for the template.
Make the cover more editorialArrange the widgetsImprove the contrast
Publish template×
Choose who can use this version of the template.
PrivateOnly appears inside your project.
PublicBecomes available in your template library.
Publish
Step 1 / 30Template demonstration with manual controls
01
Open Presentation
From the project panel, open Presentation. System templates and every template created for the showroom live here.
02
Click “Create template”
Open “Your templates” and click “Create template”. Give it a clear name; you can reuse and edit it later.
03
Learn the three areas
Pages are on the left, the canvas is in the center, and the inspector is on the right. The top bar holds devices, history, AI, and publishing.
04
Open the Cover
Select Cover in the page rail. This fixed view is the first screen visitors see.
05
Check desktop, tablet, and mobile
Use the three center buttons to change the editing width. Each view keeps the same widgets and lets you review their composition.
06
Open “Add widget”
Click “Add widget” to open the catalog. Widgets are grouped by use, but any widget can be placed on any page.
07
Filter Cover widgets
Choose Cover to see logo, title, text, Enter, menu, music, loading, full screen, and QR.
08
Add the logo
Click “Project logo”. The widget appears on the canvas and stays selected so you can move it or change its style.
09
Add a title
Add Title and enter the project name or a short phrase. The inspector controls text, style, and alignment.
10
Add “Enter 360°”
Place the button that takes visitors from the Cover into the Tour. Its purpose should be clear immediately.
11
Drag the widget
Grab the selected widget and move it around the canvas. Guides help keep the composition aligned.
12
Resize it
Drag one of the frame handles to adjust width and height. Make sure the content is not clipped.
13
Edit in the inspector
With the widget selected, use the right panel to change its content and component-specific options.
14
Choose a style
Open Style and try one of the available variants. Every widget keeps its purpose while its appearance changes.
15
Choose where it appears
Turn widget visibility on or off for desktop, tablet, and mobile when a composition needs a simpler version.
16
Create a new page
Click “+” beside Pages, enter a name, and create the page. It appears in the rail ready for widgets.
17
Design the Tour
Open the fixed Tour page. The canvas changes to the showroom and lets you build navigation around every scene.
18
Explore Tour widgets
In Add widget, choose Tour. You will find navigation, contact, project data, free content, and strips.
19
Add a scene selector
Place Scene selector so visitors can jump between views from a collapsible list.
20
Add the floor plan
Add Floor plan. The minimap shows the current location and opens the full floor-plan navigation.
21
Add a contact strip
Place Contact strip to combine a call to action, form, and WhatsApp in one clear band.
22
Edit one specific scene
Open Edit by scene when one view needs its own composition. The badge shows how many scenes have special adjustments.
23
Open Settings
Settings chooses whether the showroom starts at Cover or Tour and defines the shared visual identity.
24
Choose a palette
Try Graphite, Copper, Forest, Navy, Burgundy, or Gold. You can also set the primary and text colors.
25
Set the typography
Choose Modern, Elegant, Classic, Neutral, or Geometric. The selection is applied consistently across the template.
26
Configure the modals
Open Modals to choose the appearance of Contact, QR, Gallery, Progress, Values, Unit details, and Location.
27
Test without selecting
Hold Alt and click a widget to try its action—navigate or open a modal—without changing the selection.
28
Ask the AI for help
Open AI Assistant, describe the result you want, and review the proposal before applying it to the template.
29
Check autosave and history
Wait until the status says Saved. Use Undo and Redo to move through recent changes without losing work.
30
Publish the template
Click Publish, choose Private or Public, and confirm. The new version becomes available with that visibility.
This demonstration never changes a project. You can pause, go back, or choose any point on the timeline.
Measurement cookies
We would like to measure how this page gets used with Microsoft Clarity, so we can fix what gets stuck. Say no and the script is never downloaded; everything works the same.