The CMS — Titen Framer
Projects, project categories, services, blog posts and testimonials 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 Titen’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 |
|---|---|---|
| Projects | 12 | /projects, one page per project, the seven projects on Home, its category’s page, “Other Projects” at the end of a project page, and the header’s “Search projects” |
| Project Category | 3 | One page per category (/residential, /hospitality, /commercial) and the category named on a project |
| Services | 8 | /services, one page per service, and the expanding service list on Home and on /testimonial (the first four) |
| Blog | 12 | /blog, one page per post, the three posts on Home and “Similar Posts” under each article |
| Testimonial | 12 | /testimonial and the slideshow in the Home hero (the first five) |
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 table is the order on the site; drag the handle on the left to reorder.
Fields
Section titled “Fields”Projects
Section titled “Projects”| Field | Type | Shown |
|---|---|---|
| Title, Slug | Text, Slug | The title everywhere; the address /projects/<slug> |
| Location, Year | Text | The project’s details, and the year on the cards |
| Project Category | Reference → Project Category | The category on cards and on the project page, and the category page that lists it |
| Main Image | Image | Cards and the cover of the project page |
| Overview | Text | The summary on cards and on the cover |
| Section 1: Image 1, Content 1, Gallery 1 | Image, Formatted text, Gallery | The first part: a portrait, the text next to the details, then three images |
| Section 2: Image 2, Content 2, Image 3 | Image, Formatted text, Image | A portrait beside the text, then a wide image |
| Section 3: Content 3, Content 4, Gallery 2 | Formatted text, Gallery | Two texts side by side, then three images |
| Section 4: Content 5, Image 4 | Formatted text, Image | A text over a wide image |
| Section 5: Content 6, Image 5 | Formatted text, Image | An optional fifth part, the same as the fourth |
Project Category
Section titled “Project Category”| Field | Type | Shown |
|---|---|---|
| Category, Slug | Text, Slug | The category’s name, and its page at /<slug> |
Services
Section titled “Services”| Field | Type | Shown |
|---|---|---|
| Number | Text | “01”… on /services |
| Service Title, Slug | Text, Slug | The title everywhere; the address /services/<slug> |
| Overview | Text | The description in the service lists |
| Service Image | Image | The service lists and the service page |
| Point 1–5 | Text | “Key Point”: five short lines |
| About Service | Formatted text | “About the service” on the service page |
| What’s Included | Formatted text | “What’s included” on the service page |
| Highlight | Text | Not shown anywhere in the template: use it for your own purpose, or delete the field |
| Field | Type | Shown |
|---|---|---|
| Title, Slug | Text, Slug | The title, the address /blog/<slug> |
| Date | Date | On the card and the article |
| Category | Option | The label on cards and the article; “Similar Posts” shows posts of the same category (Improvement, Development, Design) |
| Author | Text | Next to the date on the article |
| Image | Image | Cards and the article |
| Excerpt | Text | The summary on cards: write one or two full sentences |
| Content | Formatted text | The article |
Testimonial
Section titled “Testimonial”| Field | Type | Shown |
|---|---|---|
| Client Name, Slug | Text, Slug | The name; the slug only tells items apart (testimonials have no page) |
| Photo | Image | The round photo |
| Rating | Text | The number after the star, e.g. 4.4. Leave it empty to show the star alone. |
| Quotes | Text | The quote |
Adding a project
Section titled “Adding a project”- Select Projects, then + (top left of the table).
- Fill in the fields. The Slug becomes the address: lower case, words joined by
-, no brackets. - Pick its Project Category, then add the main image, the five-part story and the galleries. Leave Section 5 empty for a four-part page.
- Set the Status to Live and publish the site.
The project appears on /projects, on its category’s page, in “Other Projects”, in the header search and in the sitemap. Home shows the first seven projects of the table; the seventh is the wide card.
Adding a category, service, post or testimonial
Section titled “Adding a category, service, post or testimonial”- Category: a name and a slug. Its page appears by itself. Then look at the category buttons on /projects and the footer’s Work column: if the new category isn’t there, copy an existing button or link and point it to the new page.
- Service: every field above. It appears on /services and on its own page. The service lists on Home and /testimonial show the first four services of 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 and the quote. The Home slideshow shows the first five.
The detail pages use their collection’s page design (in Pages, the nested page under /projects, /services and /blog, and Project Category). Change that design once and every item follows.
Options
Section titled “Options”Category (Blog) is an option field: 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 rest is regular content on the pages and in the components. Select the text or image on the canvas and edit it:
- the Home hero, its figures and the principles accordion;
- the About page, including the team and the awards;
- the contact details;
- the call to action on Home and on /services;
- the footer, with “Let’s Talk!”, the newsletter and the links.