Getting started — Titen Framer
Titen for Framer is free: you copy the whole project into your own Framer workspace with one link, then edit it on the canvas. This guide covers the copy, the Framer plan Titen needs, and a tour of its pages and layout.
Get your copy
Section titled “Get your copy”You get Titen 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 Titen page, click Use for Free, then Copy in the Remix window.
- From framebrick.co: click the remix button on the Titen 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. Titen has five CMS
collections, so a site on your own domain needs Framer’s Pro plan; Basic includes two collections. 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. A page with a CMS collection opens to its detail page (/projects, /services, /blog), and Project Category is a page of its own, one per category |
| Layers | The structure of the selected page |
| Assets | The page templates, components, colour and text styles, vectors |
The right panel shows the properties of whatever you select.
| Page | What it shows |
|---|---|
| Home | The hero with a video, two figures and a slideshow of testimonials; about the studio; seven projects; the principles accordion and four services; a call to action; three posts |
| /about | The hero with the values, the studio’s beginnings, the approach slideshow, a video, the team, the awards |
| /projects | Every project, the three category buttons and the “Let’s Work Together” form. Its detail page (Projects, one per CMS item) shows the project’s story in four or five parts and other projects of the same category |
| Project Category | One page per category: /residential, /hospitality, /commercial. Its projects (the first one wide) and the form |
| /services | Every service and a call to action; its detail page (Services) shows the service, “What’s included”, a brochure button and the form |
| /blog | Every post; its detail page (Blog) shows one article and similar posts of the same category |
| /testimonial | Every testimonial, then four services |
| /contact | The contact form, an image and the studio’s contact details |
| /404 | Page not found |
The header and the footer
Section titled “The header and the footer”Every page uses one of two page templates, Assets → Templates → Black and White. Each holds the header (Section/Header), a placeholder for the page and the footer (Section/Footer, with “Let’s Talk!” at its top). Edit the menu, the footer links and the contact details there once, and every page follows.
Each page sets two things of its template. Select the page in Pages, and they are in the right panel → Style → Template:
- Layout: White on the pages that open with a dark photo or video (Home, About, the project pages), so the header is white on top of it; Black everywhere else.
- Home, About, Services, Project, Blog, Contact: the menu item to mark as current (Active, in orange) on that page; the others stay Default.
When you add a page, choose its Layout and mark its menu item the same way.
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 (Settings → Versions; the list is empty until the first publish).