Hero Banner

This is a simple hero banner which uses a single image file and has on optional info overlay which can have a heading, descriptive text and a CTA style link. Since it doesn't load different sizes of image files for each device type it should only be used on pages with little or no other media content.
Image
The image is inserted with alt text for the search engines with 100% width and a fixed height. A different height can be set for when the page is viewed on mobile phones.
The image file should be as small as possible with sufficient width to give reasonable quality when viewed at wide browser settings on a computer. The image used for this demo was reduced to 1280px in width before importing into EverWeb and is quite large enough.
Overlay
There is a checkbox for displaying the overlay and one for selecting each of the items so that any combination of the header, descriptive text and link can be used.
The items use the same font family which can be web safe or non web safe or Google hosted with a web safe fallback. They are centered both horizontally and vertically over the image and the vertical spacing of the items can be adjusted.
Heading
The heading is an h1 since it is the first heading in an HTML5 container. It can be styled for font size, font weight, font style, letter spacing and color. The heading can have a text shadow with controls for adjusting the shadow radius and color.
Text
The text field is made larger so that it can accomodate two or more lines. Use the HTML line break <br> to create returns. The text has controls for font size and color, text align and line height.
Link
The link has controls for font size, color and hover color. There is a control for setting the border width. The border inherits the link color and hover color.
The link has its own controls for setting the background color and opacity which can be used when the overlay is used without the background.
Overlay Background
The overlay background is optional and has controls for setting the background color and its opacity, the padding and the vertical spacing of the items.
Overall Spacing
The last control in the widget settings adds a top and bottom margin to the widget to space it vertically from the items above and below it.