Item [1]
The items are laid out using the CSS Grid Layout Module to place the image in one column and the text in the other.
The layout switches to one column at the break point with the text below the image.
EverWeb Widgets
Shuffle Links
Item [2]
In this example, the layout has been switch to alternate the item positions to make the layout more interesting.
Image links are not useful on responsive pages since the visitor has no indication that the image is a link. The link used here is an SVG icon which enables the colors to be changed.
Grid Items
Each grid item has an image and a text block with a heading and text. Both the image and the text block are vertically aligned in the center. Each item takes up 50% of the width on wider screens. Below the break point, the text block positions itself underneath the image.
Images
The images should all be cropped to the same size and aspect ratio before importing into EverWeb. They can all be selected at once in the Finder, dragged together and dropped onto the Assets List in the widget settings panel. They can then be reordered by dragging up or down the list.
The images in this example are 600px wide. They can have padding if required.
Links
The link icon are created using SVG code so there are no extra images to download. They have controls for adjusting the size, color, hover color and opacity on computers. The opacity is 100% when viewed on touch devices.
Shuffle
By checking a box, the order of the items can be shuffled each time the page is reloaded. Click the browser refresh button to see this in action.
Alternate
The default layout is for the image on the left and the text block on the right. Checking a box staggers the layout as can be seen in the example on this page.
Boxes
The items can have a border with controls for border width, color and radius. There is a control for spacing them out vertically.