The Hero Banner gives the chance to create a block that is the full width of the screen containing a large image, with a call to action link, a link to media, which is ideally intended for your home page.
To create a Hero banner
- From the admin panel, click on Structure.
- On the Structure page, click on Block layout.
- On the Block layout page, click on the Custom block library tab located close to the top of the page.
- Click on the +Add custom block button.
- From the list of available blocks, click on Hero banner.
- Configure the available options (outlined below).
- Click Save to finish.
Configure your Hero banner
Available options include:
- Block description - A brief description of your block used by the system
- Primary image - The image should be, at a minimum, 2000 x 770 pixels. One file only. 256 MB limit. File types allowed: png gif jpg jpeg
- Title - The main title text to appear as the banner headline
- Sub Title - This text will appear below the main Title headline. It is ok if this text is longer like a sentence or two. Just be sure to review the results in mobile display as well as desktop.
- URL - Start typing the title of a piece of content to select it. You can also enter an internal path such as /node/add or an external URL such as http://example.com. Enter <front> to link to the front page.
- Link text - This will generate a Call To Action button on top of the main banner image.
- Video button - Add a Youtube or Vimeo video URL such as https://youtu.be/PAwB_t_iM7U or https://vimeo.com/79504673 to create a button which will play the video once clicked.
When the block configurations are complete, move on to reviewing your block's visibility.
Adding the hero banner to the Block Layout
- Once your block has been created, you can proceed to Structure > Block Layout from the admin panel.
- Choose a location:
- To add it to the top of your homepage, but beneath the primary navigation, locate the Page Title region of the list.
- Click the Place block button.
- Scroll through the list or use the filter field to find your hero banner block. Click its corresponding Place block button under the Operations column.
- Configure your block:
- Text alignment
- Title Brand Color
- Default (white)
- Primary (blue)
- Secondary (gold)
- Image Effects
- Darken the background image so that the text on top is easier to see
- Fade from a Sepia overlay color to default
- Apply a rotating overlay of rainbow colors (the colors change in real time without refreshing the screen)
- Text alignment
- In the Visibility section, enter <front> in the Pages field to restrict the banner and only display it on the homepage.
- Click Save block to finish.
- Check your page for the output.