Hero Image
This component allows you to add a Hero Image and Page Title page.
You can see an example Hero Image on the sample page.
Add a new Hero Image using the Experience Editor
Open the page in the Experience Editor. Click on the Component button. Click the (+Add here) button inside the banner placeholder, and the Select a Rendering window will open.
Click on the Hero Image component inside the renderings box, then click the Select button to choose it. A window will open that allows you to Select the Associated Content for the Hero Image.
Select Create New Content from the options on the left, and then give your Hero Image a unique name in the Name field. Click OK, and your new Hero Image will be added to the page and the subcontent folder for this page. Save the page to preserve your changes.
Editing your Hero Image in the Experience Editor
Your new Hero Image can be edited right inside the Experience Editor.
To edit the Image: Click on the image placeholder and the Editor Ribbon will appear. Click on the first image icon to open the Media Library modal and choose a 1220x320px image out of the Hero Images folder.
To edit the Page Title: Click inside the placeholder text and start typing. This will edit the Page Title field for the page.
After making your edits, be sure to save your page to preserve your changes.
Editing your Hero Image in the Content Editor
Switch back to the Content Editor, and locate your Hero Image inside the subcontent folder for your page. You may need to collapse and expand your folder to refresh it.
Click on the Hero Image item, and then make your changes in the Content Editor fields on the right. Be sure to save your changes.
Hero Image fields
| Photo | |
|---|---|
| Photo | A media field used to specify a 1220x320px image out of the Hero Images folder. |
Editing the Page Title in the Content Editor
Switch back to the Content Editor, and locate your page. You may need to collapse and expand your folder to refresh it. Edit the Page Title by changing the copy in the Content : Page Title field for your page.
How it Looks
This is how a completed Hero Image looks.
