A grid is a list of items that Essential Grid lays out on a page: posts, products, images or items you add yourself. Every grid is made of the same parts, and the grid editor has one page for each of them.
What a grid is made of
| Part | What it decides | Where you set it |
|---|---|---|
| Source | Which items the grid shows: posts, pages, products, your own items, or a source from an add-on | Grid editor › Content |
| Layout | How the items are laid out: Even, Masonry or Cobbles, the width and the columns | Grid editor › Layout |
| Items | How each item looks: its skin and its hover | Grid editor › Items |
| Navigation | How visitors find and see more items: filters, sorting, search, page numbers, Load more | Grid editor › Navigation |
| Click | What a click on an item does: the lightbox, the post, or content opened in the page | Grid editor › Click |
| Loading | How the grid comes in: the entrance effect, lazy loading and the loading indicator | Grid editor › Loading |
The dashboard
Open Essential Grid in the WordPress menu. The top bar leads to every part of the plugin:
- Grids: the grids overview, with all your grids.
- Templates: the template library, ready-made grids to start from.
- Skins: the item skins, the look of a grid’s items (The skins overview).
- Add-ons: the add-ons and what they add.
- Settings: Global Settings, the settings that apply to every grid of the site.
- Import/Export: grids, skins and settings to and from a file.
- Help: Getting Started, the Help Center, Premium Support and the Grid Library.
Beside Help, the moon switches the admin between its light and dark colours, and the bell shows Essential Grid’s notices.
The grids overview
Each grid is a card: its preview image, its name, and tags for its layout, its source and its width. Above the cards:
- the filters All, Custom, Post and Favorites, each with its count;
- Search Grids…, Import (opens Import/Export, for grids from an export file) and New grid;
- Bulk Actions, the order (Sort by ID, Sort by Title …) and Grid View or List View.
The star on a card makes the grid a favourite. The arrow beside a grid’s name opens its menu:
| Action | What it does |
|---|---|
| Edit Grid | Opens the grid editor in its own window. |
| Embed | Shows the grid’s shortcode with Copy (Embed Grid), to put the grid on a page. |
| Export | Saves the grid to a file for another site. |
| Rename | Changes the grid’s name. |
| Preview | Shows the grid as it looks on a page. |
| Edit Skin | Opens the grid’s item skin in the skin editor. |
| Duplicate | Makes a copy of the grid. |
| Delete | Deletes the grid. |
Preview lays the grid over the dashboard, with its filters and items as on your site. Its buttons Desktop, Tablet (768 px) and Mobile (375 px) set the width, Reload builds it again, Open in new tab shows it alone, and Close goes back.
The grid editor
Edit Grid opens the grid editor. It fills its own window: a top bar with the grid’s name, Embed and Save; a rail with the seven pages Content, Layout, Items, Navigation, Click, Loading and Advanced; the settings of the page you are on; and beside them the live preview of the grid, always in view.
The grid editor explains the frame, the presets and the preview.
The “i” next to a setting
Every setting has an i beside its label. It says what the setting does and, for a setting that Essential Grid 3 had, where it was until version 3.2. Point at the i to read it, or click it to keep it open; Esc closes it. Pointing works while Help on hover is on (Global Settings › General).
To go straight to a setting, type its name into Find a setting at the top of the editor’s settings, or press the / key. The old names of Essential Grid 3 find it too.
Good to know
- The grid editor and the skin editor open in a window of their own; the dashboard stays where you left it, and closing an editor brings you back to it.
- The grid editor’s settings belong to one grid. Global Settings apply to every grid of the site.
- Ready to build one? Your first grid goes through it step by step.
- Coming from Essential Grid 3? Where did my setting go? maps the old tabs to the new pages.