Hero Banner

Using the Hero Banner placeholder:

1. Select the page in the content tree.
2. Click “+” button on the page layout in the Hero Banner placeholder just below the navigation. When published, it will stretch to the top of the page.
3. Select Hero Banner component from list.

Alternate method:

1. Click Components tab at top of content tree.
2. Locate Hero Banner component.
3. Drag the Hero Banner onto the page layout in the Hero Banner placeholder just below the navigation. When published, it will stretch to the top of the page.

Add image:

1. Once the Hero Banner component has been placed on the page, select the placeholder image in the center panel. This will open the Desktop Background Image pane on the right.
   
   Note: If the image selection option doesn't appear at the top of the right pane, try refreshing the canvas or page. 
    
2. Click on the Add button to insert a background image to the page.
3. For an image already in the Media Library:
   1. Navigate to the folder location of the image. Images should be in the [Sitename] > Images folder (or subfolder).
   2. Click on the desired image to select.
   3. Click on the Add selected button.  
4. For a new image:
   1. Select the desired location in the Media Library site tree for the uploaded image (images should be located in the [Sitename] > Images folder (or subfolder)).
   2. Click Upload Media and select the image file to upload.
   3. Once uploaded (click refresh if image doesn't appear at first), click on the image to select.
   4. Click on the Add selected button.
5. Once an image has been placed, images can be edited by clicking on the change button or removed by clicking on the clear button.

Click in optional fields to add content:

1. To add a title, click in the Banner Title field and type the desired text.
2. To add a description, click in the Banner Description field and type the desired text.  
3. To add a button:
   1. Click on the Hero Button field
   2. With the Hero Button selected, go to the Element Options in the right-hand pane.
   3. Use the Link Type dropdown to select the link type.
      1. Click on the Link text field and type in the desired button text.
      2. For an External link, add a link in the URL field (this needs to be a full URL path starting with https://). 
      3. For an Internal link: 
         1. Click the Browse button to open the Internal link panel. 
         2. Locate the page using the Context site dropdown list to locate a page on another website within Sitecore XM Cloud. 
         3. Click the page name to be linked and click the Add link button.
      4. For a Media link (usually used for PDF files or other document files):
         1. Click on the Browse button.
         2. Select the desired file from the Media Library or upload a file and select it.
         3. With the file selected, click the Add selected button.
      5. Use the Optional parameters menu to add additional link options, if needed.

Change Hero Banner options:

1. With the Hero Banner selected, go to the right-hand pane.
2. Click on the down arrow next to Advanced styling to expand that section.
3. Make desired changes to the styles. See "In Pages – Hero Banner options" in the Template Data tab above for details.

1. After adding the component in Page Builder, click to select the component. Click the Open in Explorer icon at the top of the component. Explorer opens in a new tab.
2. To add a description, add text to the BannerDescription field.  
3. To add a title, add text to the BannerTitle field.
4. To add a button, use the HeroButton field set, including:
   1. Add the link URL to the Insert path field (or use the Browse button if an internal file).
   2. Add text to the Link text field.
   3. Optional: Add text to the Link title field.
   4. Optional: URL query string
   5. Optional: Anchor
   6. Optional: Click the Open in a new tab checkbox to open the link in a new tab.
5. To add a different image to load on mobile devices, use the MobileBackgroundImage options to add an image (following the same process as the main image (DesktopBackgroundImage in Explorer).  

In Page Builder: 

1. Click the dropdown arrow to the right of the Sitecore XM Cloud icon in upper left.
2. Select Content Editor.

In Content Editor:

3. Navigate to the page and data folder in the Content Tree.
4. Select the Hero Banner component.
5. To add a description, add text to the Banner Description field.
6. To add a title, add text to the Banner Title field.
7. To add a background video, use the Hero Background Video field to select an MP4 video file. A video file will override a background image selection.
8. To add a background image, use the Desktop Background Image field:
   1. Click on Browse.
   2. For an image already in the Media Library:
      1. Use any of the navigation tools (short cut links, filters, search, List view orTree view) to locate the desired image in the Media Library.
      2. Click on the desired image.
      3. Click on the Select button.
   3. Or to upload a new image:
      1. Click on the Upload Media button.
      2. Click on Change Destination to the desired folder location in the Media Library.
      3. Drag and drop the image file into the panel or click Browse for media files to select a file.
      4. Optional: Add/edit text in the Name and Description fields.
      5. Add text to the Alternate Text field if empty.
      6. Click Upload media.
      7. Click on the image.
      8. Click on the Select button.
9. To add a button:
   1. Use the Hero Button insert link field to add a link.  
   2. Depending on type of link selected, add button text to the Description or Link description field in the selected Insert Link panel.
   3. Fill out any optional link fields, if needed.
10. To add a different image to load on mobile devices, use the Mobile Background Image options to add an image (following the same process as the Desktop Background Image).