Template
How the Framer version of Oaken is organised, how to edit its hidden parts, and how its interactions work.
Version 1.0
Getting started
Oaken is a Framer template: every page, component and collection is editable in the canvas, with nothing to install. Pages sit in the Pages panel, Home being the first. Coach, program, class and journal pages are detail pages, generated from the Coaches, Programs, Classes and Articles collections in the CMS.
Colours and text styles live in the Assets panel, named by role, such as Text/Primary, Background/Clay or Display/Mega. Change one value and every page follows. Text styles carry their own sizes for desktop, tablet and phone, so titles scale on their own.
Two layout templates frame the pages. Main holds the navigation bar, the menu and the footer. Pill holds the floating pill navigation, the closing photo and the footer card, and its Dark page option turns the page background dark, as on About 2, About 3, Contact 3 and Home 3. The logo is a component with dark, cream and white variants: replace its three images once and every page follows.
Modals
The play card on About 3 opens a fixed overlay with the club film. Click the card, then the overlay inside it, to see and edit its content.
The film plays in the Background Video component, set to Player mode. To use your own film, select it and replace its Video and Poster in the right panel. It plays with the browser’s own controls.
Tabs and states
FAQ items and FAQ cards are components with Closed and Open variants: a click on the question switches between the two, with a smooth transition.
The coaching tabs and the plans on Home 2, and the points on Home 3, run on page variables named Coaching, Plan and Point. Each tab or row sets the variable when clicked, and each panel shows only when the variable matches its name. To add one, duplicate a row and its panel, then change the value in both.
Journal filters
Journal reads the Articles collection. The topic buttons set a page variable named Category: the All List shows every note while it is empty, and the Filtered List shows the notes of the chosen topic.
To add a topic, add an option to the Category field of Articles, duplicate a topic button, then set its label and the value it sets to the new option. The featured note is the article with Featured turned on, and it is not repeated in the grid.
Timetable
The timetable reads the Classes collection. Each class has a day, a start time, a discipline, a coach and a program. Day tabs set the Day variable and the discipline filters set the Discipline variable, and the list shows the classes that match both.
To add a class, add an item to Classes: its page, its place on the timetable and the lists on its coach and program pages update on their own.
Background video
The club section on Contact 2 plays a muted, looping film in the Background Video component, with a pause and play button for visitors who prefer less motion. When Reduce motion is turned on in the visitor’s system settings, it stays paused on its poster.
To change it, select the component and replace its Video and Poster. Trim the start and the end first, so the loop shows no black frame, and keep the file light: the Oaken film is 29 seconds at 720p and weighs 1.7 MB.
Animations
Animations use Framer’s own effects: appear effects on titles and sections, hover variants on buttons, links and cards, and transitions between the variants of a component. Every effect respects reduced motion.
Editing animations
To change an effect, select the layer and open its effect in the right panel: you can edit the distance, the duration, the delay and the easing. For components, the transition sits in the settings of each variant.
Keep durations between 0.15 and 0.8 seconds. To remove an effect, delete it from the panel: the layer then shows in its final state.
Code
The template uses one code component, Background Video, in the Code section of the Assets panel. It has two modes: Background, a muted loop with a pause and play button, and Player, a film with the browser’s controls. Everything else is built in the canvas.
Images
To replace an image, select the frame and change its fill: frames keep their size and crop on every breakpoint. Coach, program and article photos live in their CMS items.
Keep photos light, about 2000 pixels wide for a full-width photo and 1000 for a card, and describe each content image in its alt text so it can be read aloud.
Before you launch
Each form needs a destination before launch. Open the settings of each form and choose where its entries go: an email address, a webhook or one of Framer’s integrations. The forms are on Contact, Contact 2, Contact 3, Free week, Home 2, Journal and in the footer.
In the site settings, set the title, description, favicon and social image of each page, and connect your domain. Last, delete the pages that describe the template, Overview, Instructions, Style guide, Licenses and Changelog, along with their links in the menu and the footer.