A hero image is a large banner image – usually a photo or graphic design, prominently placed on a web page, generally in the front and center. The hero image is often the first visual a visitor encounters on the site and its purpose is to present an overview of the site's most important content.
In Drupal, this feature allows you to create a full-width image area that you can place at the top of your pages as the hero image. An example of the use of a hero image can be seen on the UNT Academics home page.
After you have logged in to your website – you must have administrative rights – you start by creating a new block to hold the hero image.
- In the Administration bar, go Content, then Blocks.
- Click the + Add Block link.
- NOTE: The entry you make in the field called Label will be the name you identify the block within the Block user interface’s admin page, e.g., Hero-front page.
- You will see a blank field called Title; you may leave it blank; it will not show up on the page.
- Follow the instructions on the creation form, and fill out the rest of the content on the page. You have created the block.
- Use the Admin bar to go to the Blocks user interface page: Admin>Structure>Block
- Find the block you created, and click the configure link to set where this new block will appear.
- Click Save at the bottom of the page.
- Drag the block into the Hero Feature block region.
- Click Save at the bottom of the page.
- You have created the block you need, now you will have to upload your photo or graphic design into the block, usually a .png, .gif or .jpg.
If you don't know how to upload an image or how big the photo has to be, that’s another lesson. :) If you need that lesson too, let us know.