There are three page regions to consider when designing a page: the header, the body, and the footer. This article focuses on the page header and header/hero row types.
What are header/hero rows?
There are various header/hero row types to choose from, depending on what you want to do. Remember that the row types available depend on the selected page type and row region. You can find out more about this in our pages and supported rows article.
Note: Rows are occasionally referred to as rails.
Header/hero rows are typically found at the top of the page, although they can also exist in the page body, focusing primarily on imagery. Page header/hero rows can display large, striking images promoting new content, or a series of peeking images, image mosaics, or text, including promotional banners.
Select an option below for examples of hero/header row types supporting text, images and assets:
This is an example of an H2 Hero Peeking row. Content displays on a carousel (width 3:1) with assets peeking either side of the centralized image.
This is an example of an H9 Hero Image row: a single large image with a custom image heading and the option to add text.
This is an example of an H10 Hero Text row: a text heading with optional text and background colors.
How do I configure header/hero rows?
A header/hero row is added to the header of the page automatically. Although you can remove it, this will affect how the navigation bar and page header row overlap to create a seamless experience. For this reason, we do not recommend doing this.
Below is a Hero (16:9) Page header row in Presentation Manager, followed by what you'd expect to see within a Responsive Web app.
To modify the header/hero row automatically inserted:
hover over the row
select the arrow button
select Change
choose the desired row type
The list of row types available for selection depends on the page type you're adding the row to.
To help you choose a suitable row, you'll see a brief description and an example of the row type with image dimensions.
Naming the row
You can add a title manually, or dynamically inherit the title from the list you associate with the row.
If specified, the row title displays above the listed content in the app.
Specifying row details
Adding a new row of any type requires you to specify details for it. Settings must be configured here, such as the device the row should appear on, the type of users it displays for, any associated segmentation tags, and specified dates.
Select list: Start typing to display predefined lists of content. Once selected, a preview of row imagery is displayed.
Any Device: Select the devices this row should appear on. You can configure specific rows to appear on some devices but not others.
Any User: Select the user group in which this row appears.
Any Segmentation Tag: Select or create segmentation tags to display content to specific users. Follow the link for more information on how to set segmentation tags.
Any Date: Specify date ranges for the row to appear. Follow the link for more information on how to set variant scheduling.
The preview feature lets you get an idea of how the row will appear in your Reference Apps as you configure it.
Previewing the image display
Once a list is selected, the row detail imagery is populated with a preview. Depending on the row type you've selected, asset image previews are available for the relevant devices.
To understand more about image row previews, click a preview size below:
This is an example of an H1 row. The 3:1 Hero image size applies to TV/Responsive Web App/Tablets.
This is an example of an H1 row. The 4:3 Hero Block applies to native mobile devices.
Header/hero row properties
Select the Properties accordion to define the row settings. The fields you see will differ depending on the row type selected.
Note: Hover over the
icon for tips.
Horizontal Alignment: Changes text alignment
Vertical Alignment: Changes text alignment
Autoplay (Seconds): Specify how often the main Hero image automatically transitions
In the example below, the element that the properties panel controls is highlighted.
Below is an example of a hero/header row within the page body.
Creating row variants
Clicking the 
button within a row allows you to create variations of the same row by changing certain configuration settings.
Find out more about row variants, and see how you can use them to target content to specific user groups.
Adding further rows
Once you've created your header/hero row, you'll want to continue building your page by adding further rows to the page body.
See our article to find out how to create and edit standard rows.
Saving and publishing pages
By clicking the
button, the page is made visible to your end-users to view and interact with.
Note: If you're not sure whether or not the page has been published successfully, you can check the top left-hand corner of the screen with the page selected. Published pages display the status of LIVE.
Need to make additional changes before going live?
No problem, save your page without publishing by selecting the More button, followed by Save. This saves your changes, but your page remains in a draft state.
