Manage Page Editor Hero sections

A Hero section is a special kind of section that is meant to provide information to page visitors. This could be a welcome message with links to important resources. You can't add widgets to a Hero Section. You can add, edit, or move this section in the Page editor.

Prerequisites

You have the required permissions to edit the product page or dashboard.

Steps

  1. Go to the page where you want to add or edit a hero section.
  2. Click Edit.
  3. If this is a new section, under Sections & Layout, drag and drop Hero to the desired location on the page.
  4. If this is an existing section, select the Hero section you want to edit.
  5. In the right-side panel, update the section details:
    1. In the Variant section, update the size and padding of the Hero section: 
      1. Select the size of the Hero section. This can help consolidate space on the page.
      2. Select the Additional top margin and Additional bottom margin checkboxes to add additional padding to the top and bottom of the Hero section.
    2. In the Text section, add information to the Hero section:
      1. In Title, enter the name of the Hero section.
      2. In Subtitle, enter a description of the Hero section. For example, instructions on how to use the page.
      3. In Color, select the color of the title and subtitle text.
      4. Select the position of the text block in the section. For example, you can position the text in the middle of the Hero section.
      5. Select the Backdrop checkbox to add a gray background to the title and subtitle.
    3. In the Button section, add a button that directs a user to a helpful resource:
      1. In Text, add the button label.
      2. In Color, select the button color.
      3. In Text color, select the button label color.
      4. In Link, enter a URL for the button. For example, a URL to a specific asset page or company policy.
    4. In the Content Image section, upload an image to your Hero section. This image is placed next to the text block.
      Note The image must be:
      • 1400 x 788 px
      • No larger than 5MB
      • A JPG, PNG, or SVG file
    5. In the Background section, configure the background image or color of the Hero section:
      1. In Background Image, you can either upload an image or select the Show placeholder image checkbox to use the default Collibra image for the Hero section background.
        Note The image must be:
        • 1400 x 788 px
        • No larger than 5MB
        • A JPG, PNG, or SVG file
      2. Select the size of the background image to configure how it fits to the Hero section.
      3. Select where you want the background image positioned within the Hero section. This is helpful if the image doesn't fit the section.
      4. In Color, select the color of the background image.
        Note If you uploaded an image that fills the Hero section, you can't see this background color.
  6. Optionally, select Content copy outlined icon above the component to copy and paste the component.
  7. Optionally, select above the component to delete the component.
  8. Click Publish to publish your changes.

What's next