Module 18: Venue

Updated: December 6, 2020

Module 18: Venue

Welcome to Module 18: Venue in our Engagez Fundamentals Series. Follow along with our virtual assistant, Katie, as she explains the Venue option within the UI Design tab.

1. Open your venue and click on the UI Design tab. In this article and video, we will be focusing on the first option called Venue.

2. The UI Design tab is used to visually edit your venue. This means that you can hover over any existing panel to make edits or add in new panels. When you hover over a panel, a light blue box will appear around its border. When you click it, you will see the name of the panel in the upper left corner along with a dropdown menu. 

3. To access the Venue editing, you can either use the list of actions under the UI Design tab or you can click the upper left-hand corner of your venue. This will cause the blue border and name of the panel to appear.

4. To edit the style of the venue, click the Edit Style option from the dropdown menu.

Note: When you edit the style of venue, the changes will be reflected throughout the entire venue, not just the page to which you made the edits.

5. We will first start by looking at the Venue Settings. Here, you can change the Desktop Background to appear the same in all your pages. It can be an image, color, or video. If you want each page to individually have a different image background, then do not use this feature. Instead, change the image in the Edit Style > Location of that page. This section also allows you to change the Font Family by typing your font of choice.

The section below allows you to alter your Brand Colors. These will appear as color options when designing the color of the font or the color of a panel across the venue. 

6. Another section, Panel Settings, sets defaults for creating panels. If you want to update all the panels in your venue, click the Check to update all panels with these when saved option. If you want to leave some panels different, we recommend not checking this option. 

In the Panel Title section, use paddings to give your titles whitespace. For example, if we increase the top (T) to 50, we will create a 50-pixel difference between the top of the panel and the title of the panel. R = Right, L = Left, T = Top, B = Bottom.

This section of the Edit Venue Style has many features to customize your event. Add colors by inserting the RGB or the Hex code, which will change the tab colors across your venue. 

One thing to note is that the Unselected Background will look different from the Selected Background, and Selected Background has two different types: an underline and a fill-in.

You can see this in the example image from a booth. Under the Staff tab, because it is selected, there is a pink line.

In the Sessions area, you can see a different type of tab that also reflects the Selected Background color. This time it appears in the interaction panel that is usually found next to the session video. As a result, you’ll want to choose a color that looks good for both types of tabs.

Note: When you’ve finished making all the style changes, remember to hit Save at the bottom of the Edit Style panel before moving on. 

7. The next option in the UI Design Venue dropdown menu is Layout.

Here is where you can decide whether you want an Ad-hoc or Columnar format. This is the difference between our open template and our grid template, and most admins choose this before they start. Ad-hoc allows you to freely move panels around within a location while columnar only allows you to move panels within a predefined set of widths and heights.

You can also choose Page Height. It can either be fixed or unfixed so it is scrollable. Please note, if you choose a scrollable option, some backgrounds with fixed positioning will look strange. (See the lobby image in the shared media library.)

Note: These features can radically change the layout and look of your venue, so we recommend choosing these looks first before starting out.

8. The last option from the Venue dropdown menu is Custom HTML and CSS. 

Here, you can add custom code. This is also where you may see the code for our technical support if you have it enabled.

Caution: If you copy one venue to create another, all the custom CSS and HTML will stay. This means that if you are planning on copying the venue, you may want to copy the non-HTML version first before adding HTML code.

Still have questions? Visit the Engagez Support venue or email us at support@kb.engagez.com. If you’ve purchased an implementation package, please contact your implementation representative through Skype or email.