Getting started — Tustel Framer
Tustel for Framer is free: one link copies the portfolio into your Framer workspace. This guide covers the copy, the plan you need, the pages and the layout.
Get your copy
Section titled “Get your copy”You get Tustel as a remix link: opening it copies the whole project (pages, CMS, styles, components) into your own Framer workspace.
- Directly: open the remix link, sign in to Framer if asked, and confirm the copy.
- From the Framer Marketplace: open the Tustel page, click Use for Free, then Copy in the Remix window.
- From framebrick.co: click Remix free on the Tustel page; it opens the same link.
Choose a workspace if Framer asks. The copy is yours: nothing you change affects the original, and updates to the original don’t change your copy. The basics of remixing are in Get your copy.
The plan you need
Section titled “The plan you need”You need a Framer account (free) to copy, edit and publish on a free framer.website address. Tustel has four CMS
collections, so a site on your own domain needs Framer’s Pro plan; Basic includes two. Only projects and posts have
pages of their own, but the services and the testimonials are collections too, and they count. What each plan includes,
and what it costs today, is on Which Framer plan do you need?.
A tour of the editor
Section titled “A tour of the editor”The menu at the top left switches between the Canvas (the pages, Alt + 1), the CMS (the collections,
Alt + 2) and Settings (Alt + 5), among others.
On the canvas, the left panel has three tabs:
| Tab | What you find there |
|---|---|
| Pages | Every page. Each project and post has a page of its own, made from one CMS page design per collection (/portfolio/…, /blog/…) |
| Layers | The structure of the selected page |
| Assets | The layout templates, the components, the code files, and the colour, text and link styles |
The right panel shows the properties of whatever you select.
| Page | What it shows |
|---|---|
| Home | The hero over three changing photos: “Hello, I’m Alex Carter”, “Book a call”, “View my works” and the specialities card; the client logos; “About me” with two photos and four counters; six projects, as cards or (on desktop) a list; the photo band; the services; the testimonials; three posts; “Let’s work together” with the contact details |
| /about | The name with a portrait, an introduction and the two buttons; “How I work” in four steps beside a photo, with the four counters; the photo band |
| /portfolio | “Works” in the menu: every project, six at a time on desktop (four on tablets and phones) as you scroll. Its detail page (one per project) shows the title with the client, category, year and timeline, the cover, the description and the project details, a gallery, the challenge and a second gallery, then six other projects and “Let’s work together” |
| /blog | Every post, six at a time on desktop (four on tablets and phones) as you scroll. Its detail page (one per post) shows the category, the title, the excerpt, the cover and the article, then three other posts (“From the journal”) |
| /contact | The title, a short invitation and the project enquiry form |
| /404 | Page not found, over a full-screen photo, with a button back to Home |
In Layers, on Desktop, the pages hold these sections, top to bottom:
- Home: Hero, Client, About, Section/Portfolio, Section/CTA, Services, Testimonials, Blog, Section/Contact;
- About: Page Title, Step, Section/CTA;
- a project page: Main, Other (the other projects), Section/Contact;
- a post page: Main, Blog (the three other posts);
- Works, Blog and Contact: one section each, Main.
The names that start with Section/ are components (Making it look like your brand): edit one, and every page that shows it follows.
The header and the footer
Section titled “The header and the footer”The header (Section/Header: the logo, the menu with Home, About, Works, Blog and Contact, and “Book a call”; on phones the logo and the menu button) and the footer (Section/Footer: the logo, the social links and a short note) are components. Edit the menu, the links and the note there once, and every page follows. The menu looks the same on every page: it doesn’t mark the page the visitor is on.
Every page uses one of two layout templates, Assets → Templates → Primary and Secondary. Select a page in Pages to see which, in the right panel → Style → Template:
- Primary on the pages that open with a full-screen photo, Home and 404. The header lies over the photo and scrolls away with it. On Home, a second, solid header appears once the visitor has scrolled past the client logos, and only while they scroll up: the template’s Scroll Section, set on Home to the client logos section (“client”), decides where. The 404 page sets none, so there the second header never shows.
- Secondary on every other page: a solid header that hides as the visitor scrolls down and comes back as soon as they scroll up.
On phones, the menu button opens the menu: the header grows from 54 to 445 px tall and lists the links and “Book a call”.
When you add a page, give it the Secondary template, unless it opens with a full-screen photo like Home. A Primary page needs its own Scroll Section, or its solid header never shows.
Breakpoints
Section titled “Breakpoints”Every page has three layouts, shown side by side on the canvas:
| Breakpoint | Width |
|---|---|
| Desktop | 1200 px and wider |
| Tablet | 810–1199 px |
| Phone | up to 809 px |
Desktop is the primary breakpoint: what you change there flows to Tablet and Phone, unless a breakpoint has its own value for that property. What you change on Tablet or Phone stays on that breakpoint. So edit text and images on Desktop, adjust sizes and layout per breakpoint, and then check all three.
Before you change anything
Section titled “Before you change anything”Publish once to a preview and look at the site on a phone as well as a laptop. Every publish becomes a version you can restore later from Settings, so there is always a way back.