Getting started — Ciketo Framer
Ciketo for Framer is free: one link copies it into your Framer workspace. This guide covers the copy, the plan you need, and a tour of the pages and layout.
Get your copy
Section titled “Get your copy”You get Ciketo 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 Ciketo page, click Use for Free, then Copy in the Remix window.
- From framebrick.co: click Remix free on the Ciketo 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. A site on your own
domain needs a paid Framer site plan, and one with room for Ciketo’s six CMS collections: not every plan has it. What
each plan includes 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 service, post and legal text has a page of its own, made from one CMS page design per collection (/services/…, /blog/…, /legal/…) |
| Layers | The structure of the selected page |
| Assets | The layout templates, the components, 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 a photo, with the “Enterprise accounts” and “New Lane” cards; the client logos; why choose us, with four figures; the services accordion and a help card; a wide photo; “How it works”; the industries; the quote form; the testimonials; three posts; the FAQ; a call to action |
| /about | The title and a wide photo, the client logos, who we are with four figures, a message from the leader, the industries, a call to action |
| /services | Every service with its key benefits, “How it works” and a call to action. Its detail page (one per service) shows the service and its photo, an introduction with four figures, the key benefits, the service’s lanes, “How it works” and the quote form |
| /blog | Every post, six at a time as you scroll, and a call to action. Its detail page (one per post) shows the article and up to three other posts of the same category (“Other Post”) |
| /contact | The title over a photo, the address, phone, e-mail and business hours, and the quote form |
| /legal/… | One page per legal text: privacy-policy, terms-conditions and cookie-policy, linked from the footer. There is no /legal page |
| /404 | Page not found, over a photo, with a button back to Home |
The header and the footer
Section titled “The header and the footer”The header (Section/Header: the logo, the menu, the visitor’s local time and “Get a Quote”) and the footer (Section/Footer) are components. Edit the menu, the footer links and the contact details there once, and every page follows.
Every page uses one of two layout templates, Assets → Templates → Primary and Secondary, and sets two things of its own. Select the page in Pages, and they are in the right panel → Style → Template:
- Layout: Primary on the pages that open with a full-width photo (Home, Contact, 404): the header is transparent over the photo until the visitor scrolls. Secondary everywhere else: the header sits on the page background.
- Home, About, Services, Blog, Contact: the menu item to mark as current (Active, in orange) on that page; the others stay Default. The page of a service, a post or a legal text, and the 404 page, mark none.
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 later from Settings, so there is always a way back.