Every item of a grid is drawn by an item skin: the layers that show its image, title, categories, buttons and icons, and what they do on hover. A grid has one skin for all its items; a single item can have another. The Items page of the grid editor chooses the skin and the hover of the items.
The page has:
- Presets with Item hover: what happens to the items when a visitor points at one (see below).
- the skin card: the skin’s name and its number of layers, Change skin and Edit skin.
- the rows Hover and Media in the grid (video in the items: Video in grids).
Choose a skin: the skin gallery
Change skin opens the skin gallery over the preview. Every skin is shown large, with the grid’s own first item, so you see your title and your image in it.
| In the gallery | What it does |
|---|---|
| Show with | Shows the skins with the grid’s first, second or third item, or with demo content. |
| Idle / Hover | Shows every skin at rest or in its hover state. Pointing at a skin plays its hover. |
| Search and the filters All, In this grid, Favourites, Even, Masonry | Find a skin by its name, or show only some. |
| New skin | Opens the skin editor with a new skin, in its own window. |
| Under a skin: star, Edit skin, Duplicate | Mark it as a favourite, open it in the skin editor, or make a copy to change. |
The grid’s skin comes first, marked In use. Click a skin: the preview shows it at once. Done keeps it, Cancel gives the grid its skin back.
Edit skin on the skin card opens the grid’s skin in the skin editor, in its own window. A change to a skin shows in every grid that uses it; duplicate the skin first to change it for one grid only.
Another skin for one item
One item can use another skin than the rest of the grid, for example a featured post:
- In a grid of posts: click the cog of the item in the preview, then choose the skin under Item Settings › Choose Specific Skin. The choice is stored with the post, for this grid.
- In a custom grid: open the item’s dialog and choose its skin under Skin (Custom grids).
Hover
The row Hover decides what the item a visitor points at, and the other items, do:
| Setting | What it does |
|---|---|
| Item on hover | An effect for the item under the pointer, such as Zoom In, with its amount. Nothing leaves the item as it is. |
| Other items on hover | An effect for the other items at the same time, such as fading them. |
The preset menu Item hover sets both in one click: Nothing, Zoom the item, Fade the others or Blur the others. Point at an item in the preview to see the effect; its layers show their hover as well.
Good to know
- The hover of a skin’s own layers (an icon that slides in, a cover that fades) is part of the skin and set in the skin editor. Item on hover adds an effect for the whole item on top of it.
- In new 4.0 grids, the first tap on a touch screen shows an item’s hover, the next tap opens its link.
- More about effects, and what visitors who ask for reduced motion see: Motion: entrances, hovers and re-layouts.