The CMS — Kalme Framer
Services, tools, projects, testimonials, blog posts and legal texts live in Framer’s CMS. Add an item and its page, its card in every list and its links appear by themselves. The general guide is Edit the CMS; this page covers Kalme’s collections.
Open it from the top-left menu → CMS (Alt + 2). The left panel lists the collections; the Fields tab shows the
fields of the selected collection.
The collections
Section titled “The collections”| Collection | Items | Feeds |
|---|---|---|
| Services | 8 | /services, one page per service, “More Services” at the end of a service page, the service named on a testimonial |
| Tools | 38 | The “Tools” list of each service (a service picks its tools from here) |
| Projects | 8 | /projects, one page per project, the four projects on Home, “Related Projects” at the end of a project page |
| Testimonials | 6 | The testimonial cards on Home |
| Blog | 12 | /blog, one page per post, the posts on Home and “More Blog” under each article |
| Legal | 2 | Terms of Service and Privacy Policy, one page each |
Every item has a Status: Live items are published, Draft items are not. Use Draft to prepare an item before it goes online. The order of the items in the list is the order on the site — drag the handle on the left to reorder.
Fields
Section titled “Fields”Services
Section titled “Services”| Field | Type | Shown |
|---|---|---|
| Service Title | Text | Title everywhere |
| Slug | Slug | The address: /services/<slug> |
| Short Description | Text | Under the title on the service page and on the service cards |
| Image 01 | Image | The service page and the cards |
| Image 02 | Image | A second photo of the service |
| Tools | Multi-reference → Tools | The “Tools” list on the service page |
| Action Link | Link | Where “Book an intro call” on the pricing card goes (the demo: cal.com) |
| What We Offer, Key Benefits | Formatted text | The two bullet lists on the service page; start a bullet with bold text for its title |
| Weekly Price, Monthly Price | Text | The two prices of the pricing card, with their currency ($500) |
| Weekly Feature 1–4, Monthly Feature 1–4 | Text | “What’s included” in each plan, four lines each |
The pricing card switches between the Weekly and Monthly fields. Prices are text, so write them in your currency.
| Field | Type | Shown |
|---|---|---|
| Tool Name | Text | The name in a service’s tool list |
| Slug | Slug | Used only to tell items apart; tools have no page |
| Link | Link | The tool’s website |
Projects
Section titled “Projects”| Field | Type | Shown |
|---|---|---|
| Project Title, Slug | Text, Slug | Title, /projects/<slug> |
| Industry, Year | Text | The project facts (Client); the year also on cards |
| Short Description | Text | Under the title on the project page |
| Main Image | Image | Cards and the top of the project page |
| Services | Multi-reference → Services | The services listed on the project page |
| Overview, Process, Result | Formatted text | The three parts of the case study |
| Image 01 | Image | Next to the overview |
| Image 02, Image 03 | Image | Next to the process |
| Image 04 | Image | Next to the result |
Testimonials
Section titled “Testimonials”| Field | Type | Shown |
|---|---|---|
| Client Name, Slug | Text, Slug | The name; the slug only tells items apart |
| Client Image | Image | The round photo |
| Rating | Option | The number of stars |
| Company | Text | Under the name |
| Service | Reference → Services | The service the client used |
| Company Logo | Image | The logo on the two wide cards |
| Quotes | Text | The quote |
| Field | Type | Shown |
|---|---|---|
| Post Title, Slug | Text, Slug | Title, /blog/<slug> |
| Category | Option | The label on cards and the article; “More Blog” shows posts of the same category (UX/UI, Web Design, Product Design) |
| Date | Date | Publication date |
| Post Image | Image | Cards and the article |
| Excerpt | Text | The summary on cards — write one or two full sentences |
| Content | Formatted text | The article |
| Field | Type | Shown |
|---|---|---|
| Title, Slug | Text, Slug | Title, /legal/<slug> |
| Date | Date | “Last updated” |
| Content | Formatted text | The text |
Adding a service
Section titled “Adding a service”- Add the tools it uses to Tools first, if they aren’t there.
- Select Services, then + (top left of the table).
- Fill in every field. The Slug becomes the address — lower case, words joined by
-, no brackets. - Pick its Tools from the list, add the two images, the two lists, the prices and the four features of each plan.
- Set the Status to Live and publish the site.
The service appears on /services, on its own page, in “More Services” and in the sitemap. Three things do not update themselves:
- The accordion on Home lists five services written into the component (numbers “01” to “05”), not read from the CMS: edit the rows in the component if your services change.
- The “Services” choices of the Contact form are typed into the form: add or rename the choice there (Forms).
- Testimonials and projects name services by reference: pick the new service in their Service or Services field where it applies.
Adding a project, post or testimonial
Section titled “Adding a project, post or testimonial”- Project: fill the fields above and pick its Services. The project page, its card on /projects and in “Related Projects”, and its sitemap line appear. Home shows the first four projects in the table.
- Blog post: as above, with an image, a category and an excerpt. Home shows the first three posts.
- Testimonial: a name, a photo, the rating, the company, the service and the quote; add a company logo if it should appear on a wide card. Home places the testimonials in its mosaic around the video; the demo’s sixth testimonial (Mark R.) is not shown there.
- Legal text: a title, a slug, a date and the text.
The detail pages use their collection’s page design (in Pages, the nested page under /services, /projects, /blog and /legal). Change that design once and every item follows.
Options
Section titled “Options”Rating (Testimonials) and Category (Blog) are option fields: open the field in Fields to add, rename or remove an option. Renaming an option renames it on every item.
Content that is not in the CMS
Section titled “Content that is not in the CMS”The home hero and its showreel images, the numbers in the about section, the services accordion on Home, the values and the team on About, the contact details and opening hours, the call to action above the footer and its images, and the footer are regular content on the pages and in the components: select the text or image on the canvas and edit it.