EverWeb Widgets

Overlay Panel

The image links use the show caption and scale on hover options.
The square images are made round and have the optional border and bos shadow.

Overlay [2]
Overlay [1]
Overlay [2]
Overlay [2]
Slider
Slider
Image text
Image/Text
Portrait
Portrait

Tel: 012 345 6789

Overlay Panel Widget

The item consists of a full width background image with a grid overlay. The overlay has four columns and two rows and has a maximum width setting. It can accommodate up to eight overlay images or up to six when the text block is inserted.
Background
The background can be a color or an image. If an image is used, it reverts to a color when viewed on mobile phones in portrait mode.
The image is inserted in two sizes - one for computers and a smaller one for mobile devices. The image used in this demo are 1200px and 800px wide respectively. It is really importamt to reduce the images to the smallest possible size before importing into EverWeb - especially when there's a several of them on a page.
Images
The small images in this demo were cropped to 320px square before importing into EverWeb. The box has been checked to make them round and a border and box shadow added. The images are positioned by selecting a column and row number.
Scale
A CSS transform is used to scale down the image size. It can then scale up on hover if required. The scale can also be set to a different value for when the item is viewed on a device with a window width less than the break point setting.
Caption
The captions are optional and center aligned over the image. The caption have the option to show on hover when viewed on computers.
Text Panel
The text panel has a heading and a text block and spans two columns. It has its own controls for column and row placement and animation delay.
Layout Switch
When viewed on mobile phones in portrait mode, the layout switches from grid to block display and the items are stacked vertically.
Animation
The optional animation has a checkbox to turn it on and the animation time is set in milliseconds. The delay time for each item in the grid can be set so that they appear separately rather then all at once.

Lightbox Image Version

Overlay Lightbox Slider

The thubnail images open a larger version in a lightbox window on click or tap.

Image [1]
Image [2]
Image [2]
Image [3]
Image [3]
Image [4]
Image [4]
Image [5]
Image [5]
Image [6]
Image [6]

Lightbox Image Panel Overlay

The lightbox version has all the same features as the panel described above except the overlay images open a large image in a lightbox on click rather than a another page.
In this example the text section is inserted in column 1, row 1 and the thumbnail images fill the rest of the spaces.
The lightbox image is responsive up to the width of the image file which, in this case, is 1200px.