Template guide

MAKE IT
YOUR OWN.

MAKE IT
YOUR OWN.

MAKE IT
YOUR OWN.

Start with the native Framer project, then replace the brand, content and media. Work through these steps before publishing.

01

Duplicate your template.

Duplicate your template.

Duplicate your template.

Open the private remix link from your protected purchase download and duplicate the project into your own Framer workspace. Use the project itself as your starting point; the template does not require importing a source-code ZIP.

  • Confirm that the project opens in your workspace.

  • Review the page list and the Work and Journal CMS collections.

  • Keep a copy of the original before making major edits.

02

Set your brand.

Set your brand.

Set your brand.

Update the shared navigation, footer, wordmark, colours and type styles. Replace the homepage headline and the positioning copy before adapting individual pages.

  • Change the agency name and shared contact details.

  • Update every navigation and footer link.

  • Review the page titles, descriptions and social preview settings.

03

Replace the demo content.

Replace the demo content.

Replace the demo content.

Edit Work and Journal through their native CMS collections. Replace the fictional projects with work you have permission to publish, and keep targets, deliverables and observed results clearly labelled.

  • Replace titles, categories, summaries, covers and rich text.

  • Use your own project facts and approved client names.

  • Check every populated case study and article route.

  • Replace example roles and illustrative service prices.

04

Change the images and media.

Change the images and media.

Change the images and media.

Replace images through the native image fields and any included component controls. Check the supplied asset manifest for image sources and usage rights. Review the crop at every breakpoint after changing a file.

  • Replace the hero, work covers and supporting images.

  • Write useful alternative text for the new images.

  • Test any interactive media using the replacement files.

  • Use fonts and assets you have permission to publish.

05

Connect your contact form.

Connect your contact form.

Connect your contact form.

Set the contact form’s destination in your own Framer project before launch. A successful demo submission does not confirm that your duplicate can receive messages.

  • Replace the example address with your own contact address.

  • Configure the form destination.

  • Check required fields, invalid email, success and error states.

  • Send an authorised test and confirm that it reaches the intended inbox.

06

Check, configure and publish.

Check, configure and publish.

Check, configure and publish.

Preview desktop, tablet and phone layouts, including a narrow screen and a short mobile screen. Then configure your own domain, site settings and policies, and publish from your workspace.

  • Check menu, footer, CMS links and the 404 route.

  • Try keyboard navigation, hover, touch and scrolling in both directions.

  • Check long titles, image crops and reduced motion.

  • Replace sample Privacy and Terms content with reviewed policies.

  • Review hosting, forms, analytics and consent for your own setup.

Your page map

Your page map

Your page map

The content plan contains 15 page definitions: 13 static or system pages and two CMS detail templates. Four demo projects and three articles populate the detail templates. This produces 19 ordinary visitor routes plus the 404 fallback.

About the demo material

About the demo material

About the demo material

PACE, KINETIC, FORM and OFFGRID are fictional concept brands. The sample scopes describe deliverables, not achieved commercial results. Journal articles are original example editorial content. Careers and agency service prices are illustrative.

The template purchase does not automatically include a hosting subscription, a domain, a backend, a Figma file, custom agency services or an ongoing update commitment. Check the actual purchase description for the included scope.

Need help?

Need help?

Need help?

Use the support contact in your purchase receipt or protected buyer download. Include the page, your device and a short description of the issue. Refer to the terms supplied with your purchase for support scope.

Contact template support

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