Hero banner

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

  1. From the admin panel, click on Structure.
  2. On the Structure page, click on Block layout.
  3. On the Block layout page, click on the Custom block library tab located close to the top of the page.
  4. Click on the +Add custom block button.
  5. From the list of available blocks, click on Hero banner.
  6. Configure the available options (outlined below).
  7. 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.
  • Link
    • 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

  1. Once your block has been created, you can proceed to Structure > Block Layout from the admin panel.
  2. Choose a location:
    1. To add it to the top of your home page, but beneath the primary navigation, locate the Page Title region of the list.
  3. Click the Place block button.
  4. 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.
  5. Configure your block:
    1. Text alignment
      1. Left
      2. Center
      3. Right
    2. Title Brand Color
      1. Default (white)
      2. Primary (blue)
      3. Secondary (gold)
    3. Image Effects
      1. Default
      2. Darken the background image so that the text on top is easier to see
      3. Fade from a Sepia overlay color to default
      4. Apply a rotating overlay of rainbow colors (the colors change in real time without refreshing the screen)
  6. In the Visibility section, enter <front> in the Pages field to restrict the banner and only display it on the home page.
  7. Click Save block to finish.
  8. Check your page for the output.
Example of a hero banner block.
The demo shown above was set using Text Alignment: left, Title Brand Color: default, and Image Effects: default.

 

Etiquetas