Delete this page before you publish.
Setup guide · The Strategist template
Start here
Hello, and thank you for choosing this template. This guide walks you through making it yours: text, fonts, colours, photos, forms, mobile, policies and publishing. Everything happens in Framer's own panels. You will not need to touch code.
Set aside about an hour. Work through the sections in order, then tick the checklist at the end before you publish.
Section 1
How this file is organised
The left panel has three tabs. Pages lists every page on the site; click one to open it. Layers shows what is on the open page: every section is numbered in the order it appears (01 Hero, 02 Ticker, and so on), and a name ending in (photo) or (portrait) contains a picture slot. Assets holds your colour and text styles and the shared components.
The navigation bar and the footer are components. Edit them once under Assets, then Components, and every page updates.
Left: the Pages tab. Right: the Layers tab for the About page, with its numbered sections.
Section 2
Changing text and fonts
Double-click any text on the canvas to edit it. Type your own words and click away. The text keeps its style.
To change a font or size across the whole site, do not edit text one box at a time. Open Assets, then Styles, then Text. Each style has one job: Display for the big headlines, Heading for section titles, Body for paragraphs, Label for the small capitals. Click a style, change its font or size, and every heading or paragraph that uses it updates on every page at once.
The text styles under Assets. Each one has a single job.
Section 3
Changing colours
Colours work the same way as text: Assets, then Styles, then Color. Every colour in the template is one of the Brand styles, so changing a style changes it everywhere it is used. Never recolour individual elements.
What each style does. Background is the page ground and BackgroundAlt the soft panels. Ink is all body text; InkMuted is secondary text. Accent and AccentDeep are the two brand colours. Highlight is the marker-pen highlight behind headline words. Line is the hairline rule. Tertiary1 and Tertiary2 are the small ticker stars, and PinkWash is the soft tinted band.
The one rule that matters: Accent is a fill. Use it for buttons, bands and highlights, never for text. Where you want coloured words, use AccentDeep, which is dark enough to read.
A few decorative components carry their own colour swatches in the right-hand panel instead of a style: the cookie banner, ticker stars, scribble underlines, starbursts, torn-paper cards, the FAQ and the social icons. If you change the palette, click each of those once and pick the matching new colour.
The Brand colour styles under Assets, with the job each one does.
Section 4
Adding your photos
Click a photo slot on the canvas, or find it in Layers: every slot starts with a camera icon, so typing photo into the Layers search lists them all. With the slot selected, find Fill in the right-hand panel, click the swatch, choose the Image tab and upload your picture. The frame keeps its size and crops the picture to fit.
Choose pictures that suit the slot. Upright portraits (3:4): the About portrait, the homepage portraits and the testimonial photos. Landscape (4:3): the six journey photos and the keynotes photo. Wide landscape: the hero photos on Home, About, Contact and Links. Square: the three small offer thumbnails on the Links page.
Use images at least 1600px on the long edge, saved as JPG, and keep each under about 500KB so the pages stay fast.
The Fill popover with the Image tab open, and the Fill swatch that opens it.
Section 5
Connecting forms and booking
The contact form ships unconnected on purpose: it has to send to your inbox, not ours. Open the Contact page, select the form (Layers, 01 Hero, Form), and in the right-hand panel find the Form section. Put your email address in Send To. Send yourself a test message before you publish.
Booking: if you use a booking tool such as Calendly or Acuity, copy its embed code, add an Embed element from the Insert menu (the plus at the top left) where you want it, and paste the code in. The template does not include a booking embed by default; the contact form is the main route in.
With the form selected, the Form settings appear on the right. Send To is where your email goes.
Section 6
Checking mobile
Framer keeps three versions of every page: Desktop, Tablet and Phone. They sit side by side on the canvas. Zoom out and click the Phone frame to see how the page reads on a phone.
Things that usually need a look: long headlines that wrap awkwardly, photo crops with faces near an edge, and anything you have added with a fixed width. Edit on the Phone frame and the change applies to phones only.
Check every page on the Phone frame before you publish, then check again on your own phone afterwards.
The three breakpoint frames on the canvas, with the breakpoint settings on the right.
Section 7
Policies and terms
The Privacy Policy and Terms pages are placeholders. They exist to show the layout, not to protect your business, and they are not legal advice. Every [BRACKET] is a gap for your details, and the wording itself must be reviewed or replaced by someone qualified for the country you trade in.
Do not publish them as they are.
Section 8
Publishing and your domain
Click Publish at the top right. The panel shows your site address and an Update button; Update pushes the current version live. Framer gives you a free framer.app address to start with.
A custom domain (yourname.com) needs a paid Framer plan. Once you are on one, click the site address in the Publish panel to open the site settings, choose Domains, add your domain and follow Framer's steps to point its DNS records at Framer. It can take a few hours to go live.
The Publish panel: your site address, and the Update button that pushes changes live.
Section 9
Before you publish
☐ Placeholder text replaced on every page, including the footer copyright line and the page titles in each page's settings.
☐ Every photo slot filled with your own pictures.
☐ Contact form sending to your email, and a test message received.
☐ Privacy Policy and Terms rewritten and reviewed.
☐ Every page checked on the Phone frame.
☐ Every link clicked in preview, including the social icons and the email links.
☐ This page deleted.
Section 10
Getting help
Covered: getting the template working as designed, questions about the panels this guide describes, and anything that looks broken out of the box. Not covered: custom design changes, copywriting, and third-party tools such as booking or email platforms.
Email us and we reply within two working days, Monday to Friday.
[Eleven Even support email]
Would rather have it set up for you? The Designer add-on covers photos, copy, forms, domain and a mobile check, delivered ready to publish. Ask by email.
This guide is for you, not your visitors. Delete this page before you publish. Made by Eleven Even Designs.