Skip to content
Sign inJoin waitlist

Tustel documentation — Framer

Tustel for Framer is the original, free edition of the template: a portfolio for photographers and designers that you edit visually and publish from Framer.

It needs no code, and comes with projects and their galleries, services, testimonials, a journal, about and contact pages, and a project enquiry form. 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 layout templates and breakpoints
The CMS The four CMS collections, their fields, and adding projects, services, testimonials and posts
Making it look like your brand Colour and text styles, fonts, components, logo, icons, images, motion
Forms Sending the contact form to your email, a webhook or Google Sheets, and what its fields are called
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, and the photos.
  4. Replace the demo projects, services, testimonials and posts in the CMS (The CMS). Edit the text on the pages directly on the canvas.
  5. Give the contact form a destination (Forms): it has 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”
  • 8 kinds of page, 27 pages:
    • Home, About, Portfolio (“Works” in the menu), Blog, Contact and 404;
    • a page for every project (9) and post (12), generated from the CMS.
  • 4 CMS collections: Portfolio (9), Service (5), Testimonial (3) and Blog (12).
  • 3 breakpoints: Desktop (1200 px and up), Tablet (810–1199 px), Phone (up to 809 px).
  • Styles: 9 colour styles, 13 text styles and 1 link style, used everywhere.
  • Components:
    • the header with its phone menu, the footer, the photo band and “Let’s work together”;
    • buttons, menu links and the form’s button;
    • project, service, testimonial, post and step cards, and the specialities card of the Home hero;
    • two slideshows and the counters.
  • Motion:
    • the Home hero building up letter by letter, its three photos changing every 5 seconds;
    • the client logos and the specialities scrolling past, the counters counting up;
    • content fading up as it scrolls into view, page titles appearing word by word;
    • orange hovers on the buttons, the menu and the project cards;
    • the portfolio’s Catalog / List switch, the services and the testimonials slideshow on Home;
    • Works and Blog loading more as you scroll;
    • the header hiding and coming back as you scroll, and the phone menu.

Other editions

Section titled “Other editions”

The same design is available as code: Next.js, Astro and HTML. A Figma file is coming; it will be listed on https://framebrick.co/templates/tustel.

Getting help

Section titled “Getting help”