Kai Marlow Framer Template Guide: Launch in Hours

Step 01

Get your content ready

Gather everything before you open Framer. When your text, images and links sit in one folder, building your site is only swapping things in. You finish in a few hours, without stopping every few minutes to write a bio or hunt for a file.

What to prepare

Your projects

Pick how many projects go in your portfolio. 3 to 6 is enough.

A cover image or cover video for each project

Decide how many images and videos each case study gets. Export the images and upload the videos to Gumlet, my pick for video hosting.

A name for each project

A short overview of each project, 2 to 3 sentences

The details of each project: project type, categories, year, your role and client

Example: one project, ready to go

One folder per project. Do this for every project and step 5 becomes copy and paste.

Brew Can Co

cover.jpg

Gallery

01.jpg

02.jpg

03.jpg

… 08.jpg

video links.txt

project.txt

Project name

Brew Can Co.

Overview

Brew Can Co. needed to stand out in a crowded coffee market filled with colorful, busy designs. I created a bold black-and-white identity that feels like a premium art piece.

Project type

Packaging Design

Learn the basics

You don’t need to learn all of Framer to launch your portfolio. You need to know six places in the editor and three rules. Learn them once and every next step goes faster.

Where things are

Numbers match the video

Toolbar

Top

Add new elements and switch between Canvas and CMS. Preview and Publish sit on the right.

Left panel

Left

Three tabs. Pages lists every page of your site. Layers shows everything on the page you are on. Assets holds your colors, text styles and components.

Canvas

Middle

Your page as visitors see it. Double-click any text to edit it. Click an image once, then swap it in the right panel.

Right panel

Right

Settings for whatever you select, like size, color, font and link. The Agent tab sits next to Style.

Breakpoints

On the canvas

Desktop, tablet and phone versions of each page, side by side. Desktop is the main one and the others follow it.

CMS

Next to Canvas

Where your projects live. Every item in the Projects collection is one project page.

Three rules that save hours

Styles change the whole site. Colors and text styles live in the left panel under Assets. Whatever you change there updates on every page.

Projects live in the CMS. You edit your projects and add new ones in the CMS, never on the canvas. More on this in step 5.

Components have variables. Repeating elements, like project cards and buttons, are components. Select one and change its content in the right panel. Only the one you selected changes, so you never need to edit inside the component.

Watch out

Don’t open a component to change its text or image. Use the fields in the right panel, or your change shows up everywhere that component is used.

Make changes on desktop first. A change on tablet or phone stays only on that breakpoint.

The Agent uses AI credits from your plan. Small edits cost less than building whole sections.

Founder tips

From Lazar, who made this template

Made a mistake? Cmd+Z (Ctrl+Z on Windows) undoes any change. Version history (Cmd+Shift+H) brings back an earlier version of your site.

Press Preview often. It shows your site exactly how a visitor sees it.

Don’t rename or move layers for now. You are only swapping content, so the structure can stay as it is.

Shortcut: prompt for Framer Agent

Copy prompt

Paste this into the Agent panel in Framer. Replace anything in [BRACKETS] first.

Explain how this project is built in simple words. Tell me which parts are components, which parts use the CMS, and which texts I can edit directly.

Mark step 2 as done

Next: Change your name →

Step 03

Change your name

Your name is in three places in this template: the big text in the hero, the navigation on top of every page, and the preloader that plays while the site loads. You do the first two here and the preloader in step 4.

Start with the hero on the home page. Double-click the big name and type yours. Below it, replace the short intro with your own.

Write your intro with the formula below. Swap each part in brackets for your own words. A client should know in five seconds if you are the right fit.

Your intro formula

Copy prompt

I [what you make] that help [who you work with] [the result they get].

Example

I design strategic brand identities that help small businesses and startups stand out and connect with their customers.

[what you make]

design strategic brand identities

[who you work with]

small businesses and startups

[the result they get]

stand out and connect with their customers

Then the navigation

The navigation sits in a layout template. A layout template is a shared frame around your pages, with the navigation on top and a placeholder in the middle where each page shows its own content. You edit it once and every page updates.

Select the Desktop breakpoint of any page and choose Edit at the top of the right panel. The layout template opens. Select the Navigation component and change these three fields in the right panel.

Name

Replace Kai Marlow with your first and last name.

Example: Kai Marlow

Role

What you do, in two or three words. It sits in the middle of the navigation.

Example: Brand designer

Time zone

Your time zone. Clients use it to know when you are around.

Example: GMT-4

Watch out

Changing the hero does not change the navigation. They are two different things and the navigation has its own fields.

The time zone is the one everybody forgets. It sits at the top of every page and quietly tells clients the wrong thing.

Founder tips

From Lazar, who made this template

Use the words your clients use. “Brand identity for coffee shops” says more than “visual storyteller”.

Read your intro out loud. If it sounds stiff, shorten it.

Shortcut: prompt for Framer Agent

Copy prompt

Paste this into the Agent panel in Framer. Replace anything in [BRACKETS] first.

Update the hero on the home page. Name: [YOUR NAME]. Intro: I [WHAT YOU MAKE] that help [WHO YOU WORK WITH] [THE RESULT THEY GET]. Then open the layout template and set the Navigation fields: Name to [YOUR NAME], Role to [WHAT YOU DO] and Time zone to [YOUR TIME ZONE]. Keep the current layout and text styles.

Mark step 3 as done

Next: Add your images to the hero →

Step 04

Add your images to the hero

Two parts of the hero run on their own: the ring of images that turns behind your name, and the preloader that plays before the site appears. Both are components, so you never open them. You swap their images in the right panel.

4.1

The image ring

On the home page, open Layers and find ImageRing inside the Hero section. Select it, then open Images in the right panel. Clear takes an image out, Add puts one in. The ring holds 7 images.

Use landscape images, close to 340 by 252 pixels in shape. Crops from your project photos work well, you do not need new ones.

The ring has a lot of other fields: Gap, Tilt, Ring Size, Perspective and more. They are set to work together, and one wrong number is hard to undo. Change only Images. Want a different feel? Write to me and we will do it together.

4.2

The preloader

The preloader plays for a second and a half before your site appears, with your name and your images. It is the first thing anyone sees.

It is hidden on the canvas, so you will not find it by scrolling. Open Layers, select Preloader under Desktop and change it in the right panel. To watch it while you work, set Canvas Preview to Yes and back to No when you are done. Preview shows it either way.

Title

Your name, the same as in the hero.

Example: Kai Marlow

Images

6 images that flash while the site loads. The ones from your ring work fine.

Size: 244 x 160 px

Miss the Title here and your hero is right, but every visitor still reads Kai Marlow for a second and a half before your site appears.

Watch out

Both components come with my demo images. They are there for the demo only, so replace every one of them before you publish.

Founder tips

From Lazar, who made this template

Pick images that hold up small. Both the ring and the preloader show them around 300 pixels wide, so a busy layout turns to mush.

Keep one look across all 13 images. Light product shots mixed with dark night photos make the hero feel random.

Shortcut: prompt for Framer Agent

Copy prompt

Paste this into the Agent panel in Framer. Replace anything in [BRACKETS] first.

Set the Title of the Preloader component to [YOUR NAME]. Then tell me how many image slots the ImageRing and the Preloader have and which of their fields I should leave alone, so I know what I still need to upload myself.

Mark step 4 as done

Next: Add your projects →

Step 05

Add your projects

Your projects live in the CMS, not on the canvas. Before you edit anything, learn two things: how the CMS works and how the project detail page works. Five minutes here saves you hours later.

Part 1

CMS basics

The CMS is a small database inside Framer. It works like a spreadsheet: you fill in content, and Framer puts it into the design for you. Three words are all you need.

Like a sheet

Collection

A list of things of one kind.

In this template: Projects and Categories.

Like a row

Item

One thing in that list.

One project, like Brew Can Co.

Like a cell

Field

One piece of content in an item.

Project name, cover, gallery.

How content reaches your site

1. Open

Projects

Pick the collection

2. Pick

An item

One project

3. Fill

Its fields

Text, images, video

4. See

Your site

Framer builds the page and cards

Where is it?

Click CMS in the toolbar at the top of the editor, next to Canvas. Your collections are listed on the left.

How do I edit?

Open a collection, click an item to open its fields, change what you need and close it.

When is it live?

Your changes save as you type. Visitors see them after you click Publish.

Why use it?

Every project looks consistent and adding a new one takes minutes. You never copy pages or rebuild layouts.

Part 2

The project detail page

The detail page is the page a visitor opens when they click a project. You design it once, and Framer reuses it for every item in Projects. In the Pages panel you find it next to your other pages, connected to the Projects collection.

One template

Project detail page

Layout, fonts and spacing

Brew Can Co.

/projects/brew-can-co

Your second project

/projects/second-project

Your third project

/projects/third-project

How it works

Each item gets its own page at its own address, built from the slug. The page pulls in that item’s name, cover, overview and gallery.

Why we use it

One design keeps every project consistent. A new project page appears the moment you add an item.

The mistake almost everyone makes

Editing the detail page on the canvas. Whatever you change there shows up on every project. So never:

Type your own text or drop images onto the page. They appear on all your projects.

Replace text that comes from the CMS. It loses its link to the field and every project shows the same words.

Delete or move sections. Every project page loses them.

Do this instead: change what a project shows in its CMS item.

Your main place to edit

The Projects collection

Almost all work on your projects happens here. The covers you set show up on the home page and the work page. Everything else fills the detail page.

5.1

Manage your projects

The template comes with 6 sample projects. To delete one, right-click the project item and choose Delete. To duplicate one, right-click it and choose Duplicate.

To add a new project, click the plus button and fill in every field.

My advice: replace the information in the existing items instead of starting from scratch. Every field is already set up, so you only swap text and media.

5.2

Project cover

For an image cover, upload your image to the Cover image field.

For a video cover, turn on Use video on cover and paste the video URL. Host your videos on Gumlet, it is my pick for video hosting.

The cover updates on every page that shows project cards, like the home page and the work page.

5.3

Content and project overview

These fields fill the text on the project page and the project cards. Here is what goes in each one.

Project name

The name clients see on the card and the project page. Usually the client or product name.

Example: Brew Can Co.

Project overview

2 sentences, about 50 words. Start with the problem the client had, then say what you made and why it works.

Example: Brew Can Co. needed to stand out in a crowded coffee market...

Project type

The main kind of work in this project.

Example: Packaging Design

Gallery

I built the gallery as one component that works for every kind of project. I often see creatives with lots of media for one project and only a few pieces for another, or a different layout in mind for each. This gallery handles all of that.

First

Pick a layout

Choose one in the Gallery Layout field. You can pick a different layout for every project.

Grid

Two items side by side in every row.

Mosaic

One large, two small, one large, and so on.

Stacked

Every item full width, one below the other.

Add your media

The Gallery field sits below Gallery Layout. Every row in it is one piece of media.

Click the plus to add a new row.

Upload an image in the Image column.

For a video, paste its Gumlet link in Video URL and turn on Use Video.

Drag rows by the handle on the left to change their order.

Any amount works

Use 10 images for one project and 3 for another. The layout adapts on its own and keeps working.

Do the same for every project, in the way that fits your work best.

Don’t change anything on the project detail page. It is a template that shows the content you enter in the CMS, so a change there hits every project.

Founder tips

From Lazar, who made this template

Put your strongest project at the top of the collection. Most visitors open one or two projects and then decide.

Start each overview with the problem the client had. Clients reading it see their own problem in it.

Shortcut: prompt for Framer Agent

Copy prompt

Paste this into the Agent panel in Framer. Replace anything in [BRACKETS] first.

Replace the sample projects in the Projects CMS collection with mine. Create one item per project from this list, with its project name, project overview, project type, categories, year, role and client: [PASTE YOUR PROJECT DETAILS]. Set Gallery Layout to [GRID, MOSAIC OR STACKED]. Delete any sample projects that are left. Leave the cover and the gallery empty so I can upload them myself.

Mark step 5 as done

Next: Write your about →

Step 06

Write your about

The about section on the home page is one big line, your photo, two short paragraphs and a link to your email. There is no separate about page in this template, so this is the only place you talk about yourself. It carries a lot.

The big line at the top is the first thing anyone reads about you. Write 2 sentences, about 35 words. The first says who you are and where you are based. The second says who you work with and what they get from working with you.

Then the two paragraphs, about 45 words each. The first one is how you work: what you start with and what you believe about the work. The second one is you outside work. Clients hire people, and the second paragraph is the one that turns you into one.

Watch out

Keep both paragraphs close to 45 words. Longer text pushes the photo and the link out of line.

The small text here is uppercase because of a Transform setting, not because it was typed that way. Type normally and the site handles the capitals.

Founder tips

From Lazar, who made this template

A real photo of you works better than a logo. Black and white fits this template best.

Do not write the second paragraph as a list of hobbies. One specific thing you actually do beats five general ones.

Shortcut: prompt for Framer Agent

Copy prompt

Paste this into the Agent panel in Framer. Replace anything in [BRACKETS] first.

Update the about section on the home page. Big intro, 2 sentences and about 35 words: I am [YOUR NAME], a [WHAT YOU DO] based in [YOUR CITY], and I work with [WHO YOU WORK WITH] who want [WHAT THEY GET]. First paragraph, about 45 words, on how I work: [YOUR NOTES]. Second paragraph, about 45 words, on me outside work: [YOUR NOTES]. Use the attached photo. Keep the current layout and text styles.

Mark step 6 as done

Next: Edit the Let’s talk section →

Step 07

Edit the Let’s talk section

The last thing on the page, and the whole reason the site exists. A big Let’s talk, your email under it and your social links.

The big text is a normal text element. Double-click it and type what you want, like say hello or start a project. Keep it to two or three words, it is set at a very large size.

The email and the links are fields in the right panel. Select the section and change them there, without opening anything.

The fields in the right panel

The email text shown under the big line.

Example: kai@kaimarlow.design

Email link

Where the email opens. Write mailto: before your address.

Example: mailto:kai@kaimarlow.design

Instagram

Link to your Instagram profile.

Example: https://instagram.com/yourname

Link to your X profile.

Example: https://x.com/yourname

Link to your LinkedIn profile.

Example: https://linkedin.com/in/yourname

Watch out

The sample links still point to demo accounts. Miss one and a client lands on someone else’s profile.

Forget mailto: in the email link and clicking your email does nothing at all.

Founder tips

From Lazar, who made this template

Do not get clever with the big text. Let’s talk works because nobody has to think about it.

Use the email you actually check. A contact form you never open costs you more work than a bad portfolio.

Shortcut: prompt for Framer Agent

Copy prompt

Paste this into the Agent panel in Framer. Replace anything in [BRACKETS] first.

Update the Let's talk section. Set the email to [YOUR EMAIL], the email link to mailto:[YOUR EMAIL], and the Instagram, X and LinkedIn links to [YOUR LINKS]. Change the big text to [YOUR TEXT, OR DELETE THIS SENTENCE]. Keep the current layout and text styles.

Mark step 7 as done

Next: Change colors and fonts →

Step 08

Optional

Change colors and fonts

This step is optional, and in this template more than in any other. Kai Marlow is black, white and one display serif. The whole look is that contrast. Swap the heading font and you do not have a different version of this site, you have a worse one. Want a different look? Email me first and we will pick something that holds together.

The template has two color styles, dark and light, and a text style for every heading and paragraph. You find them all in the left panel under Assets. Whatever you change there updates across the whole site.

Most of the small text here is uppercase. That comes from a Transform setting in the text style, not from how it is typed. To use normal capitals, open a text style, find Transform and choose None.

Watch out

Don’t set colors on single layers. Those layers stop following your styles and you have to fix them one by one later.

If you change the dark or light color, keep strong contrast between them. Light text on a light background is hard to read.

Founder tips

From Lazar, who made this template

One small change is often enough. A new dark color alone can make the site feel like yours.

If a new font looks off, adjust its letter spacing before you drop it.

Shortcut: prompt for Framer Agent

Copy prompt

Paste this into the Agent panel in Framer. Replace anything in [BRACKETS] first.

Change the dark color style to [HEX CODE] and the light color style to [HEX CODE, OR DELETE THIS SENTENCE]. Change the heading text styles to the font [FONT NAME, OR DELETE THIS SENTENCE]. Set Transform to None in every text style so my text uses normal capitals [OR DELETE THIS SENTENCE]. Keep every other style as it is.

Mark step 8 as done

Next: Check it on mobile →

Step 09

Check it on mobile

Most clients open your link on a phone first. Switch to the tablet and phone breakpoints on the canvas and scroll through every page.

Look for long words that break, images that crop badly and text that runs off the screen. Fix each one on the breakpoint where you see it.

Then open the preview on your own phone and tap through the whole site once. Watch the preloader and the ring while you are there. They move, so a screenshot will not tell you whether they feel right.

Watch out

A change on the phone breakpoint stays on the phone. A change on desktop flows down to smaller screens, so fix desktop first.

Shortcut: prompt for Framer Agent

Copy prompt

Paste this into the Agent panel in Framer. Replace anything in [BRACKETS] first.

Check every page on the phone breakpoint. Fix text that overflows, images that crop badly and spacing that looks off. Then tell me what you changed.

Mark step 9 as done

Next: Publish and connect your domain →

Step 10

Publish and connect your domain

The last step. Set how your site shows up in Google and in shared links, publish it and put it on your own domain.

10.1

Site title and description

Open Site Settings. In General you set the site title and the site description. Google shows both in search results, and they appear whenever someone shares your link.

Use the keyword you want to be found for in both. Think about what a client would type into Google to find someone like you, like brand designer in Portland.

Site title

Your name and what you do. Under 60 characters.

Example: Kai Marlow, Brand Designer in Portland

Site description

Who you help and what they get, with your keyword once. Under 155 characters.

Example: Brand designer in Portland helping small businesses and startups build brand identities that stand out.

Prompt: write your title and description

Copy prompt

Paste this into ChatGPT, Claude or any AI chat. Replace anything in [BRACKETS] first.

Write an SEO title and a meta description for my portfolio website. I am a [WHAT YOU DO] based in [YOUR CITY] and I work with [WHO YOU WORK WITH]. The keyword I want to rank for is [YOUR KEYWORD]. The title must be under 60 characters and include my name and the keyword. The description must be under 155 characters, use the keyword once and tell a client what they get from working with me. Give me 3 options for each.

10.2

Favicon and social image

In the same place you upload the favicon and the social image.

Favicon, light

The small icon in the browser tab when the browser is in light mode.

Size: 64 x 64 px

Favicon, dark

The same icon for dark mode. Upload a version that stands out on a dark tab.

Size: 64 x 64 px

Social image

The preview that shows up when you share your link on LinkedIn, X or in messages.

Size: 1200 x 630 px

Many creatives launch and forget this part. Their link then shows up as the name of a free portfolio template, with the template icon and preview. Check the title, description, both favicons and the social image before you publish.

10.3

Publish and pick a plan

Delete the Start here page in your template first. Right-click it in the Pages panel and choose Delete.

Click Publish at the top right. Your site goes live right away on a free Framer address.

To put it on your own domain and remove the Made in Framer badge, your site needs a paid plan. You pay per site, and yearly billing costs less than monthly.

Why not stay on the free address?

It looks like a test site. A client sees yourname.framer.website and wonders if you are serious. Your own domain says you are open for business.

The badge promotes Framer, not you. The Made in Framer badge sits on every page of a free site.

It is easy to remember and share. yourname.com fits on a business card, in your email signature and in a conversation.

It stays yours. If you ever move your site, the domain and the links people saved come with you.

My advice: Basic, billed yearly. This template uses 2 CMS collections, Projects and Categories, which is exactly what Basic includes. Paying yearly costs less, and you get your domain free for the first year. Pick Pro only if you plan to add a blog or other collections later.

10.4

No domain yet? Get one free

Upgrade your site to a yearly Framer plan and Framer gives you a custom domain free for the first year. Open Site Settings, go to Domains and choose Claim a free custom domain.

Framer registers it through Hover and connects it for you. After the first year the domain renews at the normal price.

10.5

Connect a domain you already own

Bought your domain on GoDaddy, Namecheap or somewhere else? First get the Framer plan that fits you, because a custom domain needs a paid plan.

Then open Site Settings, go to Domains, choose Connect a domain you own and type your domain. Framer shows you the DNS records to add. They usually look like this:

Type

Name

Value

31.43.160.6

31.43.161.6

CNAME

www

sites.framer.app

Add the records at your provider

Log in to your domain provider and open the DNS settings of your domain. Delete any other A or AAAA records for it, then add the records from Framer one by one. Always copy the values Framer shows you, in case they change.

Go back to Framer and wait for the domain to connect. It is often quick, but it can take up to 48 hours.

Some providers want a dot at the end of the CNAME value: sites.framer.app. with the dot. If the record does not save, try it that way.

Shortcut: prompt for Framer Agent

Copy prompt

Paste this into the Agent panel in Framer. Replace anything in [BRACKETS] first.

Set the site title to [YOUR SITE TITLE] and the site description to [YOUR SITE DESCRIPTION] in the site settings. Delete the Start here page. Then list anything I still need to do before I publish, like the favicon, the social image or text that is still a placeholder.

Mark step 10 as done

Launch checklist →

Launch your portfolio in a few hours without learning Framer

The ten steps

Get your content ready

Learn the basics

Change your name

Add your images to the hero

The image ring

The preloader

Add your projects

CMS basics

The project detail page

Manage your projects

Project cover

Content and project overview

Gallery

Pick a layout

Add your media

Write your about

Edit the Let’s talk section

Change colors and fonts

Check it on mobile

Publish and connect your domain

Site title and description

Favicon and social image

Publish and pick a plan

No domain yet? Get one free

Connect a domain you already own

Everything from first file to live link

Stuck on a step?