Hero Image Set

The widget is used to insert a hero image where both quality and good performance are required. It inserts four different versions of the image depending on the screen width or device type. There is an option for a full overlay which can fade in on page load if required.
Images
The image file needs to be created in four sizes prior to importing into EverWeb. The images used in this demo are 1600px, 1200px, 800px and 400px wide. The extra large image is loaded when the browser width is wider than 1200px, the large image when it is less than 1200px, the medium image on a tablet in portrait mode and the smallest on a smart phone.
The images are inserted using an <img> tag rather than in the background so that alt text for the search engines can be included.
Height
Each version of the image file has a control for setting its height so that the height of each can be adjust to give the best image quality.
The image has a control for vertical spacing which adds a top and bottom margin to adjust its position in relation to the items above and below it.
Overlay Items
The overlay has options for adding a styled heading, text and a CTA style link which are centered both horizontally and vertically over the image. The items can be turned on individually and the vertical spacing between can be adjusted.
The items share the same font family which can be web safe or non web safe or Google hosted with a web safe fallback.
Heading
The heading has controls for font size, font weight, font style and color. The letter spacing can be adjusted and there are controls for adding a text shadow.
Text
The text field can accomodate two or more lines using the HTML line break <br> to create returns. There are controls for adjusting the font size, color and line height.
Link
The link can be configured to open an internal or external page and in a new window if required. It has controls for setting the font size, color, hover color and the border width and radius. The border inherits the link text color and hover color.
Overlay & Animation
The full size overlay can be set for background color and its opacity. A fade in animation on page load can be added by checking a box and entering the required delay and animation times in seconds.