How to edit the Movva template

1. Brand and design tokens

All colours, type sizes, spacing and corner radii are driven by Webflow Variables. Changing a Variable updates every page at once, so start here before editing individual elements.

• Open the Variables panel and edit the Colors collection to re-brand the template.
• Typography holds the type scale and both font families, with Tablet, Mobile Landscape and Mobile Portrait modes already configured.
• Spacing and Radius control rhythm and rounding across every section.
• Movva uses two Google Fonts: Lexend Exa for headings and Lexend Deca for body text. To change fonts, set the two font Variables rather than editing elements individually.

2. Components

Shared structures are Components, so one edit updates every instance across the site.

• Navbar — sitewide navigation. Three variants: Base, Dark and Dark Buttons. Pick the variant that suits each page background.
• Footer — contact details, social links and page navigation.
• Button Primary and Button Secondary — each exposes a Link and a Text property, editable per instance.
• FAQ Item and Meet Instructor — reusable content blocks.

3. CMS Collections

Repeating content is managed in the CMS. Replace the sample items with your own; the layouts adapt automatically.

• Classes, Instructors, Events, Journals and News each have a designed Collection page. In total the template has 20 static pages and 11 CMS Collections, and each Collection has its own Collection template page.
• Schedules, Levels, FAQs, Info Blocks, Class Fors and Instructor Facts are helper Collections referenced by the main ones. They have no public pages of their own.
• Every Collection includes a Meta description field that feeds the page's SEO description. Keep it between 150 and 160 characters.
• Each field has help text in the CMS panel explaining what it controls.

4. Interactions and motion

Motion is driven by one custom attribute. Every animated element carries a single data-anim attribute, and each value is bound to one native Webflow Interaction that targets elements by that attribute — so all timing lives in one place and no custom JavaScript is used anywhere in this template.

• Values beginning with hero- run on Page Load and are used only inside hero sections: hero-fade-in, hero-fade-in-2 and hero-fade-in-3 stagger the label, heading and paragraph, and hero-scale-in reveals hero imagery.
• The scroll set runs as an element enters the viewport: fade-in, fade-in-2 and fade-in-3 stagger a section heading group, and scale-in is used for wide images and full-bleed backgrounds.
• To animate a new element, select it and add data-anim under Settings, Custom attributes, using one of those values. Nothing else is needed, because the interaction already matches on the attribute. To stop an element animating, delete the attribute.
• To retime the whole site, edit the matching interaction once in the Interactions panel. Reveals use Ease Out Quart, and scroll reveals start when the top of the element reaches 88% of the viewport height.

Hover lifts on cards, button states and focus rings are not interactions — they are CSS transitions set on the class in the Style panel, and each one animates only transform, opacity or colour so performance stays high. Two more things to keep in mind: items inside CMS Collection Lists are deliberately left untagged so long lists stay readable, and while a page loads Webflow briefly keeps data-anim elements hidden until its interaction engine is ready, so they don't flash before animating in. This rule is generated automatically by Webflow Interactions, not added as custom code, so there is nothing to edit: removing an interaction or the data-anim attribute removes it too.

5. Responsive behaviour

The template is built desktop-first and checked at every Webflow breakpoint. Typography and radius Variables switch automatically using Variable Modes, so most responsive work is already handled.

After adding your own content, re-check Tablet, Mobile Landscape and Mobile Portrait for long headings and long CMS text.

6. Before you launch

• Replace the logo in the Navbar and Footer Components, and update the favicon and webclip in Project Settings.
• Update contact details, studio addresses and social links in the Footer Component.
• Set your own SEO titles, descriptions and Open Graph image for each page.
• Add your form notification email in Project Settings — the template ships with notifications empty.
• Delete this Instructions page, the Style Guide and the Licenses page only if you no longer need them.