Hero Banner

More and more web designers are begining to realise that autoplay banner sliders are driving customers away.
The trend is to replace these with a single hero banner with info. This makes even more sense on the mobile version of the site where autoplaying slideshows should never be used.
Banner
The Hero Banner is a full width, fixed height image which has an h1 heading, optional h2 heading and an optional internal link tab. These are automatically centered both horizontally and vertically over the image.
There is a control for adjusting the vertical spacing of the items.
Image
The image in this example is cropped to 720px wide by 360px in height. This width is near enough to the widget's maximum width setting and the height will allow the image to be seen in full when viewed in landscape mode.
It is absolutely essential to test mobile pages in both portrait and landscape mode to make sure that media items don't overflow the screen. See the Testing page of this website for info about using the responsive mode in Chrome, Firefox and Safari and the iOS for testing pages in different devices and modes.
Styles
Obviously, the headings and link tab share the same font family but can be individually styled for font size, color, background color and opacity and border width, color and radius.
The h1 heading has additional controls for font style and weight and letter spacing. There are also controls for radius and color to add a text shadow to it.
The widget has the option to use of a Google hosted font with web safe fallback. It is not a good idea to use more than one Google font on a mobile site since the browser has to download this from the Google server creating an extra sever request for each font. This effects page download time quite noticeably if more than one font is used.