How to design a website in Zoho Backstage

Hero Section

Set up the Hero section 


Capture the attention of website visitors with the Hero section by showing a quick glimpse of what your event is offering. The Hero section is the top section of the Home page. Add and arrange the elements in this section as per your preference, by editing the Hero section from to the Design tab.

Modify the date, time, and venue elements



 
  1. Go to Design > Website, from the Dock. 
  2. Click 'Edit Website' to open the Website Builder.
  3. Hover over the date, time, and venue elements in the Hero section.
  4. Click the Settings icon []. The Date, time, and venue panel will be displayed.
  5. Use the respective toggles for the elements to show or hide them in the Hero section.
  6. Modify the size of all the elements in the Widget size field.
  7. Change the format for the date and time in the Format field.
  8. Manage the icons by enabling, disabling, or modifying their design.
    1. Optional: Pick icons from the default Icon Library or upload one from your local system.
  9. Select a color option for the text of the date, time, and venue elements.

Add an event countdown timer




  1. Go to Design > Website, from the Dock. 
  2. Click 'Edit Website' to open the Website Builder.
  3. Enable the countdown element in the Hero section on the website.
    1. Click the Settings icon [] in the Hero section. The Hero section settings panel will appear.
    2. Enable the Event countdown toggle. The countdown element will appear in the Hero section.
  4. Modify the layout and other aspects of the event countdown element.
    1. Click the Settings icon [] for the countdown element in the Hero section. The Countdown settings panel will appear.
    2. You can enable the Countdown title toggle to include text at the top of the countdown element.
    3. Modify layout, text color, text size, and more to change the way the countdown is displayed.
    4. Select an option in the Timer display preference dropdown to choose how the display should look like when the countdown is over or after the event has ended.
    5. Pick an option from the Count down to section to indicate what the timer should count down to. You can choose to count down to one of the following options: event start date, a custom date, or the start or end date for ticket sales for a particular ticket category.

Set up a slider for top page sections

Add a slider for the top section of each webpage to display more information in one space. This will be displayed on the website as well as the attendee mobile app. For instance, adding a background image or video to the Home page's header section will give potential guests a visual preview of what is on the page or what will happen at your event.



  1. Click the Slider settings icon []. The Slider settings panel will appear.
  2. Click the Slides tab.
    1. Click the Add Slide button. New slides will be added to the top section and will be listed in the Slides tab.
  3. Click the Customize tab.
    1. Enable the Arrows toggle. Expand this option to set design and color settings for arrows.
    2. Enable the Slide navigator toggle. Expand this option to design, alignment, and color settings for the slide navigator.
    3. Enable the Auto slide toggle. Expand this option to set a delay time for slides and also set if slides should be paused when hovered upon.
  4. Select an option in the Transition dropdown to choose what animation should appear between each slide.
  5. Enable the Equal height for all slides toggle. All slide will be resized to the height of the largest slide based on the size or number of elements each slide has.
  6. Enable the Fit slider to screen toggle to ensure that only the Slider in the Hero section fits the entire screen.

Edit a slide


  1. Click the Edit icon [] for a slide in the Slides tab.
  2. Click the Customize tab.
    1. Use the arrangement, size, and alignment options in the Section layout area for the elements in the section.
    2. Turn on the toggle button in the Elements section to select the elements you want to add.
  3. Click the Manage items tab.
    1. Click and drag the elements to rearrange them.

Hide a slide


  1. Click the Hide icon [] associated with a slide in the Slides tab. The slide will be hidden.
  2. Click the icon again to unhide the slide.

Note: You can't hide a slide if you only have one slide in the section.

Add a background for a slide

For the website


  1. Click the  icon for a slide in the Slides tab.
  2. Click the Background option.
  3. Select the Website tab.
    1. Select the Color tab and pick a color and set the opacity.
    2. Or, select the Image tab and upload an image. Edit the image by modifying elements like opacity or overlay. Modify the fit and position as needed.
    3. Or, select the Video tab and enter the video's URL. Use options that are displayed in this tab to choose how the video should be displayed.
      Note: You can paste a YouTube video URL or a public Zoho Docs video URL.
  4. Click Close when done.

Note: The alternate image option when adding a video as a background serves as a fallback image which will be shown if the video does not load on mobile interfaces.

For the mobile


  1. Click the  icon for a slide in the Slides tab.
  2. Click the Background option. By default the section background settings applied in the website will be use for mobile interfaces as well.
  3. Deselect the Use website background for the mobile interfaces checkbox if you want to have a different background for your mobile browser.
    1. Select the Color tab and pick a color and set the opacity.
    2. Or, select the Image tab and upload an image. Edit the image by modifying elements like opacity or overlay. Modify the fit and position as needed.
    3. Or, select the Video tab and enter the video's URL. Use options that are displayed in this tab to choose how the video should be displayed.
      Note: You can paste a YouTube video URL or a public Zoho Docs video URL.

Note: The alternate image option when adding a video as a background serves as a fallback image which will be shown if the video does not load on mobile interfaces.

Supported image formats

JPG           JPEG            PNG
GIF           WEBP
 

Image size limit

Less than 5MB
 

Image dimensions

1440x760 pixels at 72dpi
 

Supported video formats

YouTube           

Delete a slide


  1. Click the  icon for a slide in the Slides tab.
  2. Click the Delete option. The slide will be deleted.

Note: You can't delete a slide if you only have one slide in the section.

Sliders with multiple slides is a paid feature enabled based on your subscription plan.

Embed media

Embed event-related media in the header section of the Home page. This will get potential guests interested in your event when they visit the website.


 
  1. Go to Design > Website, from the Dock. 
  2. Click 'Edit Website' to open the Website Builder.
  3. Click the Settings icon []. The Hero section settings panel will appear.
  4. Enable the Primary media or the Secondary media toggle. A place holder for media will appear in the Hero section.
  5. Click the Add media link in the placeholder. The Add media panel will appear.
    1. Add image: Click the Image tab and upload an image. You can hyperlink the image to any of the following: another page on the website, external URL, a speaker's profile, information on a sponsor, details for a session, event listing page of your portal, or the registration form with a ticket class automatically selected along with an applied promotional code, if any.
    2. Add video: Select the Video tab and enter a video URL. This video must be a public YouTube or Vimeo link and will load with the audio when played.
    3. Embed code: Select the Embed tab and paste your iframe code.
  6. Select an option from the Media size dropdown in the Hero section settings panel.
  7. Click Close.

Note:
  1. The Primary media toggle enables you to add media that can be made the focal point in the Hero section. Modifying the order of elements on the Hero section does not affect the primary media.
  2. The Secondary media toggle allows you to add smaller media. This media will be group together with other elements in the Hero section and can be moved when reordering elements in the Hero section.

Supported media formats

JPG           JPEG            PNG
GIF           

Image media size limit

Less than 5MB

Image media dimensions

720x360 pixels at 72dpi

Supported video media formats

YouTube            

      Create. Review. Publish.

      Write, edit, collaborate on, and publish documents to different content management platforms.

      Get Started Now


        Access your files securely from anywhere

          Zoho CRM Training Programs

          Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.

          Zoho CRM Training
            Redefine the way you work
            with Zoho Workplace

              Zoho DataPrep Personalized Demo

              If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.

              Zoho CRM Training

                Create, share, and deliver

                beautiful slides from anywhere.

                Get Started Now


                  Zoho Sign now offers specialized one-on-one training for both administrators and developers.

                  BOOK A SESSION







                              Quick LinksWorkflow AutomationData Collection
                              Web FormsEnterpriseOnline Data Collection Tool
                              Embeddable FormsBankingBegin Data Collection
                              Interactive FormsWorkplaceData Collection App
                              CRM FormsCustomer ServiceAccessible Forms
                              Digital FormsMarketingForms for Small Business
                              HTML FormsEducationForms for Enterprise
                              Contact FormsE-commerceForms for any business
                              Lead Generation FormsHealthcareForms for Startups
                              Wordpress FormsCustomer onboardingForms for Small Business
                              No Code FormsConstructionRSVP tool for holidays
                              Free FormsTravelFeatures for Order Forms
                              Prefill FormsNon-Profit

                              Intake FormsLegal
                              Mobile App
                              Form DesignerHR
                              Mobile Forms
                              Card FormsFoodOffline Forms
                              Assign FormsPhotographyMobile Forms Features
                              Translate FormsReal EstateKiosk in Mobile Forms
                              Electronic Forms
                              Drag & drop form builder

                              Notification Emails for FormsAlternativesSecurity & Compliance
                              Holiday FormsGoogle Forms alternative GDPR
                              Form to PDFJotform alternativeHIPAA Forms
                              Email FormsFormstack alternativeEncrypted Forms

                              Wufoo alternativeSecure Forms

                              WCAG

                                      Create. Review. Publish.

                                      Write, edit, collaborate on, and publish documents to different content management platforms.

                                      Get Started Now







                                                        You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.




                                                            Manage your brands on social media


                                                              • Desk Community Learning Series


                                                              • Digest


                                                              • Functions


                                                              • Meetups


                                                              • Kbase


                                                              • Resources


                                                              • Glossary


                                                              • Desk Marketplace


                                                              • MVP Corner


                                                              • Word of the Day


                                                              • Ask the Experts


                                                                Zoho Sheet Resources

                                                                 

                                                                    Zoho Forms Resources


                                                                      Secure your business
                                                                      communication with Zoho Mail


                                                                      Mail on the move with
                                                                      Zoho Mail mobile application

                                                                        Stay on top of your schedule
                                                                        at all times


                                                                        Carry your calendar with you
                                                                        Anytime, anywhere




                                                                              Zoho Sign Resources

                                                                                Sign, Paperless!

                                                                                Sign and send business documents on the go!

                                                                                Get Started Now




                                                                                        Zoho TeamInbox Resources





                                                                                                  Zoho DataPrep Demo

                                                                                                  Get a personalized demo or POC

                                                                                                  REGISTER NOW


                                                                                                    Design. Discuss. Deliver.

                                                                                                    Create visually engaging stories with Zoho Show.

                                                                                                    Get Started Now








                                                                                                                        • Related Articles

                                                                                                                        • Hero Section

                                                                                                                          Overview The hero section is the top area of the landing page on your event website. This guide explains how to customize the hero section to create an impactful first impression for your event visitors. Sliders with multiple slides is a paid feature ...
                                                                                                                        • Walls.io

                                                                                                                          Walls.io lets you create customized social walls or feeds to engage microsite visitors, drum up conversations about your event, and encourage your audience to connect with you using social media. Use Walls.io to embed social media feeds that span an ...
                                                                                                                        • Footer Section

                                                                                                                          Overview Customize the footer of your event website to match your brand, improve navigation, and display key information or links. Accessing the Footer Settings Navigate to Design > Website from the Dock. Click Edit Website to open the Website ...
                                                                                                                        • Webpage Sections

                                                                                                                          Overview The Website Sections guide helps you understand how to build and manage the structure of your event website in Zoho Backstage. You can add various prebuilt sections like text, media, speakers, sponsors, tickets, venue details, and more to ...
                                                                                                                        • Website Settings

                                                                                                                          Manage your website settings to control how people view your event website. Set a favicon Set a favicon to project your event brand. This is a small graphic that will be displayed in the links bar, on the browser tab, in the bookmark list, and in the ...
                                                                                                                          Wherever you are is as good as
                                                                                                                          your workplace

                                                                                                                            Resources

                                                                                                                            Videos

                                                                                                                            Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                                                                                                            eBooks

                                                                                                                            Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                                                                                                            Webinars

                                                                                                                            Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                                                                                                            CRM Tips

                                                                                                                            Make the most of Zoho CRM with these useful tips.



                                                                                                                              Zoho Show Resources