EverWeb ThemeKit

012-345-6789

Collage

The collage is created using four images of equal size in a CSS Grid layout with the optional captions at the corners. The fifth image overlays the center and can be rectangular/square or round/oval.
The spacing between the images can be adjusted as can the top/bottom and left/right padding.
Responsive Action
If viewing this page on a computer, reduce the browser width to see how the layout changes when the viewing device screen width is less than the break point.
Captions & Links
The captions are optional and can appear on hover when viewed on computers. The images can be configured as hyperlinks to open internal or external pages and in a new window if required.
Animation
The center image can animate in on page load by checking a box and setting the animation time and delay.

Auto Gallery

One of the main problems facing an artist when creating a website is the fact that the artwork images usially have different aspect ratios and this can cause a very messy grid layout when displayed in the default EverWeb image gallery.
Using the CSS Grid layout, these odd sized thumbnails can be automatically arranged in a uniform grid as can be seen in this example.
The thumbnail images were created from the full size images by batch resizing them in Preview.app and therefore have the same random aspect ratios as their full size counterparts. Click any thumbnail to see the slideshow.
Ransom Order
The thumbnail captions can be set to show on hover when viewed on computers and the order of the thumbnail images can be shuffled each time the page is loaded to give returning visitors a different view if required.
Lightbox Slideshow
The slider displays the images responsively up to the maximum size of the image file. The slide captions are derived from the thumbnail image alt text and there is a slide counter.
The slides are navigated using directional arrows and these can be hidden on touch devices if required where the visitor can swipe them.

Appointments

Comments

ClientEach row can have 2, 3 or 4 items. When 3 are present, the last one centers itself below the break point.

Ann Brown

This example uses three different Google hosted fonts for the text, the fancy quotes and the "signature".

Susan Smith

The heading and the "Show More" link are optional as is the slide up animation and overlay of the item above.

Fiona Allison

More …