A good Framer template can take you from nothing to a launched website in hours. This guide is the exact process I follow when I help clients get a template set up. Where to start, what to change, and what to leave alone.
Customising a Framer template well is mostly about not touching things you don’t need to. The structural decisions — grid, spacing, hierarchy, font pairing — have already been made by the designer. What’s left is your content, your brand, and a few technical steps before launch.
Done well, a customised template looks like a custom build to anyone but you. Done badly, you spend a week rebuilding things that were fine.
This step happens before any customisation, but it decides whether the rest will be painful.
Colours change in a click. Images get replaced. Fonts swap out. None of that is the work.
The work is rebuilding sections that don’t fit your content. When you’re picking a template, look at structure:
Don’t choose a template because the demo’s hero looks great. The hero is 5% of the work.
If you’re not sure which template type fits, I’ve rounded up the best Framer portfolio templates, agency templates, and minimal templates — useful starting points for common use cases.
It’s always a good idea to keep a copy of the original. Something you can refer back to in case it doesn’t go as planned.
Before you start editing your template, click “Duplicate” from your Framer dashboard.
Before you start editing your template, it helps to know where things live. Framer has four panels:
That’s the whole tool. Once you know which panel does what, every Framer tutorial starts making sense.
Before you touch a single colour or font, replace every placeholder with your own copy.
To edit text: double-click it. Type your copy. Click outside to commit.
To replace an image: click it once to select. In the right panel, find Replace Image. Upload your file or pick from Framer’s libraries.
Two reasons to do this first. Your copy is never the same length as the designer’s — “Modern design studio for ambitious brands” is 45 characters; your tagline might be 28 or 72. The layout was sized for the first one. You’ll only see where it breaks once your real copy is in.
And content changes decisions. Once your actual case studies are on the page, you’ll realise you don’t need the testimonial slider. Or the logo bar sits in the wrong place. Or the hero is asking for a different CTA.
Design decisions made without real content are guesses.
Good Framer templates use variables for all colours and typography styles. Find them in the Assets tab on the left before you edit anything.
To change brand colours site-wide: Left panel → Assets → Styles → Color. Each entry is a colour variable. Click one, change the hex, save. Every button, link, and accent that references that variable updates.
To swap fonts: Left panel → Assets → Styles → Typography. Each entry is a text style — H1, H2, body, caption. Click one, change the font in the dropdown, adjust size and weight if needed. Every heading or paragraph using that style updates.
Two or three font styles is the cap — usually one for headings, one for body, sometimes one for accents. Most templates ship with that already. Keep to it.
The trap: changing a colour or font on an individual element instead of the variable. It works in that one spot. Three weeks later when you add a new page, that element won’t match.
This is the single biggest difference between someone who customises a template well and someone who makes it look off.
Framer cascades changes from desktop down to tablet and mobile. Not the other way around.
Edit a button on mobile and only the mobile version updates. The desktop and tablet versions stay where they were. Two weeks later you wonder why your buttons are inconsistent — you made the change at the wrong breakpoint.
Rule: do every edit at desktop, then check tablet and mobile. Override at smaller breakpoints only when you genuinely need a different layout there.
Most of the time you’ll spend on a template goes to image work, not design changes. The design is mostly swap-and-save. The images involve sourcing, cropping, compressing, and making sure everything looks like it belongs to the same brand.
What you need to get right:
Spend longer on images than you think you need to. It’s the thing that separates a template that looks great from a template that looks like a template.
Open the Pages tab in the left panel. Every page in the site is listed there.
If you delete a page, check anything that linked to it. Framer doesn’t warn you about broken internal links. Run through the nav and footer afterwards.
Sections are the building blocks of every page. Hero, features, testimonials, pricing, FAQ, CTA, footer.
To add a section: the best route is to drag one from Assets → Components. Most templates ship with a rich library of premade sections and components styled to match the rest of the site. Alternatively, hit CMD + K, search for the component, and insert.
Framer also has prebuilt sections in the Insert menu, but they won’t follow your template’s style out of the box — you’ll need to restyle them to match.
To remove a section: click its outer frame, hit Delete.
Hiding is also an option if you’d rather keep a section in the file but not show it on this page. Right-click the layer → Hide, or set Visibility: Hidden in the right panel.
One thing to know: if you delete a component instance from the canvas, you’re only removing it from that page. The component itself stays in Assets → Components and can be dropped back in anywhere.
Every Framer template with a blog, case study section, or project gallery uses a CMS collection.
To open the CMS: top-left of the editor, click the CMS icon (it looks like a database). The panel lists every collection in the template.
The thing that confuses everyone: there are two layers, and you can edit either. The structure of the collection (what fields exist, how they’re arranged on the page template) and the content of an individual entry (the actual text and images for one blog post).
If you want all your case studies to show a “client name” field that’s currently missing, you change the structure. If you just want to write a new case study, you add an entry.
Open the collection before you write your first entry. Look at what fields exist. Look at the listing page. Look at the detail page. Understand which fields appear where.
Skip this and you’ll spend an afternoon wondering why your new blog post isn’t showing up on the homepage. It’s always because the collection has a filter you didn’t notice, or a “featured” toggle that’s off by default.
For CMS-driven pages like case studies or blog posts, you can set a section’s visibility based on a field in the collection. One page template then handles every variation, instead of you maintaining separate layouts.
On a portfolio template, some case studies might have a hero video while others only have an image. Add a video field to the collection and set the video section’s visibility to “Show if video is set.” Entries with a video show it; entries without it skip the section entirely.
The same approach works for a client-quote section (show if a quote exists), an awards row (show if awards are listed), or a “featured” toggle that drives which entries appear on the homepage grid.
Framer’s conditional visibility supports operators like is set, is not set, equals, and greater than — enough to cover most real-world cases without building two page templates.
Good templates are built from components. Navigation, footer, buttons, cards — each defined once, used everywhere. Components are identified by a purple icon in the layers panel and a purple outline on the canvas when selected.
Before you edit any component, double-click it to enter the master. Editing an instance only changes that one place. Editing the master updates every instance.
Need a white button on a dark section? Make a variant of the component. Don’t override it locally and don’t duplicate the whole component.
Most templates ship with a contact form already wired up. Most people forget to point it at their own email.
In the form’s properties, find “Send To” and put your address in. Then send a test submission from the published site. I’ve seen Framer sites live for six months before anyone noticed the form was still going to the template designer’s inbox.
Preview → Top toolbar → switch between Desktop, Tablet, Mobile.
Check all three after:
Mobile matters as much as desktop — arguably more, since most visitors land on phones first. Check every change at every breakpoint before moving on.
Run this before you publish. Five minutes per page.
When you’re done, publish. Framer gives you a free yoursite.framer.website subdomain by default. For a real site, point your custom domain at it — Framer’s docs walk you through the DNS records.
The instinct to keep tweaking past publish is normal. Resist it for the first week. Look at how the site actually performs before changing anything else.
A customised Framer template is done when:
That’s it.
If the customisation starts feeling like redesign — rebuilding navigation, restructuring the homepage, reworking the component system — the template probably isn’t the right fit for what you’re building. Better to spot that early and pick a different template, or bring in a designer to go custom from there.
Here’s the one I give clients. Look at your customised template next to the original.
Can you tell it’s the same template? If yes, you’ve probably under-customised — the colours and content aren’t yours enough yet.
Is it unrecognisable? You’ve over-customised. You spent money on design work you then threw away.
The right answer is: clearly the same template, but every surface feels like it belongs to you. Which is the state to aim for.
Or get access to every template I’ve made with Unlimited Access.
Join 3,000+ designers · Unsubscribe at any time