The grid editor opens in a window of its own and fills it. The settings sit on the left, the live preview of the grid on the right, always in view: every change shows in the preview as you make it.
The top bar
| Item | What it does |
|---|---|
| ‹ Grids | Back to the grids overview. With unsaved changes it asks first: Save, Leave without saving or Stay. |
| The grid’s name | Type to rename the grid. |
| Pen | Grid details: the shortcode name (the alias in the grid’s shortcode) and the card image of the grids overview. |
| Embed | The grid’s shortcode and a PHP line, each with a copy button, and the name of its block (Put a grid on a page). |
| Save state | Saved, Unsaved changes, Saving…, Not saved; a new grid says Not saved yet. |
| Add-ons | The add-ons of this grid, with the number of new add-ons beside the label. A new grid can have add-ons once it has been saved. |
| ? | Help: the Help Center and the Keyboard shortcuts. |
| ⋯ | Rebuild preview, Preview: show all items, Switch the colour theme, Delete grid. |
| Save | Saves the grid; Ctrl+S (Cmd+S on a Mac) does the same. |
The rail: seven pages
Each page answers one question about the grid:
| Page | Question | Chapter |
|---|---|---|
| Content | What is shown? | Posts, pages and custom post types |
| Layout | How is it laid out? | Layouts: Even, Masonry and Cobbles |
| Items | How does an item look? | Items: skins on a grid and their hover |
| Navigation | How do visitors see more, filter and sort? | Filters, sorting and search |
| Click | What happens on click? | Click: lightbox and Ajax content |
| Loading | Loading and performance | Loading and performance |
| Advanced | For developers | HTML id: the id the grid’s element gets on the page, for your own CSS or a link to the grid. |
Below the seven pages, the add-ons of the grid follow, each with a page of its own; + adds one. Alt+1 to Alt+7 open the pages from the keyboard.
A coral dot on a page means that a value on it differs from what a new grid gets:
A page: presets first, then its settings
Most pages start with Presets: one click sets several settings at once, and the preview shows the result. A message after the click offers Undo.
- Presets whose look matters are tiles: the layout, the space between items, the mosaic pattern of Cobbles and the navigation style. The other presets are menus, such as Item hover, Show more or Lightbox shows.
- When the grid matches no preset, the row says Custom. Its menu names the closest preset and the difference, and offers Reset to that preset (for example “Reset to Masonry · 3 columns”) and Save current as preset….
- All presets opens the preset browser: search, Favourites, Mine (your own presets) and Library, the looks of the template library. ⋯ saves the current settings as a preset of your own and exports or imports your presets.
- The template library’s looks under All presets › Library come from its premium templates, which need a yearly licence (Pricing); without one they show, but you cannot use them.
Below the presets come the few choices that shape the page (on Layout: the layout and the width), then the page’s settings in closed rows, one per group, such as the row Width, layout and columns. A closed row shows its title, a coral dot while a value inside differs from the default, and the changed value. Click the row to open it.
Changed values and their reset
A setting whose value differs from what a new grid gets has a coral dot before its label, and ↺ beside it sets the default back. The dot also shows on the closed row, its section and the page in the rail, so a changed value is easy to find again.
Find a setting
Type into Find a setting at the top of the settings, or press the / key. The results show where each setting is and, below it, its place in Essential Grid 3.2 (was: …). Choose a result: the editor opens its page and row and puts the cursor in it. Old names such as “Smart Loading” find their settings too.
The preview
The preview shows the grid with the posts or items it really has, drawn by the classic front end (a new 4.0 grid on your site uses the new front end, so details such as the lightbox can differ). Above it:
- the status line counts the items the preview shows: “24 items”, or “8 of 24 items” while Load more keeps the rest back, as on the site. A posts grid’s preview loads at most the number of posts set in Content › Limit › Preview items (20 on a new grid). Preview: show all items in ⋯ shows all of them at once, without the Load more button.
- the device switch shows the grid at Window width or at a breakpoint: Desktop Medium (from 1170 px with the standard breakpoints), Tablet (from 778 px) and Mobile, shown at a phone’s 390 px; the arrow lists all eight breakpoints. The preview then uses that breakpoint’s columns.
- Interact: off, a click on the preview selects what you clicked (an item, the filter bar, Load more, the space between items) and shows its choices; on, the preview’s filters, pages and links work as on the site.
- the quick bar with the settings you change most: Layout, Spacing, Show more, Filters, Effects and, at its end, Columns on the breakpoint of the device switch.
Some changes need the preview built again; it then says Preview out of date with Rebuild preview. The panel’s head can hide the settings (Hide settings), so the preview takes the whole width; Show settings brings them back. The edge between settings and preview can be dragged.
Save
Save stores every change of every page at once. While there are unsaved changes the button carries a ring and the state says Unsaved changes. Closing the window or reloading it asks first.
Good to know
- The editor needs a window at least 900 px wide. Below 1200 px the settings lie over the preview; Preview and Settings switch between them.
- Every setting of Essential Grid 3.2 is still there, on one of the seven pages, in Grid details or in the top bar. Its i says where it was: Where did my setting go?