Lazy Loading Images

The grid has 8 columns and 3 rows. The images span 6 columns and the text module 3 columns so that they overlap. The image can be positioned left or right in the grid and the slider can either be full width or be centered with a maximum width setting.
Images
All the images need to be cropped to the same size and aspect ratio before importing into EverWeb. The images in this demo are 1200px wide which is more than enough for reasonable quality.
The image has a fixed height which changes to 100vh on mobile phones in portrait mode to fill the height of the screen. The images lazy load to speed up page download time.
Text Module
The text module is an HTML5 <article> element with a heading, text and a CTA style link tab. The link can open internal or external pages and has a new window option.
The text module is vertically center to the left or right of the image when viewed on computers and then switches to overlay the bottom of the image when viewed on touch devices with a screen width less than the break point.
Slideshow
The slideshow is navigated using directional arrows which can be hidden on touch devices where the images can be swiped. The slider has controls to set the transition time in milliseconds and to autoplay, The slide time is set in milliseconds and there is a control to turn on pause on hover.
Animation
As can be seen from the demo, the text module can animate in. The overall animation time and delay are set in seconds and the animation type can be set on a per slide basis. The options are "none", "InDown", "InRight", "InUp" and "InLeft".