35 Blog Layouts
Archive layouts from a classic sidebar list through to a magazine grid, with single-post layouts to match.
Default 4
The classic archive: one post under another, each with its image above the title. It is the Blog Loop block with its Layout set to Standard, and the versions differ only in where the sidebar sits, if there is one.
- Right Sidebar (opens in a new tab)
- Left Sidebar (opens in a new tab)
- Both Sidebar (opens in a new tab)
- Full Width (opens in a new tab)
Timeline 3
Posts hang off a line down the page, marked by their dates. Blog Loop has two timeline layouts. Timeline (Grid) sets posts either side of the line across a full width page, while Timeline (List) keeps them in a single column, which is what the sidebar versions use.
Masonry 4
Cards keep their natural height and pack into columns, so a short post never leaves a hole beside a long one. This is the Masonry layout of Blog Loop, from two columns up to the full width of the screen.
- 4 Columns (opens in a new tab)
- 3 Columns (opens in a new tab)
- 2 Columns (opens in a new tab)
- 100% Width (opens in a new tab)
Grid 3
Equal cards in tidy rows, set by the Grid layout. Pick it when every post carries a strong featured image, because the image is what lines each row up.
Small Thumbs 5
A small picture beside the title and excerpt, so more posts fit on one screen. The Small layout of Blog Loop draws all of these; the versions move the sidebar or give it up, and the alternate one changes the rhythm of the list.
- Left Sidebar (opens in a new tab)
- Right Sidebar (opens in a new tab)
- Both Sidebar (opens in a new tab)
- Full Width (opens in a new tab)
- Alternate Layout (opens in a new tab)
Item Splitting 2
Two ways to break up a long archive, both chosen in the Pagination panel of Blog Loop: numbered pages, or infinite scroll that fetches the next page as the reader reaches the end. The same panel also offers an older and newer pager, a load more button and loading in batches.
Editorial 6
Front pages for a publication. Each one combines several Blog Loop blocks, with Post Image, Post Terms and Post Title placed inside them, so a lead story, a row of cards and a run of headlines share one page. Load More reveals posts a few at a time and only asks the server for more when those run out.
- Magazine (opens in a new tab)
- Mixed Feed (opens in a new tab)
- Overlay Cards (opens in a new tab)
- Split Screen (opens in a new tab)
- Load More (opens in a new tab)
- With Filter (opens in a new tab)
Single 8
A post takes its layout from a template, picked in the Template setting while you edit it. Beside the standard post with a sidebar, the theme ships small image and split media versions, a full width post, and three editorial layouts: one with a reading progress bar, one opening on an immersive hero, and one under a page title.
- Default Layout (opens in a new tab)
- Left Sidebar (opens in a new tab)
- Full Width (opens in a new tab)
- Small Image (opens in a new tab)
- Split Layout (opens in a new tab)
- Editorial (opens in a new tab)
- Editorial Immersive (opens in a new tab)
- Editorial Titled (opens in a new tab)
Every link opens a real page on the live showcase, drawn by the same theme and blocks you install.
Every archive here is one block you configure
Nothing on these pages is a fixed design you must accept whole. Each archive is a block with a layout, and each card is a stack of smaller blocks you arrange.
Choose the layout
Insert Blog Loop and pick from Standard, Grid, Small, Small Alt, three list styles, Masonry and the two timelines. The pagination style is a separate choice in its own panel, so any layout can page, scroll or load in batches.
Compose the card
Inside the loop sit the post blocks that make each card: Post Media, Post Title, Post Meta and Post Excerpt in the standard layout. Remove the excerpt for a list of headlines, or add Post Terms for a category label. Canvas has 24 post blocks in total.
Or drop in a pattern
The pattern inserter carries blog sections ready to edit, among them a grid, a list, masonry and a timeline. A pattern arrives as ordinary blocks, the same ones this page describes.
Or import a whole blog
54 of the 80 demo websites import with blog posts and their categories in place, and the Blog and Modern Blog demos are built around publishing.
Which blog layout fits how often you publish
Work out how often you post before you choose. A business that publishes once a month has a short archive, and the standard layout with a sidebar shows it off without looking thin.
A publication posting every day needs density. Small thumbnails, a grid or an editorial front page each put more stories in view, and the editorial pages give the lead story the room a newsroom would. Infinite scroll suits readers who browse. Numbered pages suit readers who come back looking for something they saw.
Masonry is for posts whose pictures come in every shape. Timeline is for anything read in date order, like a changelog, a project diary or a club season. Then pick the single post template to match: a long read deserves the reading progress bar, and a photo story deserves the immersive hero.
The rest of the library
Start from a finished page
All 141 layouts ship on every plan, alongside every block and every demo website.