Skip to content
Sign inJoin waitlist

Ciketo documentation — Framer

Ciketo for Framer is the original, free edition of the template: a logistics and shipping company website you edit visually and publish from Framer, no code.

It comes with services and their trade lanes, a quote form, a blog, testimonials, about and contact pages. 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 six CMS collections, their fields, and adding services, lanes, clients, testimonials, posts and legal pages
Making it look like your brand Colour and text styles, fonts, components, logo, icons, images, motion
Forms Sending the two quote forms to your email, a webhook or Google Sheets, and what their 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 services, lanes, clients (and their logos), testimonials and posts in the CMS (The CMS). Edit the text on the pages directly on the canvas.
  5. Give both 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”
  • 9 kinds of page, 27 pages:
    • Home, About, Services, Blog, Contact and 404;
    • a page for every service (6), post (12) and legal text (3), generated from the CMS.
  • 6 CMS collections: Client (6), Lane (6), Services (6), Testimonial (4), Blog (12) and Legal (3).
  • 3 breakpoints: Desktop (1200 px and up), Tablet (810–1199 px), Phone (up to 809 px).
  • Styles: 11 colour styles, 13 text styles and 2 link styles, used everywhere.
  • Components:
    • the header with the visitor’s local time, the footer and the call to action;
    • the quote form, “How it works”, industries and testimonials sections;
    • buttons, the menu, the rating, the plus and minus of the accordions;
    • service, lane, step, testimonial, post and question cards.
  • Motion:
    • the Home hero appearing word by word, its cards rising on load;
    • button hovers (an orange fill sweeps across, the arrow turns), the menu, post photos zooming;
    • the client logo ticker;
    • the services accordion, the “How it works” steps, the testimonials and the FAQ;
    • the blog loading more posts as you scroll;
    • the header turning solid as you scroll on Home, Contact and 404, and the phone menu.

Other editions

Section titled “Other editions”

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

Getting help

Section titled “Getting help”