Help Center 2.0 - Configure the banner

On the Branding and Customizations page banner, click the Body tab.

TIP: We recommend that, each time you change any banner setting for your web support portal, you click SAVE DRAFT on the page banner. Otherwise, you might have to repeat your work.

  1. Select the banner options from the dropdown list.

    HOW YOU DO IT
    Under the Banner heading in the options pane, select the platform option for banner image from dropdown list.

    The available platforms combinations in dropdown list as below:

    • Same banner for desktop and mobile

    • Different banner for desktop and mobile

    • Different banner for desktop, mobile portrait and mobile landscape

      Note: Our recommended best practice for image resolution is as follows:

      ResolutionWidth

      Height - XS

      		Height - SHeight - MHeight - L

      Desktop

      		1920240360480600

      Mobile Portrait

      		1080200240280 320

      Mobile Landscape

      		1080140160180200

  2. (Optional) Set the banner image for Help Center

    HOW YOU DO IT
    Under the Banner heading, enable the banner image toggle.

    1. Click UPLOAD IMAGE for the selected banner options.

    2. Browse to a suitable file.

    3. Click the file to select it. Then, press Enter to begin uploading it.
      Repeat the above steps for selecting other banners.

      EFFECT
      The banner image loads on selected platform in your Help Center.
      You can customize the height of the banner with the banner height slider.

  3. Enter the greeting text for use on the Help Center.

    HOW YOU DO IT

    1. Under the Banner heading in the options pane, click inside the Greeting Text area to activate it for editing.

    2. Do either of the following.

      • Enter text manually.

      • Click Insert Text Template () to begin choosing a text template for use as greeting text.

      • You can set the default greeting text by clicking on Reset to default.

    3. Choose the size of the greeting text font from the following:

      • Extra small

      • Small

      • Medium

      • Large

    4. Choose the color that suits your brand and banner image from the color picker.



      EFFECT
      The greeting text loads on the landing page in your Help Center.
      You can customize the color of the greeting text.

  4. Customize the placeholder text in the search bar:

    1. Under the Banner heading in the options pane, click inside the Search Placeholder Text area to activate it for editing.

    2. Do either of the following.

      • Enter text manually.

      • Click Insert Text Template () to begin choosing a text template for use as the search placeholder text.

      • You can set the default placeholder text by clicking on Reset to default.

        Note: Our recommended best practice as follows:
        ResolutionGreeting+Search BarSearch Bar Only

        Desktop

        198px

        		118px

        Mobile Portrait

        108px

        		68px

        Mobile Landscape (below 840px)

        108px

        		68px

        Mobile Landscape (below 840px)

        		120px68px 

Help Center 2.0 - Configure section image settings for Help Center

On the Branding and Customizations page banner, click the Body tab.

TIP: We recommend that, each time you change any section images setting or value for a Help Center, you click SAVE DRAFT on the page banner. Otherwise, you might have to repeat your work.

  1. Toggle section images On or Off for one Help Center

    HOW YOU DO IT
    Under the Section Images heading in the options pane, toggle the use of section images On or Off.

    TIP: The toggle is colored green while the feature is turned On and colored gray while the feature is turned Off.

    EFFECT
    Choose whether the sections in your Help Center — being the organizational structure for your knowledge base articles, FAQs, and any other support resources — show section-defining images.

    When toggle is ON

    When toggle is OFF

  2. Use emoji characters as section images on one Help Center

    HOW YOU DO IT

    1. Under the Section Images heading in the options pane, click the preview tile for any named section of your Help Center.A tabbed widget opens. The tab labels are Image and Emoji.

    2. Click Emoji.

    3. Browse or search for the emoji that you would use with the specified section, and then click it to choose and apply it.



      EFFECT
      When no uploadable files are available for use as section images, you can choose to use emojis, instead.

  3. Use previously uploaded pictures as section images on one Help Center

    HOW YOU DO IT

    1. Under the Section Images heading in the options pane, click the preview tile for any named section of your Help Center.A tabbed widget opens. The tab labels are Image and Emoji.

    2. Click Image.

    3. Scroll through the library of previously uploaded images, and then click an image to choose and apply it.

      EFFECT
      When you have already uploaded image files to your Helpshift instance, for use as Help Center section images, you can choose among them and assign them to sections.

  4. Upload a picture for use as a section image on one Help Center

    HOW YOU DO IT

    1. Under the Section Images heading in the options pane, click the preview tile for any named section of your Help Center.A tabbed widget opens. The tab labels are Image and Emoji.

    2. Click Image.The Upload Images form is directly under the library of previously uploaded images.

    3. Click the unlabelled image upload button ().

    4. Browse to a suitable file.

    5. Click the file to select it. Then, press Enter to begin uploading it.

      EFFECT
      TIP: The supported file types and filename extensions are PNG, JPG, JPEG, and SVG. Of these, SVG files render in high definition at any scale and are uniquely well suited to responsive design.

      We recommend image dimensions of 120 x 120px for any non-SVG section image file that you use this form to upload.