This chapter builds a grid of blog posts from two categories: a Masonry layout, a skin from the skin gallery, a row of filter buttons, and the grid on a page. Each step takes a minute. The parts of the grid editor are explained in Essential Grid at a glance.
Start a new grid with New grid on the grids overview. The steps below begin once the grid editor is open.
1. Choose the posts
The editor opens on Content, the page that decides which items the grid shows.
- Under Source, choose Posts.
- Under Which posts, choose Post in Post types.
- In Categories and tags, choose the categories the grid shows. Hold Ctrl (Cmd on a Mac) to choose more than one.
The preview beside the settings shows the posts at once, and the status line above it counts them.
Posts, pages and custom post types has every setting of this page.
2. Choose the layout
Open Layout in the rail and choose the Masonry tile: every item keeps the height of its image. Even gives every item of a row the same size, Cobbles a mosaic of large and small items. Leave Width on Content width, so the grid stays inside your page’s content column.
Layouts: Even, Masonry and Cobbles explains the columns for each screen size.
3. Give the items a skin
Open Items. The skin card shows the skin the items use. Click Change skin: the skin gallery opens with every skin, shown with the grid’s own first item. Click a skin to try it on the preview, then Done. Cancel gives the grid its skin back.
More in Items: skins on a grid and their hover.
4. Add filter buttons
Open Navigation. Where the controls sit shows the zones around the grid; a new grid already has Page numbers below it. Choose the zone Top 1, the row above the grid, and click Filter 1 under Not placed: a control you click there goes into the chosen zone. The filter buttons show the categories you chose in step 1, with Filter – All first (its text is the filter group’s “All” button text).
Sorting, search and more filter groups are in Filters, sorting and search.
5. Save
Type a name for the grid into the name field of the top bar: a grid needs a name of at least two characters before it can be saved, and a new grid’s shortcode name follows it (the pen beside the name opens Grid details, where you can change the shortcode name). Then click Save in the top bar, or press Ctrl+S (Cmd+S on a Mac). The state beside Embed changes from Not saved yet to Saved.
6. Put the grid on a page
Click Embed in the top bar and copy the shortcode with its copy button. In the block editor, add a Shortcode block to a page and paste it, or add the Essential Grid Quick Builder block and choose the grid there. Publish the page.
On a phone the same grid shows its items in one column:
Page builders and other places are in Put a grid on a page.
A gallery of chosen images
For a grid of images you pick yourself, choose Custom items as the source in step 1, then Image(s) under Add Items to choose the images in the media library. Custom grids shows how.
Good to know
- While you edit, the preview loads at most 20 posts (Preview items in Content › Limit). The page shows every item, up to the grid’s Limit.
- A new grid places its page numbers below the grid, so visitors can reach every page. To show more items another way, see Pagination, Load more and placement.
- Add-ons can be added to a grid once it has been saved.