Skip to main content Skip to navigation

Add a hero section

A hero section is a large image with overlaid text that you can use to make high-impact visual statements on your page.

  1. Browse to the page where you want to add a hero section.

  2. Go to Edit > Edit centre content:

    The SiteBuilder 'Edit' menu, with the 'Edit centre content' option highlighted

  3. Place your cursor where you want to add the hero section.

  4. Select Presentation > Hero section in the left-hand menu:

    The 'Presentation' menu, with the 'Hero section' option highlighted

  5. A hero section container appears on your page, containing placeholder content:

    A new hero section component in the Components Editor

  6. Replace the placeholder text with your own.

  7. To replace the placeholder image or format the text overlay:

    1. Select the hero section, then in the toolbar that appears above it, select Settings:

      A selected hero section in the Components Editor, with the 'Settings' option highlighted

    2. Use the Hero pop-up to specify the block settings:

      The 'Hero' pop-up, showing the available options for a hero section

      • To specify the image, do one of the following:

        • Enter the Image URL, or select the button to locate an image already uploaded to your site.

        • Drag and drop a file from your computer into the dotted-line box, or select the Browse button to locate a file on your computer.

        • Select an image under Recently uploaded files, if any are present.

      • Select the relevant checkboxes to make the block Full width (no side margins) or Flush top (no top margin).

      • Specify the Text side margin, change Text colour, enable or disable the Text background or change the Text position on the image.

  8. Select Update hero to apply your changes.

  9. When you've finished editing your page, select Publish.

Related articles