A blog page that lists posts one below the other tells readers that every post is the same. A magazine front page says something else: this is the story of the week, these belong together, and here is a thought worth stopping for. An editorial grid gives your posts that front page, and it keeps itself up to date as you publish.
This guide builds one in five steps: the posts, the layout, the card, the story that leads, and how readers get more.
The grid we are building
-
Cover story · CraftClay, patience and a very old wheel
A potter in the hills on bowls that take a week to make, and why the slow ones sell first.
8 min read
-
TravelA week under the northern lights
Black sand, cold wind and the sky turning green after midnight.
6 min read
-
HomesA house built around one olive tree
Round arches, warm walls and a courtyard that keeps the summer out.
7 min read
-
From the interview“A good room is mostly light, and one chair you love.”
An interior designer on rooms that age well
Interview · 5 min read
-
StyleThings worth carrying
A leather bag, a scarf and a pair of glasses that outlast the trends.
3 min read
-
ArchitectureOne long white curve by the sea
A building you understand from far away and keep discovering up close.
5 min read
-
HomesA reading corner in every room
A lamp, a chair and a shelf within reach are all it takes.
4 min read
-
-
From the kitchen“Cook for the people at the table, not for the photo.”
A cook on long lunches and second helpings
Interview · 4 min read
An invented autumn issue: the cover story first, two quote cards between the photos, nine stories at first and three more with Load more. Every card opens its story.
1. Start with your posts
An editorial grid shows posts, so it fills itself: a new post in the right category appears in the grid without any change to the grid.
Open the grid editor’s Content page and choose Posts under Source. Under Which posts, keep Post types on Post and choose the categories of your magazine under Categories and tags. Leave them all unchosen to show every post. Match any shows a post that is in one of the chosen categories; Match all only the posts that are in all of them.
The order is part of the story. Content › Order sets the Initial order: by date and Descending for a magazine, so the newest post comes first.
2. Masonry, in a few wide columns
Photos in a magazine have different shapes: a tall portrait, a wide landscape, a square detail. Masonry keeps every one of them whole: each item has the column’s width and the height of its own picture, and the columns fill from the top. On the Layout page choose Masonry under Layout; its Image ratio stays on Auto, so each image keeps its own shape.
Then choose few columns. Big type needs room: three columns on a desktop give each headline a width it can breathe in, two on a tablet and one on a phone. Open the row Width, layout and columns below the tiles: its Columns have one number for each device, and a device that shows “=3” follows the one above it.
Choose one gap and keep it: the grid above uses 32 px for Space between items, a little more than a card grid needs, because rules and white space do the work that frames do elsewhere. More on that in Space is a design decision.
3. A card that reads like a page
An editorial card puts the words below the picture, not on top of it: a kicker with the section, the headline, one sentence that makes you want to read on, and the reading time.
The card is the grid’s skin. On the Items page, the skin card shows the skin the items use; Change skin opens the skin gallery, where every skin shows your own first item, and Edit skin opens it in the skin editor.
In the skin editor, Card › Look › Layout decides where the words go: Type on Masonry, and Content area on Below, so the layers sit under the media instead of on it. Then add the layers in the order a reader scans them: the category, the title, the excerpt, the reading time. The title is the card’s link; Card › Click › Clickable part makes the media (or the cover) open the story too.
A few rules for the type:
- One big thing per card. The headline is the largest text; everything else is small and quiet.
- A serif for the headline gives a page its magazine voice; a plain sans for the small print keeps it calm.
- Write the excerpt for the card, one sentence. A paragraph cut off after 30 words reads like a mistake.
4. One story leads
A front page has a lead. The simplest one is the newest post, in the first place of the first column. Give it more weight than the rest: a larger headline, a longer standfirst, the section as a tag.
For that, the lead gets a skin of its own: duplicate the grid’s skin in Skins, make the headline bigger, and give the lead post that skin. Click the post in the grid editor’s preview: its chip has the cog Item settings, which opens the post’s own settings. Choose the skin under Item Settings › Choose Specific Skin. The choice is stored with the post, for this grid only. In a grid of your own items (a custom grid), the same choice is the item’s Alternate Item Skin, in its Skin tab.
Quote cards
A quote between the photos changes the rhythm: the eye stops, reads one line, and goes on. In the grid above, two cards carry a quote instead of a picture.
A quote card is one more skin for the posts that are quotes or interviews. Let its cover hide the picture: Card › Look › Cover, a solid Colour, and Card › Hover › Always show on, so the cover shows without a hover. Put the quote on the cover in large italic type, and the speaker below it in small print. Use two or three per page at most; a wall of quotes is a wall of noise.
5. Let readers ask for more
A front page shows the latest; the rest waits. On the Navigation page, Show more on All or load more and Load more on Load more button show the first items and a button that adds more.
- Items at start: the stories the page shows first. Nine fill three rows of three columns.
- Items per click: three more per click, one row.
- Button text: say what comes. “Load more stories” beats “Load more”.
- Show remaining count: the button says how many are left, such as “Load more (3)”.
The Show more menu near the top of the Navigation page has the preset Load more button, which sets these in one click: nine first, three per click, the remaining count on the button. All of them are in the row Show more items.
On the new front end of Essential Grid 4.0, the new stories come in below the others and the page does not jump; a keyboard user who pressed the button lands on the first new card.
Good to know
- With Initial order by date, the lead stays the newest post. To keep one story on top for a week, publish the next ones as drafts or give the lead the newest date.
- The cover story and the quote cards use their own skins, so they change with the grid: when you change the base skin, check them too. (The demo above styles them with the grid’s own CSS, so one file holds the whole example.)
- Give every post a featured image, also the quotes: the grid needs a picture for every item, even where the cover hides it.
Read on
- In the manual: Posts, pages and custom post types, Items: skins and hover, The skin editor, Pagination, Load more and placement
- The guides: What a good grid does, Space is a design decision
- Examples: Blog and magazine grids