The ThemeKit Combo Text widget can hold a number of sections each with a heading and text content.
The headings are in an HTML5 <header> element and the text is in an <article>.
Sections can be added as required and there is an option to finish it off with a footer which can be used for copyright - © - info.
Large sections of text tend to make visitors zone out and look elsewhere for info. The widget can hold a large amount of text but much of it can be hidden and scrolled into view.
To achieve scrolling the container is given a maximum height and any overflow on the Y-axis is set to scroll both on computers and touch devices like the iPad and iPhone.
A fairly recent addition to the CSS position property is the "sticky" value. The existing values are static, relative, absolute and fixed.
In this setup the position sticky is applied to the headers so that they will scroll up and stay in view while the related content is scrolled.
Once a section has been scrolled the next section header will scroll up and sticky.
This is a really useful feature and used to require Javascript. Now it's all done by the browser and a line of CSS code!
Since the container has a maximum height setting to allow any overflow to scroll into view the height setting should be carefully considered since it will be viewed on different devices.
The maximum height can be set in pixels or in viewport units (vh). Viewport units are more appropriate for responsive items to give a uniform appearance on all devices.
The widget has the option to set the height in px or vh. The latter being turned on using a checkbox.
Since EverWeb can't handle viewport units it's best to set the height in pixels while editing and then switch to viewport units before publishing.
Note that the fixed height box should be left unchecked so that all the items can be viewed while editing on the EverWeb design canvas.
The optional images are inserted in an HTML5 <figure> element with alt text and an optional caption which overlays at the bottom.
The images have a maximum width setting which, in this case, is set to 600px which is the width of the image files.
As well as reducing the file size before import it is essential to optimise the images - especially PNGs. The freeware ImageOptim does this in batches - quick and easy.
The image files were reduced to their maximum with setting and optimised with ImageOptim before importing into EverWeb.
Although this helps to make the page download a lot faster in the browser the performance can be improved a lot by lazy loading the images.
This item is perfect for lazy loading since most of the images are not in the viewport on page load.
EverWeb ThemeKit widgets insert the checkbox for adding the lazy load function last in the widget settings so that it can be engaged immediately prior to publishing the page.
