Skip to content
Sign inJoin waitlist

Kalme documentation — Framer

Kalme for Framer is the original, free edition of the template: a calm digital marketing agency website — services with weekly and monthly prices, case studies, a blog, about and contact pages — that you edit visually and publish from Framer, no code. Read in this order, or jump to what you need.

Guide What it covers
Getting started Getting your copy, the plan you need, a tour of the project, pages and breakpoints
The CMS The six CMS collections, their fields, and adding services, projects, posts and testimonials
Making it look like your brand Colour and text styles, fonts, components, logo, images, videos, motion
Forms Sending the Contact form to your email, a webhook or Google Sheets
Going live Site settings, SEO, going live on a free or custom domain, after launch
Questions and answers Questions and answers, and the demo leftovers to replace

In a hurry

Section titled “In a hurry”
  1. Copy the template into your Framer workspace with the remix link (Getting started).
  2. Change the colour styles to your brand’s in Assets → Styles (Making it look like your brand); every page follows.
  3. Replace the logo in the Logo component, the photos, and the three videos.
  4. Replace the demo services, projects, posts and testimonials in the CMS (The CMS); edit the text on the pages directly on the canvas.
  5. Give the Contact form a destination (Forms) — it has none yet.
  6. Write a title and description for every page, then Publish (Going live).

What is in the project

Section titled “What is in the project”
  • 11 kinds of page, 37 pages — Home, About, Services, Projects, Blog, Contact, Terms and Privacy, and 404, plus a page for every service, project and post, generated from the CMS.
  • 6 CMS collections — Services (8), Tools (38), Projects (8), Testimonials (6), Blog (12) and Legal (2).
  • 3 breakpoints — Desktop (1200 px and up), Tablet (810–1199 px), Phone (up to 809 px).
  • Styles — 9 colour styles, 14 text styles and a link style, used everywhere.
  • Components — header, footer and call to action, buttons, the menu, the pricing switch, project, service, testimonial, post, value, team and pricing cards, an image ticker.
  • Motion — button and card hovers, the services accordion, the pricing switch, the showreel in the hero, a video that moves as you scroll, and the image ticker above the footer.

Other editions

Section titled “Other editions”

The same design is available as code: Next.js, Astro and HTML.

Getting help

Section titled “Getting help”