Item Name
CSS image grid layout with alt text and options for image captions, item name, text description and a CTA style link to more info.
EverWeb Widgets
Image
Item or service description can extend to as many lines as required and the grid items will maintain equal height.
Image
Optional and adjustable image scale animation when viewed on computers.
Caption
Optional caption on hover animation when viewed on computers.
Links
Links to internal or external pages with new window option.
Align
The links are aligned at the bottom of the grid items despite varying amounts of content.
Product Image Scale Grid
Adding Items
Items are added and their data entered as described below …
- Crop all the images and their respective thumbnails, give them file names with sequential numbers and store them in a folder.
- Select all the thumbnail images in the Finder folder and drag them all together and drop them onto the Assets List in the Widget Setting panel
- Change the order of the images if required by dragging them up or down the list
- Select the first image in the list and use the large button to select its large counterpart.
- Select the first image in the list again and enter the alt text for the search engines which also becomes the large image caption.
- Tab again and enter the heading
- Enter the tag text
- Enter the link text
- Enter a relative or absolute file path into the URL box and check the box if it is to open in a new window
Scale Gallery
There is a gallery version of this widget which opens a large image in a lightbox slider on click. Click the "Grid" link below to see it.
Follow the File Path link to find out how to use relative and absolute file paths.