Instructions
How this Framer template is put together, and how to edit content, styles, animations and code components.
CMS content
All dynamic content lives in the CMS (left sidebar → CMS). Edit or add items and every list and detail page updates automatically.
• Blog Posts – blog cards on Home and /blog, plus the article page. Content is split into Content 01–04 with a Body Image between parts. Tick Featured to show a post in the featured card, and Show on Home to show it on the homepage.
• Clients – the case-study grid on /clients and each client page (metrics, specs and four rich-text sections).
• Careers – the Open Roles list on /careers and each role page (Responsibilities, Requirements, Benefits).
• Categories – the category label shown on blog cards and articles.
Colors & text styles
Open Assets → Colors to change the palette (Cream, Light Cream, Beige, Dark Green, Lime and the text colours). Open Assets → Text Styles to change fonts, sizes and line heights. Both are responsive and update every page at once. The Style Guide page shows them all.
Components
Reusable parts live in Assets → Components: Button, Case Button, Read Button, Link 01, Eyebrow, Social Link, Client Card, Blog Card, Role Card, FAQ Item and the Navbar. Select an instance to change its label, link or variant in the right panel. Hover states are built as hover variants inside each component.
Animations
Scroll and load animations use Framer effects: select a layer and open Effects in the right panel. Headings use a Text Effect that reveals line by line; cards, images and paragraphs use Appear effects that slide up and fade in when they enter the viewport. Change the distance, duration or delay there, or remove the effect to turn it off.
The FAQ uses the withAccordion code override (Assets → Code → FAQAccordion): only one question can be open at a time, so opening one closes the others. The item set to the Open variant on the canvas starts open. The Coming Soon photos float with a Loop effect.
Code components & overrides
A few interactions are small code components (Assets → Code):
• Counter – the rolling number counters. Set target, prefix, suffix, duration, delay and stagger in the right panel.
• RollText – the letter-roll text used inside buttons and links. It plays when its hover property is on.
• TestimonialsSlider and FeatureSlider – the draggable sliders on the homepage. Edit their slides in the right panel.
• ImageParallax – an override that gives photos a subtle scroll parallax. Select an image layer and pick withParallaxMedium or withParallaxStrong under Code Overrides, or set it to None to remove it.
Layouts & forms
Most pages use the Main Layout (navbar + footer). The Coming Soon page uses the Minimal Layout (footer only). Edit the navbar or footer once in the layout and every page using it updates.
Contact forms need a destination before publishing: select the form and add your email or webhook under Form → Send To.
Template support
This template is built with performance and easy editing in mind. If you find an issue, need help, or just want to say hi, email us at quix.webstudio@gmail.com — we’re happy to help.
Need a custom version of this template or a brand-new Framer site? Get in touch and our design & development studio can help.