Viewport Height Banner

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.
Overlay
Unlike the Viewport Height Image on the previous page, the banner has a full overlay which can be adjusted for background color and opacity.
The overlay has an h1 heading and options for descriptive text and a CTA style internal link. These inherit the font family set for the header and are centered both horizontally and vertically over the image.
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 Parallax Nav widget. This is set up immediately below the viewport height image on the EverWeb design canvas.
The navigation is given a transparent background and the box checked to position it at the top of the item above it to create overlay links.