The skin editor decides how a grid’s items look: which layers an item shows, how they look, what they do on hover and what a click on them does. It opens in a window of its own: from Skins (a skin’s name, Edit skin, New skin), from the grid editor’s Items page (Edit skin, and the skin gallery) and from a grid card’s menu (Edit Skin).
Under the top bar are three columns: Layers on the left, the item on the stage in the middle, and the inspector on the right with the settings of the skin or of the selected layer. Every change shows on the stage at once.
The top bar
| Item | What it does |
|---|---|
| ‹ and Skins | Back to Skins in the dashboard. With unsaved changes it asks first: Save, Leave without saving or Stay. |
| The skin’s name | Type to rename the skin; a name needs at least two characters. |
| Save state | Saved, Unsaved changes, Saving…, Not saved; a new skin says Not saved yet. |
| ↶ ↷ | Undo and Redo (Ctrl/Cmd+Z, Shift+Ctrl/Cmd+Z). Back at the saved values, the state says Saved again. |
| Idle / Hover | Shows the item at rest or in its hover state, on the stage and in the layer’s style. The H key switches. |
| Play hover | Plays the hover in a loop until Stop. |
| CSS | Opens the custom CSS below the stage. |
| ⋯ | Skin info (the class prefix, which a click copies, and the ID), How a skin is built, Keyboard shortcuts, Switch the colour theme and Play effects when picked (on: picking an effect, a preset or a timing plays the hover once). |
| Save | Saves the skin and the custom CSS (Ctrl/Cmd+S). |
Layers and their zones
An item has four zones, and the Layers panel lists the layers of each: Cover · top, Cover · centre and Cover · bottom lie over the media, Content is the area below or above it. Drag a layer to change its order or to move it to another zone. The selected layer’s row shows its hover, such as “flip up”; a click on it opens that setting.
⋯ on a row, or a right-click, opens its menu: Move up, Move down (Alt+↑, Alt+↓), Move to zone, Duplicate (Ctrl/Cmd+D), Apply preset style…, Save as preset…, Copy CSS class and Delete (Del). A deleted layer comes back with Undo.
Add in the panel’s head opens Add a layer. Choose the zone under Add to, then what the layer shows; a click adds it, or drag it onto a zone of the stage. What do you want to show? searches the list.
| Group | Layers |
|---|---|
| Post | Title, Excerpt, Date, Categories, Author, Custom field…, Date badge (day + month), Likes / views count, Comments count, Taxonomy terms |
| Buttons and icons | Read more, Zoom icon, Link icon, Any icon…, View button (lightbox), Play video icon, Share buttons (Facebook, X, Pinterest) |
| Shop | Price, Add to cart, Sale badge, Rating; without WooCommerce they say “Needs WooCommerce” |
| Text and structure | Your own text, Line break, HTML block, My presets |
A new layer takes a style that fits its zone: light on the cover, dark in the content area. Browse all presets › adds a layer in one of the preset styles, or one of your own.
The stage
The stage shows the item with the skin’s demo photo. Above it:
- Width: 240, 320 or 400 px, the item’s width in the editor.
- Ratio: the proportions of an Even skin in the editor; on the site, the grid’s own ratio applies.
- Zones: outlines the four zones. They also show while you drag a layer.
- The help icon at the end, How a skin is built: a picture of the media, the cover, the layers and the content.
Click a layer on the stage to select it, or the item around the layers for the skin’s settings. Idle shows the item as a visitor first sees it; a selected layer that shows only on hover has a dashed outline. Hover shows the end of the hover.
The inspector: the card and its layers
The inspector shows the settings of the whole card (the skin), or of the selected layer (Card › Title, for example). Each has three groups: Look (how it looks), Hover (what it does on hover) and Click (what a click does). Find a setting below them, or the / key, finds a setting by its name, by its name in Essential Grid 3 or by its place until 3.2, and opens it.
The settings are in sections. A closed section shows its title, a coral dot while a value inside differs from what a new skin or layer gets, and, while its main setting differs, that setting’s value, such as “Masonry”. The i of a setting says what it does and where it was until 3.2.
Quick style
Quick style comes first on Card › Look: the few changes most skins need, each a shortcut to settings further down.
| Row | What it changes |
|---|---|
| Hover | None, Fade, Slide and Zoom apply the hover presets No hover, Fade cover, Slide up cover and Zoom + dark cover of Card › Hover. No button is pressed while the skin has another hover. |
| Accent | The background colour of the skin’s buttons and icons: five swatches, the skin’s own accent first, and More colours (+) for any colour. Shows while the skin has a button or an icon. |
| Corner radius | Rounds the item’s corners, with a slider from 0 to 48 px or a value (Boxes & shadow › Corners, with Clip content on). |
| Title size | The font size of the title layers, with a slider from 8 to 72 px or a value (their Style › Size). Shows while the skin has a title layer. |
| Preview hover | Plays the hover on the stage, as Play hover in the top bar does. |
Each change is one step for Undo. Where the corners or the title layers differ, the field is empty and shows their range.
Card › Look
| Section | Settings |
|---|---|
| Layout | Layout: Even (every item has the same height, from the grid’s ratio) or Masonry (the height follows the media and the content); Content area, Content align, Side by side (see below) |
| Colours & fonts | Every colour and font of the layers, changed in one go, and the colour and font themes (Fonts, colours and icons) |
| Media | Fit (Fill the item or Show all), Position (one of nine points); under More: Repeat |
| Cover | Cover area (The whole media or Only behind its layers), Colour (a colour or a gradient); under More: Blend mode |
| Boxes & shadow | The item’s box (Background, Padding, Border, Corners, Clip content), the content area’s box (Background, Padding, Border, Corners) and the shadow (Shadow on: None, Inside the cover, Media, Content, Media and content; Shadow, Inside, Only on hover) |
While its four sides are the same, a padding, a border width or the corners are one value; the link beside it splits the value into four.
Content above and below the media
The content area holds layers outside the media, such as a title and an excerpt under the image. Content area in Card › Look › Layout turns it on:
- None: no content area; the layers lie on the cover.
- Below or Above: the area sits under or over the media. With Even it shows on hover (in new 4.0 grids also while the keyboard focus is in the item), and the choices read Below, on hover and Above, on hover; with Masonry it always shows.
Then add layers to the Content zone. Content align aligns their text (Left, Centre, Right), and Boxes & shadow gives the area its background, padding and border. Side by side puts the media and the content next to each other (Media left or Media right). While the skin has no content area, the Content zone of the Layers panel says No content area. and offers Turn on.
Card › Hover
Always show (Desktop, Mobile) shows the cover without a hover on desktop and without a tap on mobile. Below it, two sections of tiles. Pointing at a tile plays it; a click applies it, with Undo in the message:
- Hover look sets the effects of the media, the cover and its layers together: No hover, Fade cover, Zoom + dark cover, Slide up cover, Caption band, Blur + cover, Grey to colour, Flip cover, Alternative image, and under More presets (7): Cover fades out, Zoom + blur, Flip card, Split open, Circle reveal, Cover grows up, Colour to grey.
- Cover layers come in: how the layers of the cover appear: With the cover, Fade, Slide up, Zoom, Slide down, From the left, Flip up, Skew in. One after the other makes them follow each other, 100 ms apart.
All presets on a section opens the preset browser, and its ⋯ saves the current choice as a preset of your own.
Effects in detail has every effect on its own, each with Timing (Duration and Delay, in milliseconds):
- Media effect, with Blur amount for the blur effects;
- Cover effect for the cover and, while the cover lies only behind its layers, for its Top area and Bottom area, each with On hover (Appears or Disappears) and a Line colour for the line, spiral and circle effects;
- Cover and its layers together: one effect for the cover and all its layers, on top of their own;
Alternative image: Show on hover shows the item’s alternative image.
The effects are tiles grouped by family, such as Fade, Flip, Slide, Zoom and Filters, each with its duration; pointing at a tile plays it.
Card › Click
When the item is clicked decides what a click on the item does, apart from its layers. Clickable part: None, Media or Cover. On click: Nothing, Open the post, Open a URL, Open a field’s URL, Open the lightbox or Load into the grid. A link opens in the Same tab or a New tab (Open in); More has the other targets and Nofollow.
A layer’s look
Select a layer in the Layers panel or on the stage. Its Look has these sections:
| Section | Settings |
|---|---|
| Content | Shows what the layer shows (below), then that field’s options, such as Shorten to (Full text, Words, Characters, End of a sentence (words)) |
| Style | Presets (three styles that fit the layer, All for every one), Font, Size, Colour, Background, Align; under More text options: Decoration, Italic, Capitals, Letter spacing |
| Box & position | Inner space, Outer space, Border, Corners, Shadow; Placement: In the flow or Pinned to a corner (Pinned to, with its distances); Line: Own line or Next to other layers; under More: Float, Clear |
| Visibility | Hide on small items (Never, 240, 320, 480, Custom), Always show (Desktop, Mobile: shown without a hover or a tap), Video items (Always, Hide then, Show only then), Conditions; under More: Hide by (Keep its space or Remove it) |
| Advanced | HTML tag, Height limits, No skin styling, Use !important |
A row that does nothing for this kind of layer is greyed where it is: an icon’s font rows say “Icons use their own font.” and offer Edit anyway. A row that needs another setting first says what it needs and, where it can, offers a fix. The arrow keys move a pinned layer on the stage, 1 px at a time (with Shift, 10 px).
What a layer shows
Shows picks the data of each item: the post’s title, excerpt or content, its dates, its author, its categories, tags or another taxonomy (with List: the separator, how many, and what a click does: Nothing, Open it or Filter the grid), counts and media, a product’s fields with WooCommerce, a Custom field, Your own text or an Icon. A custom field is picked with Choose: your own fields and the references of Global Settings › Custom fields. In your own text, Insert field puts a placeholder such as %title% at the cursor; each item shows its own value there.
Conditions
Conditions in Visibility shows or hides a layer for some items only: “Show this layer if:” (or Hide), then one sentence per condition, such as a custom field that has a value, is empty, equals a value or is more than one, or a kind of media that the item has or does not have. + Condition adds a condition, + “or” group a group, up to three groups of three; Remove all conditions clears them.
Style on hover
A layer’s Hover › When this layer is hovered holds the layer’s hover style: turn on Change style and set the font, size, colours, border, corners and shadow the layer takes while a visitor points at it; ↺ copies the idle values.
A layer’s hover
A layer’s Hover › When the card is hovered is how a layer of the cover appears or disappears on hover: Effect (tiles by family, each with its duration), On hover (Appears, Disappears, or Always visible: no animation) and Timing (Duration, Delay). Layers of the content area do not animate on hover; the section offers Move to Cover · bottom.
A layer’s click
When clicked decides what a click on the layer does: Nothing, Open the post, Open a URL, Open a field’s URL, Open the lightbox, Load into the grid, Play the item’s video, and under Share and more: Share on Facebook, Share on X (Twitter), Share on Pinterest and Like the post. The chosen action’s options follow it: the URL or the Custom field, Open in (Same tab, New tab; under More: Other target, Nofollow), Lightbox video for the lightbox (Always, Show this layer only then, Hide it then), and what a share Shares (The site, The post or A custom URL).
What the lightbox shows, and where content loaded into the grid opens, is set in the grid editor: Click: lightbox and Ajax content.
Starting points and presets
A new skin starts with Start with a layout on the stage: Cover on hover, Caption below, Text above the image, Product card (with WooCommerce), Title on the image, Image with an icon, Video card and Blank. A starting point sets the layout and the content area, adds its layers and its hover; Undo takes it back, and nothing is stored before the first Save.
Save as preset… in a layer’s menu saves the whole layer under a name. It comes back under Mine in the preset browser and under My presets in Add a layer.
The custom CSS
CSS in the top bar opens the custom CSS in a drawer below the stage. It is one text for all skins of the site (applies to all skins), saved with the skin’s Save.
- This skin shows the rules written for this skin, each in an editor of its own, and under Also applies the rules without a skin’s name that reach this item. Add rule starts a rule for the skin.
- All shows the whole text.
- Insert: puts the class of the item, such as
.eg-washington-wrapper, or of the selected layer, such as.eg-washington-element-0, at the cursor.
Drag the drawer’s top edge to make it taller. Esc or × closes it; your changes stay until you save.
Good to know
- A change to a skin shows in every grid that uses it. To change it for one grid only, duplicate it first (The skins overview).
- Renaming a skin changes its class prefix when you save, and custom CSS written for the old prefix stops applying. After you rename a built-in skin, Restore built-in skins in Skins brings the original back.
- The editor needs a window at least 900 px wide. Below 1100 px, Layers above the stage opens the Layers panel.
- Keyboard shortcuts in ⋯ lists them all, among them: Ctrl/Cmd+S saves, H switches Idle and Hover, / finds a setting, Alt+↑ and Alt+↓ move a layer, Ctrl/Cmd+D duplicates it and Del deletes it.
- Every setting of the 3.2 item skin editor is still there, and its i says where it was: Where did my setting go?