A Skinny Hero is a great way to dress up a page using a photo that spans the entire width of the page with a text overlay.

This element should only be placed directly under the navigation.

 

This is an example of the Skinny Hero with its default settings and a generally dark image.

 

Skinny Hero with Dark Blue overlay

 

Gray overlay

 

Lighter colored image with gray text

 

To use this widget, drag it onto the page directly under the navigation menu, but make sure it is placed in the ChapterContent area NOT ChapterNavigation.

 

         

      

 

After dragging the widget onto the page, click the Edit button  in the upper-right corner of the widget.

 

 

You can now edit the following:

 

Main Area

           

·         Main Heading (H1)

This is the large text that will display in the hero area

 

Colors / Background Image

 

·         Font Color:

“Default” will already be selected. The default color is white.

You can choose from White, Black, Grey or Light Grey.

 

·         Overlay Color

This is a semi-transparent color overlay that can be placed over the image. It won’t affect the text.

You can choose from Light Blue, Dark Blue, Grey or None. If you select nothing here, it will default to “None.”

 

·         Background Image:        

To choose a background image, click the “Select image” button, then pick from your image library, or upload a new image.

 

Click “Save.”

 

Notes on Image Selection: The image you pick will be “cropped” by the widget from the top left to 148px tall on large screens, 123px on medium screens, and 117px on mobile and small screens. The image dimensions will not change, but only the top portion of the image will be shown, so be conscientious of this when choosing the image.

As you can see in the examples, with the skyline photo, you can barely see the tops of the buildings, but the mountain range image has been manually cropped to the appropriate dimensions using the image tools within Sitefinity to make sure the mountain range is seen in the hero instead of just sky and clouds.

 

You can access the image editing tools by clicking the “Edit all properties” button after choosing or uploading the image.