{ how to run the site }

CMS &
Image Instructions

Five parts of the SEVEN homepage are yours to edit without touching the design. Everything else on the page is fixed. This is the whole manual: what each area controls, what to type in each field, and what the photos need to be.
Read this first

Every Photo, Every Time

The site is photography-led, so the pictures do most of the talking. Four rules cover all of it.

JPG or WebP
1600px longest edge
Around 200KB each
Never a screenshot
Why the size matters
A 6MB phone photo looks identical to a 200KB one on screen and takes ten times longer to load. Export at 1600px and the site stays fast on a phone in a parking lot, which is where most people will see it.
What reads well
Real work in real places: the wall, the window, the truck, the hands. Warm and saturated beats flat and grey. Leave a little room around the artwork so nothing important gets cropped when the frame changes shape.
Photos uploaded into the CMS replace the built-in ones. If you empty a field or switch an item off, the site quietly falls back to the photos already in the design — nothing ever breaks or goes blank.
Area 01 · Collection: What We Do Cards

The Service Cards

The six coloured cards you drag through in the What We Do section. Each card is one item in this collection: a number, three short lines, a title, a colour and one photo.

The fields
Name
The card title, e.g. “Hand-Painted Signage”. Keep it to three words where you can — it is set big, in the display face.
Number
The little label at the top of the card. Type it as 01, 02, 03 — the site wraps it in braces for you.
Order
1 to 6, front of the stack to back. Change these numbers to re-deal the cards.
Line 1 / 2 / 3
Three punchy lines under the number. Four to six words each, no full stops. They are a rhythm, not a paragraph — “Lettering With a Pulse / Painted the Old Way / Built to Last”.
Card Colour
Green, Yellow (gold), Light (clay), Dark (deep forest) or Gray (gold). Try not to put two of the same colour next to each other in the order.
Card Image
One photo of that service. It sits top-right on the card, tilted, about a quarter of the card wide — so pick something that reads small. Tight crops beat wide scenes here.
1
Open What We Do Cards in the CMS panel and click the card you want to change.
2
Edit the text, pick a colour, drag in a photo.
3
Save, then hit Publish — the homepage picks it up on the next load.
Adding a seventh card works, but the stack was designed around six. Past eight it starts to feel like a list instead of a deal of cards — give us a shout before you go bigger.
Area 02 · Collection: Services

The Services Line

The long gold line of everything SEVEN does, running under the What We Do section. Twenty items are loaded and live. One service per item — the site joins them with the dots.

The fields
Name
The service as it should read: Title Case, no punctuation at the end. “Hand Painted Signage”, not “hand painted signage.”
Order
Where it lands in the line. The current order runs signage first, then identity work, then the wilder stuff — that build-up is deliberate.
Active
Switch off to pull a service out of the line without deleting it. Handy when you stop offering something for a season.
The line is sized to fill three rows. Add four or five services and it still sits right; add fifteen and it will push the section taller — worth a look on a phone after a big add.
Area 03 · Collection: Section Galleries

The Photo Walls

Four places on the homepage pull a whole set of photos from one item each. You are not placing pictures one by one — you drop a batch into the Gallery field and the section fills itself.

The four items
selected-work
The big draggable grid in Selected Work. Twelve photos is the sweet spot — the grid loops, so an odd number is fine. Mix murals, signage and product so every direction of drag shows range.
fresh-paint
The spinning stack beside Fresh Paint. Six photos. This is the “what came off the brush this month” slot — the one worth refreshing regularly.
manifesto-collage
The scattered photos around the Visual Craftsman statement. Four photos, process-heavy: hands, masking tape, sketches.
services-cards
A backup set for the six service cards, in card order. Only needed if you would rather load card photos in one batch than one at a time.
The fields
Gallery
Drag your photos in. Order in the field is the order on the site — drag to re-arrange.
Active
Off means that section uses the photos built into the design instead. Leave it on once you have loaded your own.
Name / Slug
Do not change these. The slug is how the site finds the right set — rename it and the section falls back to its built-in photos.
1
Export your photos at 1600px, around 200KB each.
2
Open Section Galleries, click the item for the section you want (e.g. fresh-paint).
3
Drag the whole batch into Gallery, then drag inside the field to set the order.
4
Check Active is on, save, and publish.
Area 04 · Collection: Testimonials

Kind Words

The client wall. Every company name in the list is a testimonial item; click one and its quote card appears with up to three photos of that job. Eight are loaded and live.

The fields
Company Name
Exactly as it should appear in the wall of names — this is also the clickable label.
First / Last Name
Who said it. Shown in bold under the quote.
Title
Their role and company, e.g. “Founder, Freehouse Brewery”. Keep it on one line.
Testimonial Text
The quote itself. No quote marks needed — the card draws its own. Anything up to about 900 characters sits comfortably; longer and the type steps down a size to fit.
Image A / B / C
Up to three photos of that job. They sit around the quote at different angles. One is fine, three is best, blanks simply disappear.
Order / Active
Order sets where the name sits in the wall. Active off hides the item without deleting the quote.
Getting a new quote in
Paste the words exactly as the client wrote them — the voice is the point. Fix only obvious typos. Then add two or three photos of that specific job, not general SEVEN work: the card and the pictures are meant to be the same story.
Area 05 · Everything else

Copy, Photos & Publishing

Headlines, body copy and the fixed photos on the homepage are edited straight on the page in the Webflow Editor — double-click the words and type. The five collections above are the only parts that are data.

Safe to edit on the page
Any headline or paragraph, the location lines, the hero tagline, the button labels, and the little notes in braces. If you replace a photo on the page directly, match the shape of the one you are replacing.
Please leave alone
The thin vertical guide lines, the seven mark and brush shapes, section colours, and anything that moves on scroll. They are wired to the animation and the brand system — changing one usually breaks three others.
1
Make your changes in the CMS or on the page.
2
Save each item — CMS edits are staged, not live.
3
Click Publish and choose the live domain. Give it a minute, then hard-refresh the site.
If something looks wrong after a publish, nothing is lost — switch the item’s Active off, publish again, and the section returns to its built-in photos while we sort it out.