Set up Purlin in an afternoon.

Global styles, color & type

Purlin ships with a single source of truth for color and typography. Update these once and every page follows. In Webflow, open Style Manager → Variables to find them.

• Swap the logo: select the logo mark in the nav symbol, delete the placeholder, and drop in your SVG (keep it ~26px tall).
• Change the fonts: the display face is Schibsted Grotesk, body is Hanken Grotesk. Replace both in Project Settings → Fonts, then reassign in the two base text styles.
• Reserve orange for CTAs — it's the one accent that signals "click." Don't use it for body text or icons.

SWAPPING IMAGES

Swapping images

Most images update the same way: select the image on the canvas, open the Settings panel, and choose Replace image (or drag a new file into the Assets panel first, then reselect it there). Hero photography, before/after shots, and team photos all work like this — swapping the file doesn't touch layout, cropping, or classes. CMS-driven images (service, project, and blog post covers) live on the Collection item itself, so update them from the CMS panel rather than the page canvas. The Open Graph preview image for each page is set separately under Page settings → Open Graph and won't update automatically when you change an on-page hero image.

Adding your content

Eight CMS collections power the dynamic pages and local SEO. Add an item to Services, Projects, Service Areas, or Blog Posts and its detail page builds itself from the matching template.

Reusable building blocks

The shared pieces are Webflow Components — edit one instance and every page updates. You'll find them in the Components panel:

Repeating cards (services, projects, reviews, blog posts) use shared classes rather than Components — edit the class to restyle every card at once.

Google Map uses a single Component — change the address once in its settings and it updates on every page (requires a Google Maps API key in Project Settings).

GOOGLE MAPS

Setting up Google Maps

The Contact and Service Areas pages use Webflow's native Map element. Add your own Google Maps API key in Site Settings → Integrations → Google Maps to remove the development watermark. Service Area detail pages link out to Google Maps and need no key.

How to Edit GSAP Animations

All motion on this template runs on GSAP 3.12.5, loaded from cdnjs, plus a handful of registered site-footer scripts. Every animation only ever animates transform and opacity — the two GPU-cheap properties that never trigger layout — and everything auto-disables under prefers-reduced-motion: reduce via gsap.matchMedia.

To change speed or distance, go to Project Settings → Custom Code, find the relevant registered script (for example rlMotionInit2), and edit the literal numeric values inside — e.g. duration:.7 (the animation duration in seconds) or y:22 (the rise distance in pixels). A short excerpt of the reveal animation:

1. Go to Site Settings → Custom Code and delete the Purlin scripts (GSAP core, ScrollTrigger, Mobile Menu Scroll, Motion Init, Hero Typer, Nav Active GSAP, Filter Chips, Load More, FAQ GSAP, UI Micro GSAP, Back To Top GSAP, TOC Spy GSAP, Sticky CTA GSAP, Chips Scroll Hint).
2. Leftover data-reveal and similar attributes on elements are harmless once the scripts are gone — they do nothing without the script.
3. If you don't need any motion at all, you can also delete the two GSAP CDN <script> tags.

• gsapCore — loads the GSAP 3.12.5 core library
• gsapScrollTrigger — GSAP plugin that fires animations on scroll position
• Purlin Mobile Menu Scroll — opens/closes the mobile nav with a focus trap
• rlMotionInit2 — reveal, count-up, nav-hide, and back-to-top-click behavior
• Purlin Hero Typer v2 — animated typewriter effect in the hero headline
• Purlin Nav Active GSAP — underlines the current page in the nav and animates the link hover underline
• Purlin Back To Top GSAP — smooth-scrolls to top and shows/hides the .rl-fab back-to-top button as you scroll
• Purlin UI Micro GSAP — nav link hover underline, CTA arrow micro-motion, phone-icon wiggle, and hero image crossfade
• Purlin FAQ GSAP — smooth expand/collapse animation for the FAQ accordion items
• Also registered — Purlin Load More (paginates the Blog/Projects grids), Purlin TOC Spy GSAP (highlights the active section in this page's table of contents), Purlin Sticky CTA GSAP (shows/hides the mobile sticky CTA bar as you scroll), and Purlin Chips Scroll Hint (nudges users to scroll the filter-chip row)
• Purlin Filter Chips — GSAP fade for the Blog/Projects filter chip UI

About the financing example

The Financing section on the Home page now shows static example monthly payments for a typical project, so there's no calculator script to configure. An interactive financing calculator with live APR, term, and material inputs is available to template customers as a free cloneable companion project — just reach out through support to get access.

FORM SUBMISSIONS

Where form submissions go

The instant-quote form on the homepage and the form on the Contact page both use Webflow's native form handling, so no extra script or third-party service is required. Set a notification email in Site Settings → Forms → Form notifications so new submissions land in your inbox instead of only the Webflow dashboard. While you're working on the staging (.webflow.io) domain, Webflow captures every submission automatically — add your own address before you publish to a custom domain, or you'll miss early leads. You can review or export every submission at any time from Site Settings → Forms → Submissions.

Support & changelog

Need something this guide doesn't cover? Here's where to look next.

• Changelog — version history for every template update.
• Licenses — full licensing information for fonts, icons, and code.
• Style Guide — the design system reference: colors, type, components, and more.