Instructions - Finestar Webflow HTML website template

01 Start here 02 Editing the hero 03 Editing content 04 Scroll animations and item counts 05 CMS collections 06 Variables 07 Logo, images and fonts Before you launch

Start here

Duplicate before you edit

Work on a copy of the site so you can always compare against the original demo.

Set your brand once

Open Variables, then Colors, and change Secondary Color (amber), Dark Main Color (night), Main Color (panel) and White Color (text). Every page updates automatically, because there are no hard-coded colours anywhere in the template.

Three things behave differently here

Read sections 02, 03 and 04 before you start editing. The hero has an opening loader that covers it in the Designer, several homepage sections are fed by the CMS, and the Services and Work animations are tuned to four items.

Editing the hero

The hero is the Hero Finestar component. Select it and edit the Title, Subtitle, Image, Image Alt, both button texts and links, Letter 01 to Letter 08 and the Intro Wordmark in the right-hand panel.

The opening loader covers the hero in the Designer

Double-click Hero Finestar to open the component

In the Navigator, select the hero-intro element inside hero-finestar-sticky

In the Style panel, set its Display to None while you edit

When you are done, set Display back to its original value so the opening plays again

Slot letters

The wordmark is built from eight columns with one letter each. Change Letter 01 to Letter 08 to spell your own name. For a shorter or longer name, remove or duplicate a hero-finestar-col column and its letter prop, and keep the odd and even columns in the scroll interaction.

Editing content

The Navbar, About, Stats, Process, FAQ, CTA, Footer and every button are components. Their text, images and links live in component properties.

Click the section once to select the component instance

Look at the right-hand panel, below Style

Edit the fields listed under the component name

Services, Work, Testimonials and Journal read their items from the CMS. Edit those in the CMS panel, and use the component properties only for headings and intro text.

Section IDs used by the navbar

home, about, services, work, stats, process, testimonials, journal, faq and contact. If you rename or remove a section, update the matching link in the Navbar Finestar and Footer Finestar properties.

Scroll animations and item counts

Every animation is a native Webflow Interaction (IX3) with no custom code. Visitors who prefer reduced motion see the final state instead of the movement.

Services list is tuned for four items

The Services list shows four services; the amber marker slides three steps and each item lights up in turn

To show more, raise the Collection List limit and make the services-finestar section taller (it is 400vh for four items)

Open Interactions, select Services index highlights only the active item and extend the marker yPercent by 100 for every extra item

Work cards are four separate lists

The Work deck uses four single-item Collection Lists (offset 0, 1, 2 and 3) so each card can fly out left or right

To add a fifth card, duplicate the last list, set its offset to 4 and add it to the Work cards deal off left and right on scroll interaction

Make the work-finestar section taller so the extra card has scroll room

CMS collections

Four collections power the dynamic content. Every field is plain text except the journal body.

Services. Name, number, summary, description, three tags, four included items and three images.

Projects. Client, year, category, industry, services provided, overview, three stats, a cover and three gallery images.

Blogs. Title, summary, body, tags, publish date, read time, cover image and the author's name, role and photo.

Testimonials. Name, quote, position, photo, client since and a reference to the related Project.

Variables

The template uses three variable collections. Changing a variable updates the entire site.

Colors

Secondary Color (amber), Dark Main Color, Main Color, Light Main Color, White Color and the Grey shades drive the dark Finestar look. Light Grey Color 20 is used for every thin line.

Sizes

The spacing scale, section padding and radius tokens. Fixed Spacing 4X Small is the 1px value used for borders and dividers.

Typography

Anton for headings and Inter Tight for body text, with Tablet and Mobile modes that scale sizes down automatically.

Logo, images and fonts

Logo

Select Navbar Finestar and change Nav Logo Image, Nav Logo Text and Nav Logo Alt. The same image is used in the floating dock and in the menu overlay. The giant footer wordmark is the Wordmark property on Footer Finestar.

Images

Hero image: the Image and Image Alt properties on Hero Finestar

About pills: Pill Image 01 to 03 and their alt texts on About Finestar

Services, Projects, Blogs and Testimonials images: the image fields of each CMS item

Tip: in the Assets panel, Replace swaps an image everywhere it is used

Fonts and icons

Anton and Inter Tight from Google Fonts are already connected in Site Settings. Icons are Iconoir SVGs that follow the text colour. Full details are on the Licenses page.

Before you launch

Delete this Instructions page

Replace all demo images, copy and CMS items

Set the notification email on the contact and newsletter forms

Review the SEO title and description on each page and CMS template

Update the Open Graph image in Site Settings and on each page

Check the 404 and password-protected pages

Publish and test every form and navbar link