Add Graphics to Navigation Box

Last Updated: November 22nd, 2020

Add Graphics to Navigation Box

1. Open your venue and click the Home page (or equivalent name; i.e. Lobby).

2. Click the UI Design tab on the left-hand side.

3. Hover your cursor over the navigation panel you wish to add a graphic to.

Tip: You can also open up any image panel on the left-hand side menu as shown below.

4. Select the Edit Style button for the corresponding image panel.

5. Click the Select button under the Image section.

5. Click the Upload button in the media library.

6. Navigate to your file folder and select the appropriate graphic. Select the Open button in your file folder.

Caution: Your graphic image file should be a PNG file with a transparent background. Otherwise, your image may not appear correctly. If you use a PNG file with a white background, then you can use the Image Background slider as shown below.

Tip: The default image background percent is 50% which keeps a background on the image in the venue. In the examples below, we will keep 100% transparency.

Wait for the image to upload in the media library. Once uploaded, the image is now in your venue and can be reused on any page using step seven below.

7. Click the Insert button with the recently uploaded graphic highlighted.

8. Repeat steps five through seven for the Hover Over Image section if you desire that design choice.

Pictured: Original Background Image

Pictured: Hover Over Image

Tip: You can use the same graphic and change the background color for the Hover Over Image or you can also change the image itself. In the example above, we could make the orange a red color when hovering over.

9. Scroll down the Edit Image Panel and check to ensure the Label is correct.

Tip: As a design choice, you can keep the Label empty and edit the label over your graphic in a graphic editor (i.e. Photoshop).

10. Check the URL in the Edit Image Panel to ensure the graphic will lead to the intended page.

11. Check Position in the Edit Image Panel to ensure your image is sized appropriately.

Note: Position is equivalent to size in this section.

Tip: The default graphic size in each contemporary venue is 350px width by 250px height.

Warning: Making image files too large can disrupt the user experience on any device in your venue. We recommend you test each page after uploading custom graphics and sizes.

12. Once you finalize each detail, scroll down the Edit Image Panel and click Save.

13. Review your final changes and repeat each step for each grid graphic panel as desired.

Note: The preview image above has the text SESSIONS on the image file rather than the Label feature.

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.