Hero Image Links

The widget creates a full width, fixed height hero banner with image links. It can have between two and six images which provide CTAs which link to other pages of the site.
The images can have a caption and there is an option to change the opacity of the images on hover when the page is viewed on a computer.
More experienced users can make the banner fully responsive by setting break points and adjusting the image percentage and maximum width. Reduce the browser width to see the responsive action or check out the page in the browser's responsive mode or the iOS Simulator. See the Testing page for more info.
Since the banner is fixed height, they can be stacked vertically on a page if required and the optional top and/or bottom border used to separate them visually.
Images
The images are dragged into the Assets List in the widget settings panel and then each file name is highlighted in turn to add the alt text, caption and file path to the linked page.
The appropriate percentage image width is selected according to the number of images. In this case there are four images so the width is 25%.
The image maximum width setting is used to control the sie of the images at wide browser settings. This setting will depend on the number of images and the container height.
There is a control for spacing the images horizontally and the images can be given a border and/or box shadow. There is a control for turning square images round and to make a box shadow conform to a round image.
The image opacity can be changed on hover so that visitors will know that the image is a hyperlink.
Responsive
To enable a fully responsive page, there are controls for setting the break points for tablet and mobile phone and settings for changing the image percentage and maximum widths on these devices.
Captions
The captions can use a web safe font or non web safe or Google hosted font with a web safe fallback and are adjustable for font size, color, and line height. The container background color can be changed if required.
Parallax Effect
The banner has an optional parallax effect which requires checking a box and setting the "Scroll Ratio". This allows the content below to scroll over the slider at a different speed from that of the slider.
The lower the value for ratio - the slower the speed of the slide over layer.
See THIS page for how this works with a slide over transparent layer.