A grid can show all its items at once, or show some and let visitors see more: page by page, with a Load more button, or as they scroll. The Navigation page of the grid editor sets this, and where the grid’s controls (filters, sort, search, page numbers, arrows) sit around it.
Show more
Show more at the top of the Navigation page is one menu with the common ways; Show more in the quick bar above the preview names the current one.
| Choice | What visitors get |
|---|---|
| Page numbers · 3 rows / · 2 rows | Pages of three or two rows, with page numbers below the grid. |
| One row with arrows | One row at a time, turned with arrows. |
| Load more button | The first items, and a button that adds more. |
| Infinite scroll | The first items; more come as visitors scroll to the end. |
| Only the first rows | The first rows, and no way to see more. |
| Show all at once | Every item at once. |
The row Show more items holds the details.
Show more chooses between Pages and All or load more.
With Pages:
| Setting | What it does |
|---|---|
| Rows per page | The rows of one page. |
| Phones: own rows / Rows on phones | Another number of rows on phones. |
| Autoplay / Time per page | The pages turn by themselves. Autoplay needs page numbers or the next arrow placed in the grid. |
| Swipe to turn pages | Visitors on touch screens swipe to the next page; Page scrolls while swiping and Swipe distance fine-tune it. |
| Page numbers | Short (1 2 … 6) or All. |
| Scroll to top / Scroll offset | On a new page the window scrolls up to the grid, leaving the offset free. |
With All or load more:
| Setting | What it does |
|---|---|
| Load more | Off: all at once, Load more button or Infinite scroll. |
| Items at start | The items the grid shows first. |
| Items per click | The items each click (or each scroll to the end) adds. |
| Button text | The button’s text. |
| Show remaining count | The button says how many items are still to come: “Load more (12)”. |
| Hide the button | With Infinite scroll: no visible Load more button while the next items come as visitors scroll. |
| Message when loading fails | What the grid says if more items cannot be loaded. |
A grid that has pages but no page numbers or arrows to reach them shows Only the first rows; the editor says so and offers to place the page numbers. Settings a grid does not use are collected under Not used here with Show anyway.
Where the controls sit
Where the controls sit is a map of the zones around the grid: Above · 1 and Above · 2 above it, Left and Right beside it, Below · 1 and Below · 2 below it. The controls the grid has but does not show wait under Not placed: Previous arrow, Next arrow, Page numbers, Cart, Sort, Search and every filter group.
- Click a control under Not placed to add it to the chosen zone, and drag it between zones.
- × (or Delete) takes it out of the grid again; Alt with the arrow keys changes its order in the zone.
- Click a zone to set its Align, its distance to the grid (Space below for a zone above the grid, Space above for one below it) and Space between controls.
The preset menu Placement places the usual sets in one click, such as Filters above, pages below, Filters and sorting above, pages below or Filters above, arrows at the sides. The Load more button is not a control of a zone: it always sits below the grid.
The map also has the zone Outside the grid, for controls placed elsewhere on the page by shortcode (Filters, sorting and search).
Style and memory
The row Style and memory holds:
- Navigation style: the look of the filter buttons, the page numbers and the arrows. The presets show each style as a tile.
- Remember visitor choices: with Remember the filter, Remember the search and Remember the page, a visitor who comes back within the time set in Remember for finds the grid as they left it. These choices are stored in a cookie, and only when you turn them on (Does Essential Grid set cookies?).
How the items move when visitors filter, sort or turn a page has its own section on the Navigation page, Change effect (Motion).
On the page
Page numbers below an Even grid:
A Load more button below a Masonry grid:
Good to know
- The texts “No matching items” and “All items loaded” (on the Load more button when nothing is left) are set for every grid in Global Settings › Content.
- In new 4.0 grids, Load more and search are plain requests that page caches can serve, and the page buttons and Load more are real buttons for keyboards and screen readers.
- Which items load first, and lazy loading of images: Loading and performance.