TEMPLATE GUIDE

SET YOUR OWN TEMPO.

Replace Classes and Teachers in the CMS, then update your venue, equipment policy, timetable, prices and contact destination.

01 / Replace the school

Edit the Poster layout navigation and footer once. Add your school’s real introduction, venue, access notes and contact details in Studio and first lesson.

02 / Add a class

Open Classes in CMS and add Name, Slug, Summary, Level, Format, Duration, Sample Timetable, Group Maximum, Studio, Kit Provided, Preparation, Sample Price and Syllabus. Set Level Filter and Format Filter to matching choices, select the Teacher reference, add Image and meaningful Image Alt, then set Display Order. Publish and verify catalogue, both selectors, empty state and detail.

03 / Add a teacher

Open Teachers and replace every fictional name, focus, format, Approach and Demo Status. Upload a permissioned Portrait with accurate Portrait Alt. Select that teacher on Classes. Only publish qualifications and awards that belong to the real instructor.

04 / Replace the instrument

The original snare artwork is one named native image frame in the opening. Replace it and the CMS class images. Teacher Portrait fields use an instrument study as a clearly marked demo fallback; replace those with permissioned portraits.

05 / Connect your own request

Enquire uses native page variables, a required CMS-backed Class selector and a local preview checkbox. No Submit button or destination is connected. In your copy, make the Native lesson request setup preview wrapper a native Form, add your own Submit Button component and connect your school’s destination. Keep Class required. Test delivery and validation before launch; there is no hidden prefill or live availability.

06 / Verify delivery and states

Test required fields, delivery to the school, validation, success and error feedback, keyboard focus and duplicate messages. Use your own test data. Add your privacy notice before collecting contact details. The school confirms actual timetable and price.

07 / Use the count-in

Eighth-note count is a native component with eight variants. One tap steps to the next count; no audio, timer or metronome is simulated. Edit the count labels or variant colours in that component. Its eight-column grid remains readable on a phone.

08 / Finish the handoff

Add one new class, edit a long name and a teacher focus, then check catalogue, detail, filters and teacher link. Test 360, 390, 768, 1024 and 1440 px, 404 and your form connection. No paid code dependency is required; booking and payment services are optional owner integrations.

Create a free website with Framer, the website builder loved by startups, designers and agencies.