The CMS — Tustel Framer

In Tustel, the projects, services, testimonials and journal posts live in Framer’s CMS: add an item, and every list and page that shows it updates.

The general guide is Edit the CMS; this page covers Tustel’s collections. Open the CMS 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

Collection	Items	Feeds
Portfolio	9	/portfolio (“Works”), one page per project, the six projects on Home (four on tablets and phones) and “Other Projects” on each project page
Service	5	The numbered services on Home (“01 — Photography”). Services have no pages
Testimonial	3	The testimonials slideshow on Home. Testimonials have no pages
Blog	12	/blog, one page per post, the three posts on Home and “From the journal” under each post

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, not the date: drag a row to reorder.

Fields

Portfolio

Field	Type	Shown
Project Title, Slug	Text, Slug	The title on cards, in the List view on Home and at the top of the project page; the address /portfolio/<slug>
Category	Text	Next to the title on cards, in the List view and in the details under the project’s title, e.g. “Brand Photography”. A free label: no filter uses it
Main Image	Image	The photo on cards and in the List view, and the cover of the project page
Short Description	Text	The summary next to the titles in the List view on Home (desktop)
Project Details: Client, Year	Text	The details under the project’s title, with the category and the timeline
Project Details: Industry, Deliverables, Timeline, Scope	Text	The “Project Details” list on the project page. The timeline also ends the details under the title
Project Details: Description	Formatted text	The text under “Project Descripton”
Project Details: Gallery 01	Gallery	The photos after the project details, in two columns
Project Details: The Challenge	Formatted text	The text under “The Challenge”
Project Details: Gallery 02	Gallery	The photos after the challenge, in two columns

Service

Field	Type	Shown
Service Name, Slug	Text, Slug	The name in the numbered list on Home; the slug only tells items apart (services have no page)
Title	Text	The heading of the service’s details, e.g. “Capturing moments with intention.”
Short Description	Text	The text under that heading
Service Image	Image	The photo beside it

On desktops, pointing at a service’s name shows its title, text and photo; on tablets a click does, and on phones the service opens under its name like an accordion.

Testimonial

Field	Type	Shown
Client Name, Slug	Text, Slug	The name under the quote; the slug only tells items apart (testimonials have no page)
Client Title	Text	Under the name, e.g. “Founder, Aurora Coffee”
Client Image	Image	The round portrait next to the name
Quotes	Text	The quote

Blog

Field	Type	Shown
Post Title, Slug	Text, Slug	The title on cards (cut after two lines) and at the top of the post; the address /blog/<slug>
Category	Option	On cards after the date, and above the post’s title: Photography, Design, Branding or Development (options)
Date	Date	On cards
Excerpt	Text	Under the post’s title
Post Image	Image	Cards and the cover of the post
Content	Formatted text	The article: headings, paragraphs, bulleted lists, italic

Adding a project

1. Select Portfolio, then + (top left of the table).
2. Fill in the fields. The Slug becomes the address: lower case, words joined by -, no brackets.
3. Add the main image, the project details, the description and the challenge, and the photos of Gallery 01 and Gallery 02.
4. Set the Status to Live and publish the site.

The project gets its own page and a line in the sitemap, and joins /portfolio. Where else it shows depends on its place in the table:

• Home shows the first six projects (four on tablets and phones), and the List view on desktops the same six;
• “Other Projects” on a project page shows the first six projects of the table, leaving out the one on the page.

Drag a project to the top of the table to show it first.

Adding a service, testimonial or post

• Service: a name, a title, a short description and a photo. Home shows exactly five services, the first five of the table, numbered “01 —” to “05 —”: the list in Part/Service List is five one-item collection lists (Service 01 to Service 05, Start at 0 to 4, Limit to 1), and the component has 15 variants — Desktop, Tablet and Phone for each chosen service. Reordering the table reorders the list. A sixth service doesn’t show until you add a sixth list (Start at 5) and its variants; with only four services, the fifth list has nothing to show — check its row on all three breakpoints.
• Testimonial: a name, a title, a portrait and the quote. The slideshow on Home shows every testimonial in table order, a new one every 8 seconds, with arrows. It has a fixed height: keep each quote about as long as the demo’s (up to about 300 characters) and check it on a phone.
• Blog post: a title, a category, a date, an excerpt, an image and the text. Home shows the first three posts of the table, and “From the journal” under a post the first three others. A new post gets the category “Uncategory” until you pick one.

The pages of the projects and the posts each use one design: their CMS page in Pages. Change that design once and every item follows. The headings of the project page (“Project Descripton”, “Project Details”, “The Challenge”, “Other Projects”) and the labels of its details are typed there.

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. Its first option, “Uncategory”, is the default for new posts, and no demo post uses it: rename it (to “Uncategorized”, say) or remove it, and give every post a category.

Category (Portfolio) is a plain text field: type any label.

Images

• Main Image and the gallery photos keep their own proportions: a card takes the shape of its photo, so a tall photo makes a tall card. In the grids, each row is as tall as its tallest card. On the project page the cover spans the full width and is cut at the height of the window.
• Post Image is cropped to about 1.41:1 on the cards; the post shows it at the full width, cut at the height of the window.
• Service Image is shown 300 × 200 px, cropped; Client Image is a small round portrait, so crop it close.
• The demo’s photos are mostly 2400 px wide. Use photos of about that width so they stay sharp on large screens; Framer serves smaller versions to phones by itself.

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: the subtitle, the greeting, the name and the role, the three photos (Slideshow/Hero Background), the specialities and their portrait (Card/Point List), the buttons and the social links;
• the client logos on Home;
• “About me” on Home: the texts, the two photos and the button;
• the four counters (Misc/Stats, on Home and About);
• the titles and texts above the lists on Home (“My Portfolio”, “What I Do”, “What clients say”, “From the journal”);
• the About page: the introduction, the portrait and “How I work”, with its four steps;
• the titles of the Works, Blog and Contact pages, and the contact form;
• the components: the header (Section/Header), the footer (Section/Footer), the photo band (Section/CTA) and “Let’s work together” (Section/Contact: the e-mail, the phone, the location and the response time).