Edit me · a short guide
Make it yours
You only edit content. Names, prices, pictures and words live in the CMS or in plain text layers, and everything else follows.
No code
About 30 minutes
Start here
Thirteen things you can change
01
Your name and details
Open the CMS and choose Site. There is one item.
Change Owner name, Role, Place, Intro, Status, Email, Phone, Hours and Footer line.
These update the nav name, the hero headline, kicker and intro, the ticker status, the footer, the contact page and the call-to-action email.
02
Quests (your projects)
CMS, Quests. Each item has a title, client, year, role, category, summary, result, three pictures, a live link and a story.
The Home page shows the first three by number. The Quests page shows all of them.
Pick a Category so the item appears on its filter page.
03
The guild (your team)
CMS, Guild. Add a name, role, since year, specialty, quote, bio and a portrait.
A portrait is a 308 by 252 picture. Draw your own pixel portrait or use any picture.
Working alone? Keep one item and delete the rest.
04
Services and prices
CMS, Services. Set the icon, title, price note, timeline, summary, what is included and the details.
Prices are plain text, so write them any way you like.
Home shows the first four.
05
Library (blog)
CMS, Posts. Add a title, date, tag, excerpt, read time, cover and body.
The newest post is featured on the Library page. Home shows the newest three.
06
Reviews
CMS, Reviews. Add a name, role, company, quote and pick the quest it belongs to.
07
Quest types
CMS, Categories. Six types become the filter pills. Rename them to fit your work: Brand, Web, App, Motion, Print, Systems.
08
Map labels and links
Open Home and click a label plate on the map, then edit the text. There are six: Quests, Guild, Inn, Market, Library and Lookout.
To send a building somewhere else, select its layer (for example Castle (link)) and change its link.
The tablet and phone maps have their own labels. Edit those too.
09
Swap the pixel art
Every layer is an ordinary image: Land and sea, Shadows, Mountains trees and guards, each building, the boat, the villagers and the clouds.
Replace a layer by choosing a new image in its fill. Keep the same size. Draw at small size and export at whole-number scales: x4 on desktop (1440 by 900), x3 on tablet (810 by 900), x2 on phone (390 by 620).
Buildings glow and lift on hover because of their layer names. Keep the layer inside its building frame.
10
Colours and fonts
Colour styles: Ink, Night, Parchment, Cream, Gold, Grass, River, Roof, Violet, Stone. Change one and the whole site follows.
Text styles: Display, Heading 2, Heading 3, Story Heading, Body Large, Body, Label, Numeral, Button.
Fonts are Jersey 25, Silkscreen and Nunito Sans. Swap them in the text styles.
11
Forms
The Inn page form and the newsletter form are native Framer forms. Select a form and choose where messages go in its settings.
The Send button has five looks: default, hover, sending, sent and error.
12
Motion
All motion is plain CSS classes from one small code file called WlMotion. It respects reduced motion.
To stop an effect, remove the override from that layer. Nothing else depends on it.
13
Before you publish
Replace the demo owner, team, quests and reviews.
Set the page titles and descriptions in each page’s settings.
Check the phone and tablet maps, and the 404 page.
Ready to publish?
Once your content is in, publish from Framer and send me a link. I would love to see it.