How to design a website in Zoho Backstage

Website Design

Design a branded website that goes with the goal of your event. Apply a theme for the website pages that is compatible with mobile devices. Add a logo, media, and favicon to get started on designing your event website.

Choose a theme

A beautifully-designed website captivates attendees and entices them to have a look at your event. With Zoho Backstage, you have control over your website's appearance by picking out a theme that best fits you.


 
  1. Go to Design > Website, from the Dock. 
  2. Click 'Edit Website' to open the Website Builder.
  3. Click Themes on the left pane of the Website Builder. The Themes panel will display.
  4. Select an option for the website from the panel.
  5. Choose a focal color by selecting from the color options that are associated with your selected theme.

Set a logo

Set a logo as a symbol or insignia for your event.
 


  1. Go to Design > Website, from the Dock. 
  2. Click 'Edit Website' to open the Website Builder.
  3. Click Upload Logo on the left side of the navigation bar. The Choose image pop-up will be displayed.
  4. Choose the logo image that you have ready by uploading a new image, selecting from the Design Library, or picking from the cloud.
  5. Click Select. The logo will be displayed in the left side of the navigation bar.

Note: You can hyperlink the logo image to connect to another page in the website, external URL, or the event listing page of your portal. To do this, edit the image.
 

Supported logo formats

JPG           JPEG            PNG
GIF

Logo size limit

Less than 1MB

Logo dimensions

340x120 pixels at 72dpi



  1. Hover over the existing logo to the left of the navigation bar in the Website Builder. 
  2. Click the Edit icon. The Edit image dialog box will appear.
  3. Click the Change button to replace the image.
  4. Choose an image and click Select.

Note: You can also crop the image when you edit it.
 


  1. Hover over the existing logo to the left of the navigation bar in the Website Builder.
  2. Click the Edit icon. The Edit image dialog box will appear.
  3. Click the Delete button.
  4. Click Delete in the dialog box that appears.
    Note: This action will delete both the main and the alternate logo.

Add a page

Use a custom page to put up a whole new space to include content unavailable in the website's default pages. Modify aspects of the page, such as the name and URL, in just a few simple steps. For example, you could make a page where event participants can download email templates to request permission from their company for them to attend the event or ask them to sponsor their ticket.
 
You can add a custom page, insert  sections, and customize the text on this page. You can also connect the page to a link in the navigation bar or to a button on any page. You can also make pages exclusive by setting visibility levels so that only a certain group of people can access them.


 
  1. Go to Design > Website, from the Dock. 
  2. Click 'Edit Website' to open the Website Builder.
  3. Click the Pages tab on the sidebar.
  4. Click the Add page button.
  5. Enter the page name.
  6. Complete the page URL for that page which will be displayed in the address bar when a user visits that page.
  7. Select an option from the Page visibility permission section to set up who can access the selected page:
    1. Public: Select this option to allow any website visitor to access this page.
    2. Signed-in visitors: Select this option to allow only visitors who have logged in to your website to access this page
    3. Exclusive event participants: Select this option to allow access to specific event participant groups such as ticket holders from particular ticket classes, sponsors, speakers, and exhibitors from specific exhibitor categories.
  8. Click Save.
 
Note: When you create a page, the link for it will be automatically created and mapped in the navigation bar. You can manage the link settings from the navigation bar.

Custom pages is a paid feature enabled based on your subscription plan.

Manage section content

Arrange sections to organize the content in a page. Conceal sections when certain information is not needed without having to delete the section.

Also, include default-provided sections found in the initial website design in any other place on the same page or even on a different page on your website. 


 
  1. Go to Design > Website, from the Dock. 
  2. Click 'Edit Website' to open the Website Builder.
  3. Hover on a section, click the Move Up [  ] or the Move Down icons [  ] to reorder sections, and click the  Hide icon [ ] to hide it.
  4. Modify the titles and one-line description text for any sections in the pages of the website. All text displayed in these placeholders are sample text.
    Note: Modifying the event name or description will automatically update this information in the Event Details tab also.

Note: Double-click on any text to bring up the rich text editor which you can use to format your text.

Delete a section

Remove a section from the website design by clicking on the Delete icon for the section.



Add a button

Add more buttons to provide extra options for website visitors or to replace any hidden ones. Buttons can be linked to pages on the website, an external URL, or the portal's event listing page.

Modify the design of the button to suit your theme. Buttons that are grouped together can be designed at the same time or modified individually.


 
  1. Go to Design > Website, from the dock. 
  2. Click 'Edit Website' to open the Website Builder.
  3. Hover over any button in the website and click the Settings icon [] for that area. The Button group settings panel will appear.
  4. Select the Arrange tab.
  5. Select the Add new button button. A new button will be created on the page and listed in the Button group settings panel.

Note:
  1. When you create a button beside an existing button, this becomes a button group. Design settings applied to the button group will modify all the buttons in this group.
  2. If a button is linked to a page that is hidden, the button is also automatically hidden in the live website. For example, if you hide the Agenda page from all non-logged-in users. These visitors will not be able to see the Agenda page and the View Agenda button on the Home page.


 
  1. Go to Design > Website, from the dock. 
  2. Click 'Edit Website' to open the Website Builder.
  3. Hover any button and click Edit. The Button settings panel will appear. The Button details tab will be selected.
    1. Pick a button type from the default list which will be linked to existing pages or actions in the website.
    2. Enter the button text that will be displayed as the button label.
    3. Alternatively, select Custom in the Button type drop down to create your own button. Select an option to link the button.

Style a button



  1. Go to Design > Website, from the Dock. 
  2. Click 'Edit Website' to open the Website Builder.
  3. Hover any button and click Edit. The Button settings panel will appear.
  4. Select the Button design tab.
  5. Choose a button and a border style.
  6. Modify the color options.

Note: You can edit a button separately by clicking the Edit option for a button. Alternatively you can also edit a button group to apply the design changes to all the buttons in that group.