{"id":6552,"date":"2025-03-07T14:53:39","date_gmt":"2025-03-07T13:53:39","guid":{"rendered":"https:\/\/www.art3xpo.com\/?p=6552"},"modified":"2025-03-18T16:07:42","modified_gmt":"2025-03-18T15:07:42","slug":"editor-ui","status":"publish","type":"post","link":"https:\/\/www.art3xpo.com\/en\/editor-ui\/","title":{"rendered":"Customize the User Interface of a Gallery using the UI Editor"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

< Back to Help Center<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Customize the User Interface of a Gallery<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

In this tutorial, you will explore h<\/span>ow to modify the look of your Art Gallery using the User Interface (UI) Editor. The <\/span>“Editor UI<\/b>“<\/strong> allows you to edit the main elements of the gallery that are visible to end users and customize its style.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Accessing the Editor UI Feature<\/strong><\/span><\/h4>

To begin, click on “My Art Gallery<\/strong><\/b>“from the main menu on the left. Select the gallery and click on “Editor UI<\/strong><\/b>“.<\/p>

\"1-ART3XPO-How-To-Art-Gallery-EditorUI-EditorUI\"<\/a><\/p>

The first room of your 360\u00b0 gallery will open. All around, on every side and corner, you will see different components and options available to be displayed in your gallery.<\/span><\/p>

Elements of the UI<\/strong><\/b><\/span><\/p>

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

\"2-ART3XPO-How-To-Art-Gallery-EditorUI-Functions\"<\/a><\/p>

Room Preview<\/strong><\/b> (1<\/strong><\/b>)<\/span><\/p>

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\u00a0<\/span>choose to hide it, show it minimized, or keep it always open by default.<\/span><\/p>

Menu\u00a0<\/strong><\/b>(2<\/strong><\/b>)<\/p>

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:<\/p>

\"3-ART3XPO-How-To-Art-Gallery-EditorUI-Menu\"<\/a><\/p>

“Icon<\/strong><\/b>“: Show\/hide the Hotspot icons.<\/p>

“Measures<\/strong><\/b>“: <\/b>Show\/hide the measurements in the gallery.<\/p>

“Auto Rotation<\/strong><\/b>“: <\/b>Automatically rotate the room’s view. You can set the speed and the time of inactivity before rotation starts.<\/p>

“Device Orientation<\/strong><\/b>“: <\/b>Allows users to move around the gallery by tilting their smartphone. It uses the device’s gyroscope to simulate a real gallery experience.<\/p>

“Web VR<\/strong><\/b>“: <\/b>Enables the viewer to see the gallery in virtual reality (VR).<\/p>

“Annotations<\/strong><\/b>“: 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”).<\/p>

“Presentation<\/strong><\/b>“: <\/b>Start an automatic presentation of the gallery. This must first be set up under “My Art Gallery<\/strong><\/b> > Presentation<\/strong><\/b>“.<\/p>

“Share<\/strong><\/b>“: <\/b>Configure sharing options for the gallery or the current position via social media or links.<\/p>

“Main Form<\/strong><\/b>“: Add a contact form inside the gallery.<\/p>

“Join Meeting<\/strong><\/b>“: <\/b>Join an existing meeting and set a password for user access.<\/p>

“Start Live Session<\/strong><\/b>“: <\/b>Start a new live session with other users.<\/p>

“Custom Icons<\/strong><\/b>“: Add extra buttons with custom code or links in the settings.<\/p>

Room List<\/strong><\/b> <\/b>(3<\/strong>)<\/p>

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.<\/span><\/p>

\"4-ART3XPO-How-To-Art-Gallery-EditorUI-RoomList\"<\/a><\/p>

Audio<\/strong><\/b> <\/b>(4<\/strong><\/b>)<\/p>

Set audio options for the gallery.<\/p>

Annotation Title and Description<\/strong><\/b> <\/span>(5<\/strong><\/b>)<\/p>

Displays the information for each room.\u00a0 As mentioned earlier, these details should be added in the “Room<\/strong><\/b>” tab under “Contents<\/strong><\/b>“.<\/p>

Main Information<\/strong><\/b> <\/b>(6<\/strong><\/b>)<\/p>

Modify the display options for the gallery title and room names.<\/p>

“Comments<\/strong><\/b>“: Enable comments in the gallery, allowing users to leave feedback.<\/p>

“Multiple<\/strong><\/b> View<\/strong><\/b> Rooms<\/strong><\/b>“: Display the same environment in different modes (e.g., day\/night view).<\/p>

Language Settings<\/strong><\/b> <\/span>(7<\/strong><\/b>)<\/p>

Enables the language switcher and lets you choose the default language.<\/p>

Map & Floorplan<\/strong><\/b> <\/span>(8<\/strong><\/b>)<\/p>

Allows you to display and modify the gallery’s map, which can be a physical or street map from Google Maps\u00ae, as well as floorplans. A map must be set as a floorplan under “My<\/b> Art<\/b> Gallery<\/b> > <\/b>Maps<\/b>“.<\/p>

Logo<\/strong><\/b> (9<\/strong><\/b>)<\/p>

Upload your logo and adjust its display settings.<\/p>

Bottom Right Icons<\/strong><\/b> (10<\/strong><\/b>)<\/p>

“Location<\/b>“: Show a map by pasting a Google Maps code or another map provider.<\/p>

“Media<\/b>“: Upload an image or video.<\/p>

“Contact<\/b> Icons<\/b>“: Add and display Facebook Messenger or WhatsApp icons for direct user communication.<\/p>

“Compass<\/b>“<\/span>: Display the North view (requires a pre-set map and room orientation).<\/p>

Avatar Video<\/strong><\/b> (11<\/strong><\/b>)<\/p>

Choose to show or hide the avatar video and modify its size and position.<\/p>

Bottom Left Corner<\/strong><\/b> <\/span>(12<\/strong><\/b>)<\/p>

In the lower-left corner, you’ll find a circle with arrows labeled “Nav Control”, which enables precise mouse-based navigation.<\/p>

Next to it, there are seven icons:<\/p>

“Voice<\/b> Control<\/b>“: Enables\/disables voice control (useful in Web VR mode).<\/p>

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

“Slideshow<\/b>“<\/span>: Enables a slideshow (e.g., a collection of paintings) within the gallery.<\/p>

“3D<\/b> View<\/b>“: Displays a 3D version of the gallery (requires a pre-set 3D view).<\/p>

“Custom<\/b> Icons<\/b>“: Configure custom icons with links or custom code.<\/p>

Top Toolbar<\/strong><\/b> <\/b>(13<\/strong><\/b>)<\/p>

\"5-ART3XPO-How-To-Art-Gallery-EditorUI-UIItemList\"<\/a><\/p>

“UI<\/strong><\/b> Item<\/strong><\/b> List<\/strong><\/b>“: 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.<\/p>

“Font<\/strong><\/b> Settings<\/strong><\/b>“: Customize font styles for the gallery.<\/p>

“Default<\/strong><\/b> Marker<\/strong><\/b> Style<\/strong><\/b>“<\/span>: Change the type, style, and appearance of all markers in the gallery.<\/p>

“Default<\/strong><\/b> Hotspot<\/strong><\/b> Style<\/strong><\/b>“: Customize the default style for hotspots.<\/p>

“Presets<\/strong><\/b>“<\/span>: Save, import, and apply pre-designed visual templates.<\/p>

“Tooltip<\/strong><\/b>“: Enable or disable tooltips for hotspots and markers.<\/p>

Once you have made all the desired changes, go to the top-right corner and click “Save<\/strong><\/b>” to apply your updates.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Other tutorials<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\t\n\n\t\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\n\n\t\t\t\t
\n\n\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\n\n\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\n\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t

\n\t\t\t\tAdd a 3D Painting (Augmented Reality)<\/a>\n\t\t\t<\/h2>\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\tLearn how to add an Artwork in 3D (Painting, sculpture, object or photo) and show it in Augmented Reality\t\t<\/div>\n\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\n\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\n\t\t\t\t\t\t\t\t\t\n\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\n\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\n\n\t\t\t\t
\n\n\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\n\n\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\n\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t

\n\t\t\t\tCreate a new Room<\/a>\n\t\t\t<\/h2>\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\tLearn how to set up a new room within your gallery by following these steps. You can use predefined templates or upload your own 360-degree images to customize your space.\t\t<\/div>\n\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\n\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\n\t\t\t\t\t\t\t\t\t\n\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\n\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\n\n\t\t\t\t
\n\n\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\n\n\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\n\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t

\n\t\t\t\tAdd a Painting to your Gallery using advanced options<\/a>\n\t\t\t<\/h2>\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\tDiscover all the ways and advanced display options to showcase, explain, and make your paintings interactive\t\t<\/div>\n\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\n\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\n\t\t\t\t\t\t\t\t\t\n\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\n\t\t\t\t\t\n\t\t\t\t\t\t\t<\/div>\n\n\t\t\t\t\t\t\t\n\t\t\t\t<\/div>\n\n\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t