Template guide
3
CMS collections, plus Topics
24
colour styles
19
text styles
9
components with settings
5
screen sizes
Make it yours
Start with colour and type.
01
Colours
The site runs on 24 colour styles in three groups: Night for the sky and dark sections, Sun for the warm accents and buttons, Day for the paper pages. Change one and every page follows.
Where
Assets → Color Styles
02
Fonts & sizes
Fraunces and Figtree are set in 19 text styles, from Hero to Caption. Each style already has a size for all five screen sizes, so a new font carries through everywhere.
Where
Assets → Text Styles
03
Menu, footer & crisis bar
The floating menu, the phone drawer, the 988 crisis bar and the footer live in one layout that every page uses. Edit them once.
Where
Pages → Main Layout
04
Screen sizes
Every page has five sizes: Large (1800 px and up), Desktop, Laptop, Tablet and Phone. Edit Desktop first; the others follow unless you change something on them.
Where
The breakpoints above each page
Your content
Most of the site comes from the CMS.
05
Therapists
Each therapist is a CMS item with a profile page. They appear on the Home, on the Therapists page and on every specialty they are linked to. Status Colour sets the little dot.
Where
CMS → Therapists
06
The matcher quiz
The three questions on the Home have their own settings, separate from the CMS. Select the quiz to edit questions, answers and up to four therapists: name, photo, topics, times and next free call. Topic and time keys must match the options in questions 1 and 3.
Where
Home → Therapist Matcher → right panel
07
Journal
Add a note and pick its Topic from the list. It shows up on the Journal, on the Home when it is among the newest three, and on the matching specialty page. The search box looks through titles.
Where
CMS → Journal
08
Topics
Add, rename or reorder topics here. The filter buttons on the Journal update by themselves, and Order sets their order.
Where
CMS → Topics
09
Specialties
Each specialty gets its own page. Pick its Topic to show related notes and its Therapists to show who helps.
Where
CMS → Specialties
10
Prices & hours
Fees appear in a few places, so change them together: each therapist’s and specialty’s Fee, the Fees page, the fees section on the Home and the sliding scale’s Bands. Opening hours sit in the footer, on the Contact page and in each therapist’s Hours.
Where
CMS, Fees page, Home and Main Layout
Settings & launch
A few things to check before you go live.
11
Contact form
The request form is a native Framer form. Select it to choose where submissions go, and edit the options in each dropdown.
Where
Contact page → Form → right panel
12
Crisis numbers
The crisis bar and the Crisis resources page list US services: 988, 911 and the Crisis Text Line. Replace them with the services where you practise before you publish.
Where
Main Layout and the Crisis resources page
13
Effects & components
The night sky, the rising sun, the hills, the breathing exercise, the FAQ, the sliding scale and the clock in the menu are components with settings for colour, text and speed.
Where
Select one → right panel
14
Before you publish
Add your favicon, social image and site name, then check the title and description of each page. Delete this guide, or keep it out of the menu as it is now.
Where
Site Settings and each page’s settings
Make it yours.
Start with the colours, then the CMS. The rest of the site follows.