Customize the Hero Section on Your Zoho Backstage Event Website

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.


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

Managing Slides

Adding a Slide 


  1. Navigate to Design > Website Design from the Dock.
  2. Click Edit Website. The Website Designer will open.
  3. Hover over the hero section and click the Setting icon associated with it. The Slider Settings panel will appear.
  4. Click Add Slide.
  5. Your slide has been added successfully. Customize it to your requirements.
  6. If your event is in draft state, click Publish to publish your event. If already live, Republish it.

Reordering Slides 


  1. Navigate to Design > Website Design from the Dock.
  2. Click Edit Website. The Website Designer will open.
  3. Hover over the hero section and click the Setting icon associated with it. The Slider Settings panel will appear.
  4. Click the Reorder icon on the left of the slide.
  5. Drag and place as you deem fit.
  6. If your event is in draft state, click Publish to publish your event. If already live, Republish it.

Editing a Slide  


  1. Navigate to Design > Website Design from the Dock.
  2. Click Edit Website. The Website Designer will open.
  3. Hover over the hero section and click the Setting icon associated with it. The Slider Settings panel will appear.
  4. Click the Edit icon associated with a slide. The Slide Settings panel will appear.
  5. Customize the slider as required.

    Section Background 


    1. Click Section Background.
    2. Choose Color, Image, or Video.
    3. For mobile page editing, go to the Mobile tab. Website background options for mobile interface must be disabled to make separate edits for mobile background. 


    4. Choose between Color, Image and Video. 
      1. Color option:
        1. Pick a Background Color and adjust Background Opacity. Color can be either Flat Color or Gradient.
      2. Image option:
        1. Adjust Image Opacity and toggle Image Overlay.
        2. Choose Image Fit Options: Cover, Full Image, or Tile.
        3. Use the Image Positions tool to set the image alignment.
        4. If Image Overlay is enabled, choose Overlay Color and Overlay Capacity.
        5. To change the image, click Change and select from the library or upload a new image.
        6. Clip, crop, flip, or rotate the image as needed.
        7. Click delete to remove the image.
      3. Video option:
        1. Enter the YouTube video thumbnail.
        2. If Video Overlay is enabled, choose Overlay Color and Overlay Capacity.
        3. Enable Loop Video if required.
    5. If you want to go back to the default settings, click Reset to Default. 
    6. Click Publish if the event is in draft status, or Republish if the event is live or running.

    Slide Sections 


    1. Section Layout: Choose from Media Left, Media Right, Media Top, or Media Bottom.
    2. Horizontal Alignment: Choose left, right, or justified.
    3. Vertical Alignment: Adjust as needed.
    4. Media Size: Choose from Tiny, Small, Medium, Large, or Extra Large.

    Adding/Removing Elements 


    1. Navigate to Design > Website Design from the Dock.
    2. Click Edit Website. The Website Designer will open.
    3. Hover over the hero section and click the Setting icon associated with it. The Slider Settings panel will appear. 
    4. Click the Edit icon associated with a slide. The Slide Settings panel will appear.
    5. Go to the Elements section in Customize tab.
    6. Available options include:
      1. Event Name
      2. Event Short Description
      3. Label
      4. Button Group
      5. Event Countdown
      6. Social Handles
      7. Secondary Media
      8. Primary Media
      9. Date/Time
      10. Venue

    Reordering Elements

    1. In the Slide Settings panel, go to the Manage Items tab.
    2. Drag and drop elements to realign them vertically.

    Customizing Slider Controls

    1. Navigate to Design > Website Design from the Dock.
    2. Click Edit Website. The Website Designer will open.
    3. Hover over the hero section and click the Setting icon associated with it. The Slider Settings panel will appear. 
    4. Go to the Customize tab.

    Arrow Settings


    • Enable Arrows if required.
    • Choose the arrow Design:
      • Stroke only with circle cover
      • Filled
      • Simple line arrow with only stroke
      • Simple line arrow with a box filled
    • Choose Arrow Color and Background Color (adjust opacity if required)

    • Enable Slide Navigator if required.
    • Choose the Design: Dots or Dashes.
    • Choose the Alignment of the dots.
    • Choose the Navigator Color (adjust opacity if required).

    Slide Behavior


    • Enable Auto Slide if required and set the delay in seconds.
    • Enable Pause slide on hover if required.
    • Choose the Transition between slides: Fade or Slide.
    • Enable Equal height for all slides if required.
    • Enable Fit slider to screen if required.

    Deleting a Slide 


    1. Navigate to Design > Website Design from the Dock.
    2. Click Edit Website. The Website Designer will open.
    3. Hover over the hero section and click the Setting icon associated with it. The Slider Settings panel will appear. 
    4. Open the menu associated with a slide and click Delete.
    5. Confirm deletion in the dialog box.

    Customizing Elements

    Event Name 


    1. Navigate to Design > Website Design from the Dock.
    2. Click Edit Website. The Website Designer will open.
    3. Hover over the hero section and click the Setting icon associated with the event name.
    4. Choose between:
      • Update text and sync with the 'Event Name' field used across website and other promotions
      • Edit and Format Event Name: Update text and customize formatting style only on the website
    5. To edit the Text:
      Select the text you want to edit and use the following formatting options):



      1. Bold: Make the text bold.
      2. Italic: Apply slanted styling to the text.
      3. Underline: Underline the text.
      4. Strikethrough: Add a line through the text.
      5. Alignment: Align the selected text (e.g., left, center, or right).
      6. Ordered List: Create a numbered list.
      7. Bullet List: Create a bulleted list.
      8. Text Color: Change the color and transparency of the text.
      9. Text Background: Add a background color to the text itself (not the block).
      10. Line Height: Adjust the spacing between lines of text.
      11. Letter Spacing: Modify the spacing between characters.
      12. Text Transform: Change text capitalization (e.g., uppercase, lowercase).
      13. Link: Add a hyperlink to the text.
      14. Horizontal Ruler: Insert a horizontal line between text sections.
      15. Clean: Clear all text formatting without affecting text block properties.

    Location/Date/Time   


    1. Navigate to Design > Website Design from the Dock.
    2. Click Edit Website. The Website Designer will open.
    3. Hover over the hero section and click the Setting icon associated with the location/date/time.
    4. In the Date, Time and Venue panel, enable the Venue toggle for event location. 
    5. Enable the Date and Time toggle to display the event date and time. 
    6. Choose the Widget Size: Small, Medium, Large, Extra Large
    7. To update the Format Type:
      • Click Change to open the customizer format panel.
      • Under Venue Format, type the format.
      • If you need help with tags, click Tags.
      • Click on the markdown to apply it to the venue format editor.
      • If things go wrong, click Reset to Default.
    8. Enable icons if required:
      • Click Icon Design to open the Icon Design panel.



      • Click Calendar Icon Change, Time Icon Change, or Venue Icon Change.
      • Click icon library to pick an icon from the Zoho Backstage library or upload your own.



      • If things go wrong, click Reset to Default.
    9. Change the location Text Color if required (adjust opacity as needed).

    Buttons


    Setup

    1. Navigate to Design > Website from the Dock.
    2. Click Edit Website.
    3. Hover over the hero section and click the Setting icon associated with the button group. The Button Group Settings panel will appear. 
    4. Click the Edit icon next to the button you want to edit.
    5. To add a new button, click Add New Button.
    6. To setup a button, click the Edit icon associated with a button. The Button Settings panel will appear.
    7. Go to the Setup tab.
    8. Choose a Button Type from the dropdown:
      • Register Now: Direct attendees to the registration page.
        • Configure Button Text
        • Set Alternate Registration Link (Optional)
      • Get in Touch: Allow visitors to contact you easily.
        • Configure Button Text
      • Add to Calendar: Allow saving event date to personal calendars.
        • Configure Button Text
      • Print Agenda: Enable visitors to download/print the event schedule.
        • Configure Button Text
      • Get Directions: Provide event location with interactive map.
        • Configure Button Text
      • Custom: Multiple linking options:
        • For Page: Select from dropdown.
        • For External URL: Enter URL and choose whether to open in new tab.
        • For Speakers: Select from all set speakers.
        • For Sessions: Select from all scheduled sessions.
        • For Sponsors: Select from all confirmed sponsors.
        • For Event Listing: Display event-related information.
        • For Tickets: Select ticket class for purchasers.
      • Become a Sponsor: Invite partnership/funding
        • Configure Button Text
      • Link a Custom Form: For inquiries or feedback
        • Select Custom Form
        • Configure Button Text
      • Become an Exhibitor: For showcasing products
        • Configure Button Text
      • Submit Abstract: Allow users to submit abstracts for your event. 
        • Configure Button Text
      • Sign In: Allow users to log in
        • Configure Button Text
    9. Click Save.
    10. If your event is in draft state, click Publish to publish your event. If already live, Republish it.

    Design


    1. Navigate to Design > Website from the Dock.
    2. Click Edit Website.
    3. Hover over the hero section and click the Setting icon associated with the button group. The Button Group Settings panel will appear. 
    4. Click the Edit icon next to the button you want to edit. The Button Settings panel will appear. 
    5. Go to the Design tab.
    6. Customize your button:
      • Button Size: Tiny, Small, or Medium
      • Button Style: Filled, Ghost, or Link
      • Button Colors:
        • Filled style: Customize Text Color and Background.
          • Toggle Border option (adjust thickness and color when enabled).
        • Ghost style: Customize Text Color.
          • Toggle Border option (adjust thickness and color when enabled).
        • Link style: Customize Text Color only.
    7. Click Reset to Default if needed.
    8. If your event is in draft state, click Publish to publish your event. If already live, Republish it.

    Idea
    You can customize button colors as solid or gradient. Click the color picker to choose between options.
    Info
    1. To customize the entire button group, go to the Design tab in the Button Group Settings panel.
    2. You can also hover over the button group section and click the Edit icon next to a button to open its individual settings panel.

    Countdown 


    1. Navigate to Design > Website from the Dock.
    2. Click Edit Website.
    3. Hover over the hero section and click the Setting icon associated with the countdown element.
    4. In the Countdown Settings panel:
      • Set the Countdown Layout (5 available styles).
      • Adjust Timer Colors and Timer Size.

      • Enable Countdown Title if needed. To edit the text:
        • Select the text you want to edit and use the following formatting options
          • Size: Adjust the font size.
          • Bold: Make the text bold.
          • Italic: Apply slanted styling to the text.
          • Underline: Underline the text.
          • Strikethrough: Add a line through the text.
          • Alignment: Align the selected text (e.g., left, center, or right).
          • Ordered List: Create a numbered list.
          • Bullet List: Create a bulleted list.
          • Text Color: Change the color and transparency of the text.
          • Text Background: Add a background color to the text itself (not the block).
          • Line Height: Adjust the spacing between lines of text.
          • Letter Spacing: Modify the spacing between characters.
          • Text Transform: Change text capitalization (e.g., uppercase, lowercase).
          • Link: Add a hyperlink to the text.
          • Horizontal Ruler: Insert a horizontal line between text sections.
          • Clean: Clear all text formatting without affecting text block properties.
      • Set Timer Display Preference:
        • Show timer
        • Show message
        • Show timer and message
      • Set countdown to:
        • Event Start Date
        • Custom Date (set date and time)
        • Ticket Sale Start Date (choose ticket class)
        • Ticket Sale End Date (choose ticket class)
    5. If your event is in draft state, click Publish to publish your event. If already live, Republish it.

    Social Handles 


    1. Navigate to Design > Website from the Dock.
    2. Click Edit Website.
    3. Hover over the hero section and click the Setting icon associated with the social handle element.
    4. Available platforms:
      • X
      • Facebook
      • LinkedIn
      • YouTube
      • Instagram
      • Telegram
      • Medium
      • Website
    5. Enter the link and press Enter/return for the link to be fetched and applied.
    6. If your event is in draft state, click Publish to publish your event. If already live, Republish it.

    Adding Media 


    1. Navigate to Design > Website from the Dock.
    2. Click Edit Website.
    3. Hover over the hero section and click Add Media / Change on the element. The Edit Media panel will appear. 
    4. Choose between Image, Video, and Embed:
      • Image: 
        • Upload an image or choose from the design library.
        • Uncheck Use original image to edit (crop/flip/rotate).
      • Video: 
        • Paste the video URL in the field.
        • Click Remove and confirm if not needed.
      • Embed: 
        • Paste the iframe code.
    5. To link an image:
      • Click the Link icon under an image in the Image tab.
      • Choose from available options:



        • Page: Select a page from the dropdown.
        • External URL: Enter a URL and choose whether it should open in a new tab.
        • Speakers: Link to a listed speaker.
        • Sessions: Link to a scheduled session.
        • Sponsors: Link to a confirmed sponsor.
        • Event Listing: Link to event details.
        • Tickets: Link to a specific ticket class.
    6. If your event is in draft state, click Publish to publish your event. If already live, Republish it.
    Info
    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.

    Visibility Controls

    Hiding and Unhiding a Slide

    1. Navigate to Design > Website Design from the Dock.
    2. Click Edit Website to open the Website Designer.
    3. Hover over the hero section and click the Setting icon associated with it.
    4. In the Slider Settings panel, locate the slide you want to hide.
    5. Click the Eye icon next to the slide:
      • Blue eye icon: slide is hidden (click to make visible)
      • Black eye icon: slide is visible (click to hide)

    Hiding and Unhiding an Element

    1. Navigate to Design > Website Design from the Dock.
    2. Click Edit Website.
    3. Hover over the hero section and click the Eye icon associated with the element to hide it.
    4. Click it again to unhide it.
    If you have any questions, please contact support@zohobacsktage.com.