Zoho Backstage Navigation Bar: Links, Buttons and Design

Zoho Backstage: Managing the Navigation Bar, Links and Buttons

The navigation bar is how visitors move around your Zoho Backstage event website, so it is worth setting up carefully. This guide covers adding and organising links and submenus, setting up buttons such as Register Now, and designing the bar itself, including how the active link is highlighted and coloured. It is based on Zoho's documentation for the navigation bar.

Open the navigation settings

Every task below starts the same way:

  1. From the Dock, go to Design, then Website.
  2. Click Edit Website. The Website Designer opens.
  3. Hover over the navigation bar in the preview and click the Settings icon.
  4. Choose Navigation Links, Navigation Buttons, or the design settings, depending on the task.
Republish after every change. Changes only go live on the event website when you click Republish.

Links and menus

Task How
Add a link or menuIn Navigation Link Settings, click Add Link. Enter a Link Title, then choose Page (an internal page from the drop-down) or External URL (with an optional Open in a new tab). Click Save.
Add a submenuClick the menu icon next to the main menu, choose Add Submenu, and fill in the same details.
Edit a linkClick the menu icon next to it, choose Edit, change the title or destination, and Save.
Move a submenu to the main menuDrag it back into the main menu section, or click the menu icon beside it and choose Move to main menu.
Change the orderDrag the handle beside a link or menu to a new position.
Hide or show a linkClick the eye icon beside it. Blue means hidden, and black means visible.
Delete a linkClick the menu icon beside it, choose Delete, and confirm.
Good to know:
  • The Home page cannot be renamed, hidden, or have its URL changed.
  • Deleting a link only removes it from the navigation bar. The page itself still exists and can be found in the Pages tab in the left pane.
  • If you hide a link or menu, any buttons linked to that page are also hidden across the whole website.

Buttons

Open Navigation Buttons and click Add New Button, then use the Edit icon beside the button. On the Setup tab, choose a Button Type.

Button type What it does
Register NowSends attendees to registration. You can add an optional alternative registration link.
Get in TouchLets visitors contact you with a single click.
Add to CalendarLets attendees save the event date to their own calendar.
Print AgendaLets visitors download or print the schedule.
Get DirectionsShows the event location on an interactive map.
CustomLinks to a page, an external URL (with an option to open in a new tab), a speaker, a session, a sponsor, the event listing page, or tickets. For tickets you can preselect a ticket class and include an access or promo code.
Become a SponsorInvites businesses to partner with or fund the event.
Link a Custom FormLets attendees complete a form for enquiries, feedback, or other purposes.
Become an ExhibitorEncourages companies to showcase products at the event.
Submit AbstractLets people submit abstracts.
Sign InLets users log in to their accounts.
LanguageLets visitors switch between available languages. It needs no extra settings.

Most types also ask for Button Text. Click Save, then Republish. You can reorder buttons by dragging, delete one with its Delete icon, and use Reset to Default to restore the original settings.

Designing a button

On the Design tab of the Button Settings panel you can change:

  • Size: Tiny, Small, or Medium.
  • Style: Filled, Ghost, or Link.
  • Colours: for Filled, the text and background colours (solid or gradient) and an optional border. For Ghost, the text colour and an optional border. For Link, only the text colour.

Designing the navigation bar

Open the Navigation Bar Settings panel from the Settings icon.

Setting Options
Navigation Bar LayoutSix arrangements of logo, links, buttons, and spaces, for example logo then links then buttons, or buttons at one end and the logo at the other.
Active Link StyleHow the current page's link is highlighted: Box, Rhomboid, Pill, Underline, Upperline, or Border.
Submenu Dropdown IconLine Down Arrow, Filled Down Arrow, or Plus.
Menu TransitionSubmenus open on Click or on Hover.

Navigation bar colours

Click Navigation Bar Colors in the same panel to set:

  • Background: the colour of the whole bar.
  • Link Text: the colour of the links.
  • Active Link Background: the background colour behind the current page's link.
  • Active Link Text: the text colour of the current page's link.
  • Shadow: switch it on to add a shadow along the bottom of the bar, and choose its colour.

Click Republish when you have finished.

Related

Need help? As a Zoho Partner serving the UK and Ireland, we can design and set up your Zoho Backstage event website, including navigation, buttons, and branding. Email zoho@1cloudconsultants.com or raise a support request with 1 Cloud Consultants.