Imprint
Portfolio template for Framer
Setup guide
Start here
Imprint’s projects are in the CMS, and everything else is in a right-hand panel: one for each page, plus two layers in the Site layout. Press Preview to see the full site with its motion. The canvas shows each page at rest.
Delete this page before you publish your site. Nothing links to it.
Where everything is
To change
Go to
Fields
Projects and their photos
CMS → Projects
Title, Slug, Tag, Client, Year, Category, Description, Cover, Images
Email and social links, on every page
Site layout → Footer layer
Email, Socials
Your name, clock, navigation and small labels
Site layout → Site layer
Name, Clock label, Time zone, Nav, Labels
About page
Pages → /about, then click the design
Image, Heading, Role, Bio, Services label, Services
Contact page
Pages → /contact, then click the design
Image, Heading, Name label, Email label, Message label, Send
404 page
Pages → /404, then click the design
Code, Heading, Link
To open a Site layout layer: go to the Assets tab and select Site, then go to the Layers tab and select Footer or Site. The settings appear in the panel on the right.
The Work page has no settings of its own. It’s built from your CMS projects and the Footer layer.
Add your projects
01.
In CMS → Projects, add a project and fill in its text fields. Tag is the second line on the card, under the title. Slug sets the project’s address, such as /work/ochre.
02.
Add a Cover. It’s the card on the Work page, cropped from the center to a portrait shape of about 4:5.
03.
Add your photos to Images, in the order you want them in the project drawer. They keep their own shape, so portrait and landscape can sit together. With no Images, the drawer shows the Cover.
04.
Drag projects in the CMS to reorder them. The order sets the grid and the numbering, 01., 02. and so on, with no number to fill in.
Use photos at least 1440 px wide, so they stay sharp on large screens.
Set up the footer
The footer is one set of details, shared by the Work, About and Contact pages. Change it once on the Footer layer and every page follows. The contact form sends to this email too.
Clicking the footer in a page’s design won’t select it, because each page draws the footer as part of its design. Always edit it on the Footer layer.
Add your About and Contact details
Open each page and click its design to see its settings on the right. In Bio, a blank line starts a new paragraph. Images are cropped to the same 4:5 shape as the covers.
Set your clock
The nav shows a live clock. Set Time zone on the Site layer to a name such as UTC, Europe/Lisbon or America/New_York, and Clock label to the text beside it, such as GMT or LIS.
How the contact form works
Pressing Send opens the visitor’s own email app, with their message filled in and addressed to your footer email. Framer doesn’t store or deliver these messages, and there’s nothing to connect.
About the demo content
The name, email, projects and client names are made up, so replace them.
The photos are from Kaboompics (kaboompics.com) and are used with its permission. You can keep them under the Kaboompics License, or replace them with your own work or another free stock library. Credit isn’t required, though it’s always appreciated.
Before you publish
Replace the demo name, email and projects.
Add your social links on the Footer layer.
Change the name in each page’s title, including the project page’s title. Find them in each page’s settings.
Update the site title, description, social image and favicon in your site settings.
Send a test message from the contact form.
Delete this page.
Please don’t change
The site depends on these, so renaming or deleting them can break it:
The Site and Footer layers and the CMS data frame in the Site layout.
The page paths /, /about, /contact, /404 and /work/:Projects.
The fields in CMS → Projects. Don’t delete them or use them for something else.
What you can’t edit on the canvas
The site’s design and motion run as one code component. That keeps the layout and transitions exact, but it has limits:
You can’t select or restyle individual parts of the design, such as colors, fonts or spacing. Those live in the code file Site.tsx.
The canvas doesn’t show hover effects, transitions or the project drawer’s motion. Use Preview to see them.