Projects

A project is a page about one piece of your work, with a few details about it kept beside the page. The Projects panel lists your projects and holds those details.

Add a project#

1. Open the Projects panel and select New project.
2. Enter a Title. The URL slug follows it; change it if you like.
3. Under Cover image, upload a picture of the work or choose one you've uploaded before.
4. Select Create project.

The project's page opens on the stage. You can also add a project from the pages menu: select Create Page, then Project; it asks for a cover image too.

The page starts with its Project cover: the project's title and credits beside its cover image. Below it are its story, more images, a call to action and links to your previous and next projects. Add, move or delete any section but the cover's, as on any page. See Add and manage pages.

Open the Projects panel#

Select the briefcase icon in the editor's left rail. The panel lists your projects with their cover images, in your order. Select a project to see its details, and Open its page to edit the page itself.

The pages menu lists your project pages under Projects, and a project page's details there have a Project tab with the same details as the panel.

Describe a project#

A project's name is its page title, and its story is its page. Beside them, a project has:

• Tags: see below.
• Show in portfolio: turn it off to leave the project out of your portfolio. Its page stays live.

Changes save when you leave a field.

Tag projects#

Under Tags on a project, type a tag and press Enter, or select one of your tags below the field. Select × on a tag to take it off the project.

To rename, reorder or delete tags, switch the panel to Tags. Renaming a tag renames it on every project. Drag tags into the order visitors see them in. Deleting a tag takes it off every project that has it.

Show your projects in a portfolio#

A Portfolio is a gallery that shows your projects. It fills itself with them, in your order, and leaves out any with Show in portfolio turned off. Each cover opens its project, flying into the project's cover, unless you change On click. A new project appears in it as soon as you add it.

• To show your projects among other sections, add a Portfolio section (in the Work category of Add Section).
• To make a whole page of them, create a page and choose Portfolio, then Grid, Coverflow, Ribbon, Stacked list, Indent list, Grid carousel or Squish carousel. All but Grid fill the page, so it takes no other sections. On an empty page, your homepage included, the ones that fill the page are also in Full page in Add Section.

Select its Gallery settings to choose:

• Style: Image grid shows each title below its cover; Overlay grid shows it over the cover when the pointer is on it. A Coverflow or Ribbon page offers Coverflow and Ribbon instead. Only the styles that can show projects are listed.
• The style's own options. A grid has Columns (1, 2, 3, 4 or 6; phones show one), Image shape, Spacing, Show tags and Filter by tag.
• Shows: Your projects, or Your images to make it a gallery of images you add instead.
• On click: Open project, Open larger or Nothing.
• Projects to show: All, or only projects with the tags you pick.

The covers and captions come from your projects, so they're changed in the Projects panel and on each project page, not in the portfolio.

Let visitors filter by tag#

Turn on Filter by tag in a grid's Gallery settings to put a row of tags above it: All, then the tags its projects have, in your tag order. Selecting a tag shows only its projects. The chosen tag is part of the page's address, so a link to the filtered view opens filtered, and it's still chosen when a visitor comes back from a project.

Show projects in a row visitors scroll#

A Grid carousel page (create a page and choose Portfolio, then Grid carousel, or add Grid carousel from Full page in Add Section on an empty page) shows your projects in one row along the foot of the screen, each title above its cover. Visitors scroll or drag the row sideways and it goes round endlessly; while it moves the covers shrink apart and bend, and when it stops it lines up with the page's grid again. Each cover opens its project, flying into the project's cover. It fills the page, so the page takes no other sections.

A Squish carousel page (create a page and choose Portfolio, then Squish carousel, or add Squish carousel from Full page in Add Section on an empty page) is the same row in the Squish style: the covers sit side by side with no gaps and no titles, all the same width, each as tall as its picture's own shape, their bottoms on one line. As a cover reaches either edge of the screen it squeezes narrower until it's gone, and the next one widens in from the other edge. It comes with a heading at the top left; select it to change its words, or delete it. A carousel without a heading shows Add heading there in the editor.

To switch between Grid and Squish, open its Section settings and pick a Style; nothing else changes. There you also choose how many projects fill the page's width when the row is still (2, 3 or 4; on phones a grid shows one and the edge of the next, a squish row two and the edge of a third) and, for a grid, the covers' shape. It shows every project shown in your portfolio, in your order.

Link to the next project#

A Next project section (in the Work category of Add Section) shows the projects before and after the page it's on, in your order: the one before on the left, the one after on the right. After the last project comes the first again. New project pages end with one.

• Next project shows each project's cover between a label and its title. Each cover opens its project, flying into the project's cover.
• Next project (text) shows just the labels and titles. Pointing at one shows its project's cover in place of the pointer's circle, and clicking flies that picture into the project's cover.

The labels ("PREVIOUS PROJECT", "NEXT PROJECT") and the title are text like any other: click one on the page to change its words, style, size or color. Each link's title shows its own project's title in the look you give the title. In the section's settings, Style switches between Cards and Text, Card width sets how wide each card is (A third, Half or Full width), and Image shape sets the covers' shape.

Add Section offers it only on a project's page. Your site shows it once this project and another are shown in your portfolio; until then it's hidden on your site, and the editor says why.

List your projects as titles#

The Stacked list and Indent list portfolios fill a page with your projects' titles, in your order, leaving out any with Show in portfolio turned off. To make one, create a page and choose Portfolio, then Stacked list or Indent list, or add Stacked focus list or Indent focus list from Full page in Add Section on an empty page. The titles are set large, sized to the window, in your site's heading font. As visitors scroll, they pass the middle of the window, and the one there is in focus and shows its project's cover. The list never ends: after your last project comes your first again. Stacked sets the titles centered, in capitals, with the cover over the title in focus and OPEN CASE on it. Indent curves the titles around the one in focus, which is brighter than the rest, with its cover at the left. Clicking a title or the cover opens its project.

To switch between the two, open its Section settings and pick a Style; nothing else changes. The titles and covers come from your projects, so they're changed in the Projects panel and on each project page. Until a project is shown in your portfolio, the page is empty on your site, as a Coverflow or Ribbon portfolio is. In the editor, the second title is shown in focus.

Order your projects#

Drag projects in the panel into the order you want. Portfolios, focus lists, Grid carousel and Next project follow it.

The cover image#

Every project page has one cover image: the image in its Project cover. It's the image a link to the project flies onto. A project page always keeps it, so it can't be deleted, and nor can the section that holds it. To change the cover, select the image and replace it with another of your own images. A cover is always your own picture, so stock images aren't offered for it.

Make your changes live#

Projects and their details reach your live site when you publish. See Preview and publish.