Template guide
How to make Vook yours.
Six quick steps from the demo content to your own agency site. This page is_in hidden from search engines.
01
Swap the videos
Click a card on the page and use the properties panel. Hero reel: select the Reel 3D component, open Cards, and upload a cover image and an mp4 for each card. Latest Videos strip: select Showreel Videos and edit its Videos list the same way. Work and Selected Work cards: open the CMS, choose a Work item, set its Poster image and paste your video link into Video URL. Cards with no video link play a public-domain sample clip (CC0), so replace it before you launch.
02
Edit the CMS
Open the CMS panel. Work, Creators and Testimonials are collections. Add items there and every list, filter and case-study page updates on its own.
03
Change the accent color
Open Styles and edit the Accent color style. Buttons, metrics, chips and glows follow it. Edit Background, Surface and Text the same way to restyle the whole site.
04
Use the filters
The Work and Creators pages filter by niche and platform using page variables. Add a new option to the collection field, then duplicate a Filter Pill and set its label and value.
05
Edit the counters
The numbers in the hero stats and results bar use the CountUp component. Select one and change the value, suffix and size in the properties panel.
06
Replace the demo proof
All brand names and numbers are placeholders for the demo. Replace them with your own before going live. Do not ship invented proof on a client site.
07
Add or rename services
Services page add-on cards: duplicate a card inside Add-on Grid, then edit its icon, title, text and chips. The phone menu lists its services in the Mobile Menu component’s Services and Add-on services controls.
08
Edit the reviews and FAQ
Select Reviews Wall to edit every review in its list. Select FAQ Accordion to edit the questions and answers. Both have color controls too.
09
Link your socials and booking
Footer: click each social button and set its link. Every Book a call button points to the Book page, and the form sends to the email set in Form settings.
10
Turn on tracking
The site sends four events to your analytics tool: cta_click, portfolio_play, form_start and form_submit. Add Google Analytics or Tag Manager in Site Settings and they start showing up. Framer’s own analytics tracks page views and bookings.
11
Before you launch
Set a title and description for every page, add a social share image and favicon, connect your domain, send a test booking to confirm the form email arrives, and fill in the Privacy and Terms pages.
12
Only claim what you can prove
Every number, client name, review and guarantee in this template is a sample. Replace each one with real, permitted proof, or delete it. Add a real Project, Objective, Work and Outcome to each case study.
13
Change prices and the annual discount
Select a Plan Price on the Pricing page or Home and set its Monthly price and Annual (per month) price. The Monthly and Annual switch above the plans updates every price on the site at once. You can rename the switch and its badge in its own properties.
14
Write your playbooks
Open the CMS and choose Playbooks. Add an article with a title, topic, read time, excerpt, cover image and body. Tick Featured to show it big at the top of the Playbooks page. Topics are plain text, so use the same names as the filter buttons (Hooks, Scripts, Testing, Scaling, Creators), or rename those buttons to match yours.