START HERE
Setting up Stonefold
Ten minutes of setup and the site is yours. Work top to bottom.
Delete this page before you publish.
01 SHOW THE HERO BEFORE YOU EDIT · READ THIS FIRST
The Page intro layer covers the whole hero on the canvas. Open it and the first thing you see is the plan drawing, not the hero, so it looks like the hero is missing. It is not.
In the Layers panel select Page intro and toggle its visibility off. The hero appears underneath and you can edit it normally.
Turn Page intro back on before you publish, or the opening animation will not play on the live site.
02 CHANGE THE FORM RECIPIENT · DO NOT SKIP
Every enquiry currently goes to the template author, not to you. Nothing else matters until this is done.
On the Home page select the Enquiry Form layer. In the Form panel on the right, click the Email chip under Send To and replace the Recipient with your own address.
Then test it: publish, submit the form on the live site, and check that it arrives.
03 SWAP THE TWO FONTS
Stonefold uses two families and nothing else. Coconat for headings, Geist for body and labels.
Open the font manager and replace them. Keep it to two. Sizes come from the text styles (Display, Heading 2, Heading 3, Body, Label), so the scale stays consistent on its own.
04 CHANGE THE SIX COLOURS
Every colour on the site is a style, so you edit six values and everything follows. Do not type a raw hex onto a layer.
Limestone: page background. Charcoal: primary text. Muted: secondary text. Oxide: the green on dark sections. Coal: darkest section background. Hairline: dividers and borders.
05 REPLACING IMAGES: USE THE INNER LAYER · DO NOT SKIP
Every photo sits in two layers. The outer layer is the crop window and holds the size. Inside it is a layer called Parallax Image that holds the photo and drifts as you scroll.
Replace the fill on Parallax Image, not on the outer layer. Swap the outer one and nothing appears.
Keep the inner layer taller than its window. It ships at 130%, and that extra height is what the image travels through.
06 SECTIONS AND NUMBERING
Six numbered sections run 01 to 06. The numbers are plain text, so if you delete or reorder a section, renumber the rest by hand.
07 NAVIGATION LINKS
The nav scrolls to sections on the same page. Each target carries an ID: projects, services, process, enquire.
Rename a section and the link still works. Delete one and you should remove its nav link too, or it will scroll nowhere.
08 THE INTRO ANIMATION
The opening plan-drawing sequence is a component with its own settings. Select the Page intro layer and edit them on the right: wordmark, the three discipline labels, background, plan lines, accent, draw time, and whether it plays once per session or on every visit.
To remove it, delete the Page intro layer. The site works without it.
09 BREAKPOINTS
Three of them: desktop from 1200, tablet from 810, phone below 810. Edit desktop first, then check the other two.
Structure is shared across all three, so adding a layer adds it everywhere. Only size, spacing and visibility differ.
The nav shows Work, Services and Method on desktop and tablet, and only Enquire on phone. That is deliberate.
10 THE CODE LAYERS
Four code files ship with the template. Page intro is the opening animation. Services slider is the What We Do carousel, and you edit its slides in the property panel. FX Parallax is the scroll drift on images. Smooth Scroll eases the whole page.
FX Parallax and Smooth Scroll are decorative. Delete either and every image and section stays exactly where it is.
BEFORE YOU PUBLISH
Page intro switched back on
Form recipient changed and tested
Fonts and colours swapped
Every photo replaced on the inner Parallax Image layer
Title, description and social image set in Site Settings
This page deleted