Hero Slide

The hero is a prominent and visually appealing area at the top of a webpage. It grabs visitors' attention and conveys essential messages or featured content. There are two types of hero displays: a Static Hero Image or a Hero Slideshow that is comprised of Hero Slides.

When designing this area, choose high-quality, visually engaging, and relevant images to your content. Ensure the text overlay or accompanying content remains legible and accessible for all users.

In Drupal, use responsive images to ensure they look great on any device. Always consider how the Hero region complements the rest of your site's design.

Please Note: You must be logged in to the State of Vermont website that you are editing to follow the instructions below. 

• Create Individual Hero Slides
• Activate the Hero Slider
• Access an Existing Hero Slide
• Create and Place a Static Hero Image
• Example Hero Slider

Create Individual Hero Slides  

The first step to utilizing the Hero Slide feature is to create individual Hero Slides.

1. Content
   

   Select 'Content' on the top navigation.

2. +Add Content
   

   Select '+Add Content'.

3. Hero Slide
   

   Select the 'Hero Slide' content type.

4. Image
   

   Select 'Choose Files' to navigate to and select the 'Image' file. You should upload the highest-quality image, and the system will scale it for desktop and mobile. If you upload an image that does not match the aspect ratio for the block, it will automatically be cropped.

5. Alternative text
   

   Enter a 'Alternative text'.

6. Title
   

   Enter a 'Title'.

7. Optional: Text
   

   Enter a 'Text' (description) for your Hero Slide.

8. Optional: URL
   

   Enter a 'URL' that your Hero Slide should direct to when selected.

9. Optional: Link text
   

   Enter the 'Link text' for the URL that you entered.

10. Optional: Button
    

    Enter text for the 'Button'.

11. Save
    

    Select 'Save'.

Activate the Hero Slideshow  

Once you have created individual Hero Slides, you can display them by activating the Hero Slideshow.

1. Structure
   

   Scroll over 'Structure' on the top navigation.

2. Block layout
   

   Scroll over 'Block layout'.

3. Hero
   

   Navigate to the 'Hero' region.

4. Slideshow
   

   Locate the 'Slideshow' option.

5. Configure
   

   Select 'Configure' to the far left of 'Slideshow'.

6. Pages
   

   In the 'Configure block' window, enter the 'Page' the Hero Slideshow should appear on.

7. Save block
   

   Select 'Save block'.

8. Back to site
   

   Select 'Back to site' on the top navigation.

9. Locate Page
   

   Locate the page on which you chose to place the Hero Slideshow.

10. View
    

    Confirm that the Hero Slider appears in the 'Hero' region.

Access an Existing Hero Slide  

1. Content
   

   Select 'Content' on the top navigation.

2. Title
   

   Enter the 'Title' of the individual hero slide you would like to edit.

3. Edit
   

   Once the individual hero slide you would like to edit appears in the list, select 'Edit' on the right side of the listing.

Create and Place a Static Hero Image  

1. Structure
   

   Scroll over 'Structure' on the top navigation.

2. Block layout
   

   Scroll over 'Block layout'.

3. Add custom block
   

   Select 'Add custom block'.

4. Basic
   

   Select the 'Basic' block type.

5. Block Description
   

   Add a 'Block description'. This is also known as the title of your block.

6. Body
   

   Place your cursor in the 'Body' content.

7. Image
   

   Select the 'Image' tool. Select 'Choose File' to navigate to and select the 'Image' file. For hero images, select a high-resolution image and resize it to 1680x420 pixels before uploading, as resizing isn’t possible in Drupal. Editors have flexibility in how the image renders, but if it scales incorrectly after uploading, add height="auto" to the image tag in the Source Code to fix it. This ensures the image displays at the correct proportions without distortion.

8. Alternative text
   

   Enter 'Alternative text'.

9. Caption
   

   If you would like to include a Caption, check the 'Caption' box.

10. Save
    

    Select 'Save'.

11. Caption Text
    

    Once your image is inserted in the 'Body' field, if you indicated that you would like to include a caption, place your cursor in the field with the 'Enter caption here' text and enter the copy for your caption.

12. Save
    

    Select 'Save'.

13. Structure
    

    Select 'Structure' on the top navigation.

14. Block layout
    

    Select 'Block layout'.

15. Content Top
    

    Navigate to the 'Content Top' region.

16. Place Block
    

    Select 'Place block'.

17. Filter by Block Description
    

    Enter the Block Description in the  'Filter by block name' field.

18. Place Block
    

    Select 'Place Block' to the right of the Block Description name.

19. Display title
    

    In the 'Configure block' window, indicate if you would like to 'Display title' of the block. It is checked to 'Display title' by default.

20. Pages
    

    In the 'Configure block' window, enter the 'Pages' the menu should appear on.

21. Save block
    

    Select 'Save block'.

22. Back to site
    

    Select 'Back to site' on the top navigation.

23. Locate Page
    

    Locate the page on which you chose to place the Basic Block.

24. View
    

    Confirm that the Basic Block appears in the 'Content Top' region.

Example Hero Slider  

Below is an example of the Hero Slide content type.