EverWeb Widgets

ThemeKit Boxes

ThemeKit Box 1i

Pancakes

July 12th

Pancake stack eating contest

ThemeKit Box 2i

Futuristic Expo

July 24th

See & experience what's going to happen in the future …

ThemeKit Box 3i

Athletics

August 11th

International indoor athletics trials

ThemeKit Box 4i

Bikers Meet

September 30th

Bring you bike - show it off - race it …

ThemeKit Box 2-1
Top Image
ThemeKit Box 2-1
Bottom Image

ThemeKit Box Boxes

The grid shown above has pairs of image/text blocks. Each block has an image with alt text and optional link, a heading, optional span and text.
The grid can be used as an illustrated navigation or links to latest news/blog posts etc.

Info Link
ThemeKit Box 2-1
Top Image
ThemeKit Box 2-1
Bottom Image

ThemeKit Box 2 - 1

This widget can be used where a couple of box images need to be displayed with a fairly large amount of text.
At wide browser widths the grid layout has seven columns. The images span the first two columns and the text block span the other five.
At the break point - in this case for tablet portrait mode - the images sit side by side above the text. On mobile phones in portrait mode the images stack.
When the images are switch to the right of the text, the text spans the first five columns and the images the remaining two.
Image captions can appear on hover when viewed on computers if required and there is an option for a hover opacity animation on the images.
The optional link can open internal or external pages, has a new window option and can be aligned left, center or right.
The images used in the example were cropped to 400px square before importing into EverWeb.

Info Link
ThemeKit Box 1-1 Widget
Opacity On Hover effect

ThemeKit Box 1 - 1

The image has alt text and an optional caption which can display on hover when viewed on computers. There is a control for the image opacity effect.
The text section has an optional link which can be configured to open internal or external pages with a new window option.
There are checkboxes to switch the position of the image to the right and to place the text above the image on screen widths below the break point.