Skip to content
Sign inJoin waitlist

Titen documentation — Framer

Titen for Framer is the original, free edition of the template: a construction and architecture firm website, with projects by sector, services, a blog, testimonials, about and contact pages. You edit it visually and publish from Framer, no code. Read in this order, or jump to what you need.

Guide What it covers
Getting started Getting your copy, the plan you need, a tour of the project, pages, the page templates and breakpoints
The CMS The five CMS collections, their fields, and adding projects, categories, services, posts and testimonials
Making it look like your brand Colour and text styles, fonts, components, logo, images, videos, motion
Forms Sending the contact forms and the newsletter to your email, a webhook or Google Sheets
Going live Site settings, SEO, going live on a free or custom domain, after launch
Questions and answers Questions and answers, and the demo leftovers to replace

In a hurry

Section titled “In a hurry”
  1. Copy the template into your Framer workspace with the remix link (Getting started).
  2. Change the colour styles to your brand’s in Assets → Styles (Making it look like your brand); every page follows.
  3. Replace the logo in the Logo component, the photos, and the two videos.
  4. Replace the demo projects, services, posts and testimonials in the CMS (The CMS). Edit the text on the pages directly on the canvas.
  5. Give the forms a destination (Forms): they have none yet.
  6. Write a title and description for every page, then Publish (Going live).

What is in the project

Section titled “What is in the project”
  • 12 kinds of page, 43 pages:
    • Home, About, Projects, Services, Blog, Testimonials, Contact and 404;
    • a page for every project category (Residential, Hospitality, Commercial);
    • a page for every project, service and post, generated from the CMS.
  • 5 CMS collections: Projects (12), Project Category (3), Services (8), Blog (12) and Testimonial (12).
  • 3 breakpoints: Desktop (1200 px and up), Tablet (810–1199 px), Phone (up to 809 px).
  • Styles: 17 colour styles, 12 text styles and 3 link styles, used everywhere.
  • Components:
    • the header, the footer with “Let’s Talk!”, the call to action and the service list;
    • buttons, the menu, the search, the accordion;
    • project, service, testimonial, post, approach, team and award cards;
    • two slideshows.
  • Motion:
    • headings appearing word by word, blocks rising as you scroll;
    • button and card hovers;
    • the accordion and the expanding service list;
    • the testimonial and approach slideshows;
    • the header turning solid as you scroll.

Other editions

Section titled “Other editions”

The same design is available as code: Next.js, Astro and HTML.

Getting help

Section titled “Getting help”