Grid
The links are laid out in a grid with two items per row. The order of the items can be shuffled each time the page is reloaded. Click the browser refresh button to see this in action.
EverWeb Widgets
Sponsor Links - Shuffle Option
Item [1]
The sponsor link items are layed out using the CSS Grid Layout Module.
More Info
Item [2]
The images are all the same size and have a fixed width. The text content fills the remaining space is flexible.
Info
Item [3]
The images are all the same size and have a fixed width. The text content fills the remaining space is flexible.
Info
Item [4]
Each item is an HTML5 <figure> element with an image and an <article> element
Info
Item [5]
The <article> has an h1 heading, a paragraph and a CTA style link tab.
Info Link
Item [6]
Both the image and article are vertically aligned in the center to allow for varying amounts of text content.
Info
Item [7]
Since this is a grid layout, the item spacing is easily adjusted using the grid-gap property.
Link
Item [8]
he item spacing can be adjusted independently from the container padding. In this case, they are both set to 10px.
More Info
Item [9]
Every time the page is loaded in the browser, the order of the items will shuffle.
Info Link
Item [10]
The shuffle is created using a jQuery plugin
More InfoGrid Items
Each grid item has an image with a fixed width and a text block with a heading, text and a CTA style link tab. Both the image and the text block are vertically aligned in the center.
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.
Links
The links can be configured to open internal or external page by entering a relative or absolute file path into the URL box and can open in a new window if required.
Follow the link below to find out about relative and absolute file paths.