Viewport Height Image

The widget inserts images which are viewport height. Viewport height means that the image completely fills the browser or device window no matter what size it is.
Images
It should be obvious that an image that fills the browser window on a computer and has reasonable quality will be far too large to download on mobile devices like the iPad and iPhone. The widget loads three different sized image files - one for each device type.
The images used in this demo are 1600px, 1200px and 800px wide respectively and were cropped, sized and named before importing into EverWeb.
Header
So that it can be used as a viewprt height image which appears at the top of the page on page load, the widget has an optional h1 heading for the website name. This overlays the image at the top.
The header and the info overlay share the same font which can be web safe or non web safe or Google hosted with a web safe fallback font.
The heading is centered and can be adjusted in relation to the top using the value for TB padding. There are controls for adjusting the font size, font weight, font style, letter spacing and color.
The overlay background can be adjusted for color and opacity.
Info Overlay
The info overlay is optional. It has an h2 heading and options for descriptive text and a CTA style internal link. These inherit the font family set for the header.
Each item has a separate control for font size and they all share the same color.
The link has options for adding a border - with the same color as the font - and a hover color which will only be seen when the page is viewed on computers and laptops.
There is a control for adjusting the vertical spacing of the items in the overlay.
Mobile Styles
There are controls for reducing the font size of the h1 and h2 headings and the text when the page is viewed on a mobile phone. The size of these items will depend on the amount of text and the item spacing and will need to be figured out by trial and error and testing the result in the iOS Simulator using one of the iPhone types.
Smooth Scroll Down
The smooth scroll down chevron has options for icon color, hover color and the background color and its opacity. The smooth scroll down code and the anchor are built in to the widget and is set so that it scrolls to the next section down the page.
Navigation
In this demo, the navigation uses the Responsive Tab links widget. This is set up immediately below the viewport height image.
If the main heading is not required, an overlay navigation can be used and positioned at the top of the image. The banner version of this widget uses the Responsive Parallax Nav widget which has a control for overlaying it at the top of the item above it on the EverWeb design canvas.
The Parallax Header use the Responsive Parallax Nav to achieve the same result.