27 Portfolio Layouts
Grids and masonry. Filtering and loading styles. Plus the single-project layouts that sit behind them.
Grids 5
Every grid here is one Canvas Posts block with its Layout set to Portfolio. Columns decides how many projects share a row and Portfolio Gutter sets the gap between them, down to none. The one column version turns on Alternating Split Cards, so each project sits beside its description and the picture changes sides on every second card.
- 1 Column (opens in a new tab)
- 2 Columns (opens in a new tab)
- 3 Columns (opens in a new tab)
- 5 Columns (opens in a new tab)
- 6 Columns (opens in a new tab)
Masonry 6
Same block, different Grid Engine. Pick a masonry mode and the cards keep their own heights, packing into columns with no row line to respect. Card Shape is where the rhythm comes from: crop every picture to one shape, or let each project keep its own. The mixed version also moves the title inside the hover overlay.
- Mixed Columns (opens in a new tab)
- 2 Columns (opens in a new tab)
- 3 Columns (opens in a new tab)
- 4 Columns (opens in a new tab)
- 5 Columns (opens in a new tab)
- 6 Columns (opens in a new tab)
Loading Styles 5
These decide how a visitor reaches the rest of your work. Pagination Style offers a client-side paginator and infinite scroll among its choices. Open Projects In-Page loads a project above the grid without leaving the page, and Open Project In can show it in a lightbox modal. Filter Styles lays out the Canvas Grid Filter block, the row of category buttons, in each of its styles, with and without a Shuffle button.
- jQuery Pagination (opens in a new tab)
- Infinity Scroll (opens in a new tab)
- AJAX In Page (opens in a new tab)
- AJAX In Modal (opens in a new tab)
- Filter Styles (opens in a new tab)
Single Project 5
A project page takes its layout from a template you pick in the Template setting while you edit the project. The templates cover four kinds of media: a large image, a gallery slider, a thumbnail grid and a video. Each one comes with a sidebar on either side or both, at full width, or under a full-bleed hero. The pages linked here are a sample of that set.
- Parallax Image (opens in a new tab)
- Slider Gallery (opens in a new tab)
- HTML5 Video (opens in a new tab)
- Masonry Thumbs (opens in a new tab)
- Embed Video (opens in a new tab)
Layouts 6
Where the grid sits on the page. The sidebar versions put the same block in a main column beside a sidebar of widgets, such as recent posts and a quick contact form. 100% Width runs the grid from edge to edge with no gutter. Parallax switches on Parallax Cards, which turns each picture into a background layer that moves as the page scrolls.
- Default (opens in a new tab)
- Right Sidebar (opens in a new tab)
- Left Sidebar (opens in a new tab)
- Both Sidebar (opens in a new tab)
- 100% Width (opens in a new tab)
- Parallax (opens in a new tab)
Every link opens a real page on the live showcase, drawn by the same theme and blocks you install.
Build any of these from one block
The showcase is there to look at. The blocks and templates behind it ship with Canvas, so every layout above can be rebuilt on your site.
Projects are records
Your work lives in the portfolio content type, one record per project, with categories the Grid Filter reads to build its buttons. Add a project and every grid on the site that lists that category picks it up. The page itself never needs editing.
The grid is settings
Insert Canvas Posts, choose the Portfolio layout, then work down its Layout and Pagination panels using the names on this page. For the project page itself, Canvas adds 11 portfolio blocks, from the title and the meta list to related projects.
Or import a finished one
20 of the 80 demo websites import with portfolio projects in place, laid out for an agency, a photographer or an illustrator. Start from one of those and you edit the projects, not the layout.
Every plan, every layout
There is no portfolio add-on. The grids, the filter, the loading styles and the single-project templates are in Starter as they are in Agency, because every plan ships every block.
Which portfolio layout suits your work
Start from the pictures, since the layout exists to show them. Photographs shot in one orientation sit well in a fitted grid, where the rows line up. A mix of portrait and landscape work belongs in masonry, where each card can keep the shape of its picture.
Case studies read differently. When each project needs a paragraph of context, the one column grid of split cards gives it room, and a sidebar version works for an agency that wants its contact details beside the work.
Count your projects too. A small body of work fits on one screen with a filter above it. Past a few rows, pick a loading style so the page stays quick to open: the paginator for visitors who like to know where they are, infinite scroll for people who browse. For a single project, choose the template by its media first, a gallery slider for a shoot or a video for a film, and decide on sidebars last.
The rest of the library
Start from a finished page
All 141 layouts ship on every plan, alongside every block and every demo website.