Welcome, and thanks for picking up this template. This page walks through every part of the site you can change, in the order you will probably want to change it. You do not need to have used Framer before — each step says which panel to open and what to click.
Work on a copy first
Before you change anything, duplicate the project from the Framer dashboard. That gives you a clean original to fall back on if an experiment goes sideways.
How this site is put together
Almost nothing on this site is typed directly onto the canvas. The pages are layouts, and the words you see are content stored in the CMS. That separation is what makes the template quick to fill in: you edit a list of items, and every page that shows those items updates at once.
There are three moving parts:
The layout template — the shell every page shares: the top bar, the left sidebar and the footer.
The CMS collections — your articles, FAQs, changelog entries, categories and navigation links.
The components — small reusable pieces such as buttons, cards, pills and callouts.
Where to find things
Pages and the layout template live in the left-hand Pages panel. Collections live under the CMS tab. Components are at the bottom of the Assets panel.
Editing text and images
Most text belongs to a CMS item, so the fastest route is through the CMS rather than the canvas.
Open the
CMStab in the left sidebar.Pick a collection, then click the row you want to change.
Edit the fields on the right. The canvas updates as you type.
Headings, buttons and section titles that are the same on every visit — the hero on the home page, for example — are plain canvas text. Double-click them on the canvas and type.
To swap an image, select the frame, then use the fill swatch in the right-hand panel and choose Image. Always fill in the alt text field underneath: it is what screen readers announce and what search engines index.
Do not detach components
If you right-click a component instance and choose Detach, it stops following the original. Later fixes to that component will skip the detached copy. Change the component itself instead.
Updating navigation links
The links in the top bar and the footer are CMS-driven, so you never have to touch the layout to change them.
Open
CMS → Navigation Items.Each row has a
Label, aLink, aGroupand anOrder.Set
GrouptoPrimaryfor the top bar,Footerfor the first footer row, orResourcesfor the second.Use
Orderto control the sequence — lower numbers come first.
Adding a row adds a link. Deleting a row removes it. Nothing else needs to change.
Managing CMS collections
Six collections drive the whole site. Here is what each one feeds:
Documentation Articles — every article page, the sidebar links, and the Start here grid
Categories — sidebar groups and the Categories cards on the home page
Changelog Entries — the changelog list and each entry’s own page
FAQs — the questions on the FAQ page
FAQ Categories — the filter chips and section headings on the FAQ page
Navigation Items — top bar and footer links
Two fields deserve a note. Order decides the sequence inside a group, and Featured decides whether an article appears in the Start here grid on the home page.
Slugs become URLs
The Slug field is the address of the page — an article with the slug getting-started lives at /docs/getting-started. Changing a slug after launch breaks any existing link to it, so settle on slugs early.
Adding new documentation pages
A new article is a new CMS item. You do not create a page for it — the article page template renders every item automatically.
Go to
CMS → Documentation Articlesand clickNew Item.Fill in the Title, Description and Category.
Write the article in the Body field. Use Heading 2 for main sections and Heading 3 for sub-sections.
Set Order to position it inside its category.
The new article appears in the sidebar under its category, and the On this page list on the right builds itself from your Heading 2 and Heading 3 blocks. You never edit that list by hand.
Adding a whole new section
To add a new sidebar group, add an item to the Categories collection. Give it a title, an icon, an order and a landing article — the sidebar group and the matching home-page card both appear on their own.
Adding a code block
Inside the Body field, use the plus button and insert the Code Block component. Set the language and an optional filename label.
Changing colors, typography, spacing and radius
Colours are stored as tokens, so changing one updates everywhere it is used — in both light and dark mode.
Open the
Assetspanel and find the Colors section.Click a token to edit it. Each has a light value and a dark value.
Change both, or the theme switch will look wrong in one mode.
The six tokens are Background, Surface, Border, Ink (main text), Muted (secondary text) and Accent (links and highlights), plus Warning for warning callouts.
Type works the same way. The text styles — H1 to H6, Body, Body Small, Eyebrow and Code — are in the same Assets panel. Edit a style and every heading using it follows. Each style also carries responsive sizes, so check the tablet and phone values after changing the desktop one.
Spacing and radius are not tokens, but the template sticks to a small set of values. Reusing them is what keeps the site feeling consistent:
Content width — 820px, with 48px side padding on desktop.
Section spacing — 52px between sections, 96px before the footer.
Radius — 9px for small controls, 12px for cards, 14px for large panels.
One token change, one dark-mode check
It is easy to pick a colour that reads beautifully in light mode and disappears in dark. After editing any token, switch themes with the toggle in the top bar and look at the same page again.
Switching logos and brand assets
The wordmark is text, not an image, so it is a quick edit in two places: the top of the sidebar and the footer. Double-click and retype it in each.
To use a logo image instead, drag your file onto the canvas, place it where the wordmark sits, and delete the text layer. Keep it under about 32px tall so it matches the sidebar rhythm.
The favicon and social sharing image are set separately, under Site Settings → General.
Configuring light and dark mode
The toggle sits in the top bar. On a first visit it follows the visitor’s system setting; once they choose, the choice is saved in their browser and stays put.
Because it works by re-declaring the colour tokens, it needs to know their values. If you edit any token, update the toggle to match:
Select the Theme Toggle in the top bar.
Open the
Token CSSfield in the right-hand panel.Update the colour values so they match your new tokens, keeping the token ids exactly as they are.
Keep the token ids intact
The long ids in that field are how Framer identifies each colour. Change the colour values, never the ids — if an id no longer matches, that colour will stop switching with the theme.
You can also tune the transition. Duration sets how long the page-wide cross-fade takes; 420ms is the default and anything above roughly 600ms starts to feel sluggish.
Editing components and reusable sections
Components are edited once and update everywhere. Double-click any instance on the canvas, or find the component in the Assets panel, to open its definition.
The ones you are most likely to touch:
Button — hero and call-to-action buttons, with Primary and Secondary variants
Pill — small badges for versions, tags and categories
Section Header — the icon and title above each page section
Category Card — the cards in the Categories grid
Changelog Row — a single release on the changelog
FAQ Item — one accordion question
Callout — the Note, Tip and Warning blocks on this page
Figure — a placeholder for a screenshot
Components with named variants — Primary and Secondary, or Note, Tip and Warning — are switched from the Variant dropdown on the selected instance, not by restyling it.
Variants named after breakpoints
Changelog Row has variants called Desktop, Tablet and Phone. Framer picks the matching one per breakpoint automatically, so if you add a variant, name it after a breakpoint and it will just work.
Publishing and deploying
Click
Publishin the top right of the editor.Review the list of changes Framer shows you.
Confirm to publish.
Your site goes live on a free .framer.website address straight away. To use your own domain, open Site Settings → Domains and follow the steps there.
Before you publish for the first time, it is worth a quick pass over:
Page titles and descriptions, under Site Settings and on each page.
Alt text on every image.
The 404 page.
Every page at tablet and phone width.
Publishing is not permanent
Framer keeps your published versions, so you can roll back from the publish menu if something slips through. Publish early and often rather than saving it all for one big release.
Where to go next
Delete this Template Guide category once you are up and running — remove the category from the Categories collection and this article from Documentation Articles, and the sidebar group disappears with them.
If something in here does not match what you are seeing, check the Changelog for template updates, or get in touch through the link in the footer.