Isomer Guide (Legacy sites)
UpdatesOfficial WebsiteGithub Repository
  • Introduction
  • Accounts & Setup
    • Github Account Setup
      • Set up 2FA
    • Site Access
  • Get started
    • Your first edit
    • Create a new page
    • Create a new collection
    • Format your content
      • HTML cheatsheet
      • Markdown cheatsheet
    • Page config
  • Configurations
    • Config.yml file
      • Site color
    • Homepage
      • Basics
      • Hero Banner
      • Infobar
      • Infopic
      • Resources
      • Sample configuration
    • Pages
      • Configuration
      • Second and Third Level Navigation Pages
    • Navigation Bar
      • Configuration
    • Resources
      • Setup
      • Posts
      • Resources with v2 migration
    • Contact Us
      • Configuration
    • Footer
  • Features
    • Analytics and tracking
      • WOGAA
      • Google Analytics
      • Facebook Pixel
      • LinkedIn Insights
    • IsomerSSL
    • Content Recommender
  • Publish your changes
    • Overview
    • Creating a pull request
    • Approve a pull request
    • Merge a pull request
    • Site Launch
      • How to make records changes on ITSM?
  • Frequently Asked Questions (FAQ)
    • General
    • Security
    • Pull requests
    • Digital KPI
    • Migration v1 to v2
  • Updates
Powered by GitBook
On this page

Was this helpful?

  1. Configurations
  2. Homepage

Hero Banner

PreviousBasicsNextInfobar

Last updated 4 years ago

Was this helpful?

The hero banner is the main banner on the home page. It includes a background, a call to action button or dropdown, as well as up to 4 key highlights (optional) that you can use to highlight pages and sites of importance.

Background photo

The background photo should only contain scenery, people, or a pattern. It should not contain any text as the image will automatically be resized to fit different devices, and text included may end up being cut off or blocked by other components on the page, drastically affecting the user experience on your site.

Furthermore, text in images cannot be read by screen readers used by people with visual impairments, affecting the accessibility of your site.

The hero banner must be the first section in the page. Only 1 hero banner is allowed on the home page.

Configuration options

  • title: the title that will be displayed in large font in the middle of the banner

  • subtitle: the subtitle that will be displayed in smaller font in the middle of the banner. Optional

  • background: the path to the background image in the hero banner. We recommend a resolution of 1920x720 pixels

  • button: the text in the central call-to-action button in the hero banner. Optional if dropdown menu is present

  • url: the URL linked to by the call-to-action button. Optional if dropdown menu is present

  • dropdown: a dropdown menu with sublinks that replaces the call-to-action button. Optional. The options available for the dropdown menu are:

    • title: the title of the dropdown menu, visible when the menu has not been clicked

    • options: a list of title and url that form the options under the dropdown menu

  • key_highlights: a list of up to 4 links placed at the bottom of the hero banner that you can use to highlight pages of importance. Optional. The options available for each key highlight are:

    • title: the title of the key highlight

    • description: the subtitle/description of the key highlight. Optional

    • url: the URL the key highlight links to Optional

Sample configuration that includes a button without key highlights:

- hero:
    title: Ministry of ABC
    subtitle: We provide Singaporeans with XYZ services
    background: /images/banner.png
    url: /contact-us/
    button: Contact

Sample configuration that uses a dropdown menu instead of a button, and also includes 3 key highlights:

- hero:
    title: Ministry of ABC
    subtitle: We provide Singaporeans with XYZ services
    background: /images/banner.png
    dropdown:
        title: I want to...
        options:
        - title: Sign up for EFG
          url: /signup/
        - title: Learn more about ABC
          url: /learn-more/
    key_highlights:
        - title: ABC services
          description: Find out what ABC can do for you
          url: /services/
        - title: Our Annual Reports
          url: /annual-reports/
        - title: Join ABC
          description: Unleash your passion and be rewarded with a fulfilling career!
          url: /careers/
Screenshot of the hero banner on the homepage with button and 3 key highlights