1. Home
  2. Select Hero Settings

Select Hero Settings

The Hero Section is the top area of an Explore page. This article explains how to add and configure a hero section.

Add a Background Color

  1. Ensure that the Hero Section toggle is On.
    imageHero Section toggle

  2. Click the Background Color square to change the background color of the hero section.
    imageBackground Color square

  3. Select the desired color by clicking on the color gradient, entering a Hex code, or entering RBG values.
  4. Click anywhere outside of the color selection window to save and exit, or click on the preview color square for even more color selection capabilities.
    imageColor Selection menu

Add a Background Image

The recommended image size for your Hero section is 1024 X 400 px.
  1. Click Add Image to add an image.
    imageAdd Image link

  2. If you have already uploaded an image you want to use, skip ahead to Step 5. If you need to add an image, click Upload.
    imageUpload button

  3. Click inside the upload box.
    imageUpload Box

  4. Select the image you want to upload and click Open.
    imageImage selection menu

  5. Click the image you want to use. A yellow square will appear around the selected image. Click Apply.
    imageApply button

  6. Select whether you want the image to be “fixed” or “fill”.
    Fixed: Ensures that the same portion of the background image will always be shown.
    imageExample of Fixed

    Fill: Responsive to the size of the window, ensuring that the background image always fills the Hero section. The background color will never show.
    imageExample of Fill

    imageFixed and Fill radio buttons

  7. Click and drag the image to adjust its placement.
    imagePlacement adjustment example

  8. Click and drag the expansion bar to make the Hero Section taller or shorter.
    imageClick and drag example

Add Text

  1. If you want to include text over the hero image click the Show Text toggle to the On position.
    imageShow Text toggle

  2. Click the default title to edit.
    imageDefault text title

  3. Use the tools to edit the font, boldness, size, and color of the text. Click Save.
    imageFont options

  4. Repeat this process with subtitle if you want a subtitle. Click Save when finished.
    imageSubtitle field

Updated on April 14, 2023

Was this article helpful?

Need Support?
Can't find the answer you're looking for? Don't worry we're here to help!