Start Here

Welcome to Larkstone. This guide shows how the template is built and how to make it your own, from colors and fonts to CMS content and your launch checklist.

What's Included

Larkstone is a multi-page Webflow template for campgrounds, cabins and outdoor stays. It includes:

  • Pages: Home, About, Accommodation, Willow Creek Cabins, Events, Plan Your Visit, Blog and Contact.
  • CMS template pages: a blog post page and an event page.
  • Utility pages: Style Guide, Start Here, Licenses, Changelog, 404 and Password.
  • CMS collections: Blogs, Events, Team Members and Blog Topics.
  • Components: Navbar, Footer, CTA Primary, CTA Secondary, Button, Hero (Wide Image), Highlight, List Features, FAQs, Testimonials and Parallax Image.
  • Base Structure: a draft page to duplicate whenever you add a new page.

Class names follow Finsweet's Client-First system, so each class describes what it does.

Getting Started

Add a New Page

  1. In the Pages panel, find the Base Structure page. It is a draft, so it never publishes.
  2. Duplicate it from the Pages panel.
  3. Rename the copy, set its slug, add your sections and turn off Draft when it's ready.

The copy already contains the Navbar, the main content wrapper, a CTA section and the Footer, so every new page starts out consistent.

Navbar, Footer and CTAs

The Navbar, Footer, CTA Primary and CTA Secondary are components. Double-click any instance on the canvas to edit the main component, and your change appears on every page that uses it. Press Esc to exit.

Colors and Fonts

Styling runs on variables, so you can rebrand the whole site from the Variables panel. The collections are:

  • Colors: your palette. Change Brand Colors (Primary, Secondary and CTA) and the Primary Shades and Secondary Shades update with them. Neutral Colors hold white, black and the greys.
  • Color Schemes: the Text, Background, Foreground, Border, Accent and Button Background colors each section uses. Base mode is the light scheme, and the Dark mode applies to sections with the color-scheme-dark class.
  • Typography: font families, font sizes (H1 to H6, Text Large, Text Regular and Text Small), weights and line heights, with Tablet, Mobile (L) and Mobile modes so text scales down on smaller screens.
  • Font Styles: connects the Typography values to text elements through its H1 to H6, Font Small and Font Large modes.
  • Sizes: section spacing, the space scale, global side padding, max widths, containers, corner radius and border widths, with the same responsive modes.
  • Shadows: a two-layer shadow with XSmall, Small, Large and XLarge modes.

Change the Fonts

Body text uses Work Sans, set on the Body (All Pages) tag through the Body font family variable. Headings use Domine through the Heading variable, and Montserrat is the Heading Alternate font. To use a different font, add it in Site settings → Fonts, then change the matching font family variable in the Typography collection.

Logo and Favicon

The logo is an SVG image inside the Navbar and Footer components. Double-click the Navbar, select the logo, choose Replace image in the Settings panel and update the alt text to your brand name. Do the same in the Footer.

Upload your favicon (32 × 32 px PNG) and webclip (256 × 256 px PNG) in Site settings → General.

Images

  • Compress every image. Use WebP or AVIF and keep most images under 150 KB. You can convert and compress in bulk from the Assets panel.
  • Size images close to how they display. About twice the on-screen width is plenty, for example 2,000 px wide for a full-width hero.
  • Give every meaningful image alt text that describes it. Set it once in the Assets panel or per image in the Settings panel, and mark purely decorative images as decorative.
  • Compress CMS images (blog, event and team photos) before you upload them.
  • The demo images were generated with Google Gemini and ChatGPT (OpenAI). See Licenses before you reuse them.

CMS Content

Larkstone has four CMS collections:

  • Blogs: posts on the Blog page and the blog post template. Each post has a topic from Blog Topics and an author from Team Members. Turn on Feature to highlight a post.
  • Events: events on the Events and Home pages and the event template. Turn on Past Event once an event has ended.
  • Team Members: the team on the About page, also used as blog authors and event managers.
  • Blog Topics: the topics that group blog posts.

Add, Edit or Delete an Item

  1. Open the CMS panel and select a collection.
  2. Click New item, or select an existing item to edit it.
  3. Fill in the fields and save. Save as draft to keep an item unpublished.
  4. To remove an item, open it and archive or delete it.
  5. Publish the site to make your changes live.

Fields That Feed SEO

The blog post and event template pages take their search and social details from CMS fields, so every item gets its own title, description and share image:

  • Blog posts: Name sets the SEO and Open Graph title, Short Excerpt sets the meta and Open Graph description, and Main Image sets the Open Graph image.
  • Events: Name sets the SEO and Open Graph title, Short Description sets the meta and Open Graph description, and Main Image sets the Open Graph image.

Write each excerpt and short description as one or two full sentences of up to 160 characters. You can review these bindings in each template page's settings.

Components and Props

Select a component instance to see its props in the right-hand panel. Changing a prop only changes that instance.

  • Button: Text, Link, Icon, Icon Visibility (shows or hides the icon), Size (Small, Medium or Large), Variant (primary, secondary, link and alternate styles for dark backgrounds) and Layout.
  • Hero (Wide Image): Title, Subtitle and Image.
  • CTA Primary: Image, Title, Text and the button's text and link.
  • List Features: the section title and paragraph, four features with a title, text and icon each, the button and the image.
  • Highlight: Text and Image.
  • Parallax Image: Image.

The Navbar, Footer, CTA Secondary, FAQs and Testimonials show the same content wherever they appear. Double-click an instance to edit the main component, and remember that the change applies to every page. Button Layout and Button Content are building blocks of the Button component, so don't place them on a page by themselves.

Editing SVG Icons

Some icons are inline SVG code inside Code Embed elements, so they take on the color of the text around them. You'll find them in:

  • the Style Guide: the Icons (Embed) row, the color scheme cards and the slider arrows
  • the FAQs component: the open and close icon on each question
  • the Testimonials component: the star ratings and slider arrows
  • the Contact page: the icons on the contact info cards
  • the Home, Blog and blog post pages: the arrows in text-style buttons

Swap an SVG Icon

  1. Select the Embed element in the Navigator. It sits inside an icon wrapper such as icon-embed-small.
  2. Open the code editor from the Settings panel, or double-click the embed.
  3. Replace the existing <svg> code with your new <svg> code. Paste SVG code only, never scripts or styles.
  4. Keep width="100%", height="100%" and the viewBox, so the icon-embed class (xxsmall to xlarge) controls the size.
  5. Set fill or stroke to currentColor so the icon follows the text color.
  6. Save and close the editor.

The amenity and feature icons are from Lucide. For a matching style, copy any Lucide icon as SVG. Icons placed as images, such as the amenity icons, are SVG files: select one and choose Replace image instead.

Interactions

Animations use Webflow's native Interactions, powered by GSAP, with no custom code:

  • Hero reveal: the Home hero content reveals on page load.
  • FAQ accordion: clicking a question opens or closes its answer.
  • Parallax image: the image on Willow Creek Cabins moves gently as you scroll.
  • Scrolling banner: the banner on Home scrolls continuously.

Every interaction respects reduced-motion settings, so visitors who turn off animations in their operating system see the content without movement.

Edit or Remove an Interaction

  1. Open the Interactions panel.
  2. Select an interaction to change its trigger, targets or timing.
  3. To remove one, delete it in the panel, then preview the page to check that nothing is left hidden or offset.

If you remove the FAQ accordion, also remove the closed state from the faq_answer class so the answers show.

Hidden Elements

  • Mobile menu: select the Navbar, switch to a tablet or mobile view and open the menu from the Settings panel to edit it. Close it again when you're done.
  • FAQ answers: answers start closed. Select an answer in the Navigator to edit its text.
  • Form messages: select a form and switch its state to Success or Error in the Settings panel to edit those messages.

SEO Checklist for Launch

  • Give every page a unique SEO title and a meta description of 150 to 160 characters in Page settings.
  • Add an Open Graph image (1200 × 630 px) to each page.
  • Check that the blog post and event template pages pull their title, description and image from CMS fields.
  • Upload your favicon and webclip.
  • Connect your custom domain, then turn on the auto-generated sitemap in Site settings → SEO.
  • Add a notification email in Site settings → Forms so form submissions reach you.
  • Delete the pages you don't need, such as Style Guide, Start Here and Changelog, or set them to draft. They carry a noindex tag so search engines skip them.
  • Replace all demo text and images with your own, then publish.

Changelog

See what has changed in each version on the Changelog.