Hero Banners

 

The Hero is the banner image appears across the top of the pages of your website.

  • In the Classic theme of GW Drupal, this display of the Hero banner is automatic based on the Site Placement value of the Hero, and all pages are designed to display it.
  • In the Editorial theme of GW Drupal, the display of the Hero banner is optional on all pages and must be added manually.

 

 

There are three size options for the Hero banner in the Editorial theme:

  1. Full bleed large: spans edge-to-edge of the device's screen size
  2. Fixed width large: spans the width of the content area
  3. Small: shorter in height compared to the large hero banners, and can display at full bleed or fixed width

Additionally, both large variations are able to be placed into Rotating Hero content sets.

See Sample Editorial Theme Heroes

Create a Hero banner

  1. Hover over My Workbench > Create Content
  2. Click on Hero
  3. Select a Subtype
  4. Give the Hero banner a title
    • this is a backend, administrative title that will not be seen by website visitors
    • Note: a URL will be generated based on the title
      • If this Hero is being created in support of a page or some other content on the website, do not give it the same title as the page, as this will create a duplicate URL.
      • Drupal appends duplicate URLs with "-x", where "x" equals a sequential number to account for the duplication (ex: "-0", "-1", "-2", etc...).
  5. The optional Summary field places a caption across the bottom of the large Hero variations
    • links and other HTML are not supported
  6. Use the required Hero Image to upload the image file
  7. The optional Hero Link Title field displays to the user and the URL field links the Title to a webpage
    • Use the Open URL in New Window checkbox if the link is to someone else's website
  8. The optional Call to Action field displays as linked text at the bottom of the Hero caption box
  9. The optional Video Link field places a play icon in the Hero caption box that links to the YouTube or Vimeo video indicated in the Video URL field
  10. Leave Site Placement blank
  11. Click on the Publishing Options panel
  12. Set the Moderation State to "Published"
  13. Click the Save button

 

Hero banners in the GW Drupal Classic theme come in three sizes:

  1. Small: designed for subpages and does not rotate
  2. Medium: designed for the homepage and can be placed in a Rotating Hero content set
  3. Large: designed for the homepage and can be placed in a Rotating Hero content set

Additionally, it is important to note that the Hero banner is always paired with a Brand graphic which identifies the site owner. Typically, the Brand graphic displays to the left of the Hero banner.

However, the Medium and Large Hero banners offer a full-width option that combines the banner image and the Brand graphic into a single image file that spans the full width of the content area. In this configuration, the Hero image displays above the Brand text.

See Sample Classic Theme Heroes

Create a Hero banner

  1. Hover over My Workbench > Create Content
  2. Click on Hero
  3. Select a Subtype
  4. Give the Hero banner a title
    • For the Large and Medium hero banners, this title display as the caption by default. However, there is an option to hide it via the Customize this Page interface.
    • For the Small hero banner, no caption displays.
    • Note: a URL will be generated based on the title.
      • If this Hero is being created in support of a page or some other content on the website, do not give it the same title as the page, as this will create a duplicate URL.
      • Drupal appends duplicate URLs with "-x", where "x" equals a sequential number to account for the duplication (ex: "-0", "-1", "-2", etc...).
  5. Use the required Hero Image to upload the image file
  6. The optional Hero Link Title field displays to the user and the URL field links the Title to a webpage
    • Use the Open URL in New Window checkbox if the link is to someone else's website
  7. For Site Placement:
    • Select Home if the Hero banner should display on the homepage
    • Otherwise, select the Site Placement value that matches the subpage/section that the Hero banner should display on
      • Ex: if the Hero banner should display on pages in an About section, match the Site Placement value of the About section pages
  8. Click on the Publishing Options panel
  9. Set the Moderation State to "Published"
  10. Click the Save button