Hero Switch Grid Overlay
Image switches from fixed height on computers to responsive height on tablets and phones.
Overlay items are positioned using an invisible overlay grid.
EverWeb Widgets
RGL Grid Hero Switch
This widget was designed to overcome three of the less desirable qualities of a standard hero image.
[1] It inserts three images - one for each device type for better download efficiency.
[2] It inserts the images in an <img> tag rather than as a background image so that it can have an alt text attribute.
[3] The image switches from being fixed height on computers to responsive height on tablets and full height on mobile phones.
The image files are inserted in an HTML5 <picture> element so that different sizes can be loaded for each device type.
The image has an invisible overlay using the CSS Responsive Grid Module. The grid is set up with three columns and three rows.
The overlay has three items - an h1 heading, a text box with a heading and paragraph and a CTA style link. Each item can be place in position using the controls to define the column name and row number.
Images
The widget loads the images in three different sizes - one for each device type. The images in this example were cropped to 1600px x 1000px, 1200px x 750px and 800px x 500px respectively before importing into EverWeb.
The large image has a control for entering the height and a field for entering alt text for the search engines.
Item Position
The overlay items are an h1 heading, an HTML5 article element with an heading and text and a CTA link which is configured to open an internal page only.
Item Position
The items are positioned by defining which column and row they are to occupy. Columns are named left, center and right and the rows are 1, 2 and 3.
Vertical Align
The items can then be vertically aligned within the row by selecting from start, center or end which align the item at the top, center or bottom of the row.
Styles
The text can use a web safe font or a non websafe or Google hosted font with a web safe fallback.
The main h1 heading has controls for font size and color.
The text box has controls for heading size and align, text size and align, font color and line height.
The link has controls for font size, color and hover color.
Background
All three items share controls for setting the background color and its opacity and the border radius.