EverWeb ThemeKit Boxes

Box Grid 1 - 4

The five image grid has options for captions and links and for any image to be chosen as the "featured" one. The featured image occupies four segments of the grid and can be positioned left, center or right when viewed on wide browser/screen widths by placing it in column 1, 2 or 3.
Images
The image files can be reduced to about 400px x 400px if it is required that the featured image is changed from time to time. Otherwise the featured image can be about 600px and the others reduce to about 300px depending on the grid's maximum width settings.
Captions
The optional captions overlay the bottom the image and can be displayed on hover when viewed on computers if required.
Links
The optional links appear as an info icon at the top right of the image and have controls for setting the color and hover color. The links can be configured to open internal or external pages and have a new window option.
Links are created using relative or absolute file paths. Follow the link below to find out about how this is done …

File Paths

Box Grid

This grid can have up to 48 images if required but, to fit in with the "box" design should show rows of 8 or 4 although the number of images per row can be set for each device type.
The link and caption options are the same as the Box 1-5 Grid shown on this page.
Images
The image files don't need to be any more than about 400px x 400px which relates to a file size of about 40KB.

File Paths

Box Footer

The footer has a four column gris layout which reduces to 2 columns on tablets in porttrait mode and one on phones. As can be seen from the example columns 2, 3 and 4 can have different background colors.
Column [1]
The first column can show either an image or a Google map. The aspect ratio of the image or map sets the aspect ratio of all the columns. In other words if the columns are to be square, insert a square image or set the map ratio to 1/1. For portrait style columns set the map ratio to 4/3 and for landscape 3/4.
Column [2]
This column is for text info and has controls for font, fallback font, font size, color, text align and line height.
Column [3]
The links can be to internal or external pages and have a new window option. The font size, color, hover color, link background color and spacing can be adjusted.
Column [4]
This has a smooth scroll to the top function with a scroll time control, an optional phone number that switches to a phone tab on mobile phones and a spam protected amial function.
Copyright
The © notice sits below the columns and has controls for font size and color and a checkbox to automatically apply and update the copyright year.
Spacing & Height
There are controls for grid gap to space out the columns and for all around padding to show the background color.
The height of the footer will also be determined by the number of links and their vertical spacing.