Customize the User Interface of a Gallery

In this tutorial, you will explore how to modify the look of your Art Gallery using the User Interface (UI) Editor. The Editor UI allows you to edit the main elements of the gallery that are visible to end users and customize its style.

Accessing the Editor UI Feature

To begin, click on „My Art Gallery„from the main menu on the left. Select the gallery and click on „Editor UI„.

1-ART3XPO-How-To-Art-Gallery-EditorUI-EditorUI

The first room of your 360° gallery will open. All around, on every side and corner, you will see different components and options available to be displayed in your gallery.

Elements of the UI

For each element, you can choose whether to show or hide it, as well as customize additional settings (color, position, etc.). Explore them all:

2-ART3XPO-How-To-Art-Gallery-EditorUI-Functions

Room Preview (1)

This option allows visitors to navigate the gallery not just by clicking a marker but also by selecting a different room from this slider. Clicking on it opens a pop-up window, where you can choose to hide it, show it minimized, or keep it always open by default.

Menu (2)

The menu provides users with several options. You can select each item to modify its settings or choose whether to display it in the gallery menu:

3-ART3XPO-How-To-Art-Gallery-EditorUI-Menu

Icon„: Show/hide the Hotspot icons.

Measures„: Show/hide the measurements in the gallery.

Auto Rotation„: Automatically rotate the room’s view. You can set the speed and the time of inactivity before rotation starts.

Device Orientation„: Allows users to move around the gallery by tilting their smartphone. It uses the device’s gyroscope to simulate a real gallery experience.

Web VR„: Enables the viewer to see the gallery in virtual reality (VR).

Annotations„: Show/hide a title and description for each room and customize their position and colors. This can be useful to describe an exhibition or a room’s content (titles and descriptions must be added in the „Room“ tab under „Contents“).

Presentation„: Start an automatic presentation of the gallery. This must first be set up under „My Art Gallery > Presentation„.

Share„: Configure sharing options for the gallery or the current position via social media or links.

Main Form„: Add a contact form inside the gallery.

Join Meeting„: Join an existing meeting and set a password for user access.

Start Live Session„: Start a new live session with other users.

Custom Icons„: Add extra buttons with custom code or links in the settings.

Room List (3)

Allows you to show or hide a list of rooms inside the gallery. Clicking the settings icon lets you drag and drop rooms, group them into categories, or rearrange their order.

4-ART3XPO-How-To-Art-Gallery-EditorUI-RoomList

Audio (4)

Set audio options for the gallery.

Annotation Title and Description (5)

Displays the information for each room.  As mentioned earlier, these details should be added in the „Room“ tab under „Contents„.

Main Information (6)

Modify the display options for the gallery title and room names.

Comments„: Enable comments in the gallery, allowing users to leave feedback.

Multiple View Rooms„: Display the same environment in different modes (e.g., day/night view).

Language Settings (7)

Enables the language switcher and lets you choose the default language.

Map & Floorplan (8)

Allows you to display and modify the gallery’s map, which can be a physical or street map from Google Maps®, as well as floorplans. A map must be set as a floorplan under „My Art Gallery > Maps„.

Logo (9)

Upload your logo and adjust its display settings.

Bottom Right Icons (10)

Location„: Show a map by pasting a Google Maps code or another map provider.

Media„: Upload an image or video.

Contact Icons„: Add and display Facebook Messenger or WhatsApp icons for direct user communication.

Compass: Display the North view (requires a pre-set map and room orientation).

Avatar Video (11)

Choose to show or hide the avatar video and modify its size and position.

Bottom Left Corner (12)

In the lower-left corner, you’ll find a circle with arrows labeled „Nav Control“, which enables precise mouse-based navigation.

Next to it, there are seven icons:

Voice Control„: Enables/disables voice control (useful in Web VR mode).

Info Box„: Displays artist/gallery/exhibit information (requires an info box to be set up in the „How to Create Our First Gallery“ tutorial).

Slideshow: Enables a slideshow (e.g., a collection of paintings) within the gallery.

3D View„: Displays a 3D version of the gallery (requires a pre-set 3D view).

Custom Icons„: Configure custom icons with links or custom code.

Top Toolbar (13)

5-ART3XPO-How-To-Art-Gallery-EditorUI-UIItemList

UI Item List„: Displays a summary of all icons/functions. Green items are active, while orange ones are inactive. Clicking an item allows you to modify its settings.

Font Settings„: Customize font styles for the gallery.

Default Marker Style: Change the type, style, and appearance of all markers in the gallery.

Default Hotspot Style„: Customize the default style for hotspots.

Presets: Save, import, and apply pre-designed visual templates.

Tooltip„: Enable or disable tooltips for hotspots and markers.

Once you have made all the desired changes, go to the top-right corner and click „Save“ to apply your updates.

Other tutorials

Erfahre, wie du ein Kunstwerk in 3D (Gemälde, Skulptur, Objekt oder Foto) hinzufügen und in der erweiterten Realität präsentieren kannst.
Erfahre, wie du einen neuen Raum in deiner Galerie einrichtest, indem du diese Schritte befolgst. Du kannst vordefinierte Vorlagen verwenden oder eigene 360°-Bilder hochladen, um den Raum individuell anzupassen.
Entdecke alle Möglichkeiten und erweiterten Anzeigeoptionen, um deine Gemälde zu präsentieren, zu erklären und interaktiv zu gestalten.