The Floaters — Site Handover & Tutorial (CMS, Publish, Sections & More) [K180 Studios] [pitch.dog]

Описание: This is a complete handover and tutorial walkthrough for The Floaters website — built on Framer by pitch.dog.

If you've just received your Framer website and want to manage it confidently on your own, this video covers everything from the basics of the Framer interface to the CMS, publishing to production, adding new sections, and checking responsiveness.

No prior experience with Framer required. By the end of this video, you'll be able to independently update screenings, add press articles, manage videos, edit text and images, and push changes live.

--- --- ---

🐾 built, with love, and wagging tails, by pitch.dog

--- --- ---

📋 WHAT'S IN THIS VIDEO

→ How to access your Framer project
→ Setting up the Framer interface (light/dark mode, preferences)
→ Understanding the Framer canvas — pages, layers, and assets
→ How breakpoints work (desktop, tablet, phone, large desktop)
→ The design system behind The Floaters website — typography, color (Radix UI), spacing
→ Replacing images and editing text
→ Changing section backgrounds and fills
→ Adding links (internal and external) and configuring buttons
→ A full tour of every section on The Floaters website
→ The CMS (Content Management System) — the backbone of the site
→ Adding, editing, and removing film screenings
→ Managing the video press section
→ Adding news and press article links
→ Adding new sections using the Extras page (pre-built templates)
→ Toggling element visibility
→ Publishing: staging → production → deploy
→ The pop-up section and how to configure it
→ Site settings — favicon, social preview, SEO, third-party integrations
→ Analytics — traffic sources, devices, countries
→ Responsiveness check — how to test across screen sizes

--- --- ---

🕐 TIMESTAMPS

⏱️ TIMESTAMPS

0:00 — Introduction & overview
0:54 — How to access your Framer project (framer.com/projects)
1:53 — Setting up Framer: light mode, preferences & interface settings
3:00 — Getting comfortable with the Framer interface
3:16 — Navigation panel: Pages, Layers, Assets
3:52 — Pages in The Floaters project (Homepage, Tutorial, Extras, 404, Awards)
5:07 — Breakpoints explained (desktop, tablet, phone, XL desktop)
6:32 — How changes cascade across breakpoints
7:41 — Previewing the website (Cmd+P)
8:33 — Framer's core structure: stacks and frames
10:03 — The Floaters design system overview
11:00 — Typography system (headings, body copy, labels)
11:51 — Color system: Radix UI custom palette (blue, yellow, base gray)
13:06 — Accessibility and SEO — why it matters
14:19 — How to replace an image
16:27 — How to edit and replace text
17:11 — Changing section backgrounds and fills
17:53 — Adding links to text and images
18:51 — Using internal and external buttons
20:17 — Full tour of The Floaters website sections
21:48 — CMS (Content Management System) — introduction
22:28 — Adding a new film screening (step-by-step)
26:00 — Screening options: hybrid badge, directions, ticket link, streaming link
27:00 — Adding images to screening cards (16:9 format)
27:17 — Publishing a CMS item: save draft → publish → production → deploy
29:20 — How screening order works (sorted by date)
29:44 — Removing a past screening from the homepage
30:26 — Editing an existing screening
32:29 — Duplicating a screening (multiple dates)
33:07 — Date format note: DD-MM-YYYY (European format)
34:23 — Quick look at the CMS backend (filtering, sorting, display count)
34:56 — CMS for videos (press section)
37:07 — CMS for press/news articles (logos, links, article backup)
38:38 — How to add new sections using the Extras page
39:51 — Copy-pasting sections into the homepage
40:44 — Editing new sections: text, images, buttons, visibility
41:53 — Renaming sections and changing background colors
42:17 — Special sections: hero, awards, Rachel carousel, reviews, form
42:54 — Adding new festival award laurels (SVG method)
43:43 — Managing the reviews carousel (adding/removing reviews)
45:31 — The newsletter signup form (backend-linked)
45:54 — Header and footer (contact pitch.dog for changes)
46:02 — Publishing changes: staging → production → deploy (walkthrough)
47:14 — The pop-up section (custom code, timing, frequency)
47:46 — Site settings (name, description, favicon, social preview, API keys)
48:10 — Analytics (traffic sources, devices, countries)
48:52 — Responsiveness check: how to test your live website
49:44 — Wrap-up & how to reach us

--- --- --- --- --- --- --- --- ---

🎨 DESIGN SYSTEM USED

The Floaters website uses a custom design system built on:
Apple Human Interface Guidelines
Google Material Design
Radix UI color system (12-step scales, light/dark mode, WCAG accessible)
Custom typography extracted from The Floaters poster

--- --- --- --- --- --- --- --- ---

📬 NEED HELP?

For any questions about the website, changes you'd like to make, or if something seems off — just reach out. We're always a WhatsApp away and happy to jump in.

--- ---

with love,
pitch.dog

--- --- --- --- --- --- --- --- ---