From a good fit
to your finished page.

Choose the page your project needs.

Start with the visitor's main task: exploring a portfolio, choosing a service, finding a class or making an enquiry. Open the preview and try that path. A matching layout is a better starting point than a design that needs a full structural rebuild.

Petal, Counter, Vow, Form Studio, Tidehouse and Afterhours have interactive browser previews. Goodkind, Stillroom and Fieldwork currently show screenshot previews. A screenshot lets you assess the design; it does not demonstrate an interaction.

Open your editable project.

1. When you have the delivery ZIP, extract it and open START-HERE.html. The Markdown guide is included if you prefer reading plain text.
2. Use its Copy to Framer link, sign in to Framer and choose Copy. Work in the new project in your own workspace. Keep the delivery link private.
3. For a code-component template, open the Home page and use Layers to select the component inside the Desktop frame. Edit its supported fields in the property panel on the right. Keep Demo mode on while setting up these eight code-component templates; it suppresses their external contact links.
4. Leave width at Fill and height at Fit Content so the component follows the page width and grows with its content. The parent frame must grow too; a fixed-height parent can clip the page. The included guide also explains source installation if you need it.

Fieldwork is different: edit its text, layout layers and form directly in Framer. It does not use the single-component controls described above.

Replace the examples with real work.

Change the business name, headline, descriptions, address, hours and price labels. Where present, Page wording is a group of text controls in the property panel for navigation labels, section headings, button labels and other short copy. Avoid leaving sample answers about availability, access, services or booking arrangements.

Where an Edit section selector is available, choose the list you want to edit, such as Bouquets, Menu items, Gallery or Questions. It changes which list editor is shown; it does not remove other sections from the page. Tidehouse exposes its Rooms list directly.

• Photography: Vow's wedding scenes, Form Studio's studio, Tidehouse's coast and Stillroom's interiors are AI-generated concepts. Replace them with accurate business or client imagery. Do not present them as completed commissions or real premises.
• Illustration: Petal's sample bouquets are illustrative moods, not exact products. Upload a photo for each real bouquet if you need to show the exact arrangement. Goodkind, Counter and Afterhours include original artwork.
• Lists: use consistent category or day names in menus and schedules. Check order, descriptions and prices after adding or rearranging items. List controls differ by template; follow its own guide.
• Photos: add useful alt text and inspect the crop on a phone. Vow's hero crop may need a source adjustment when replacing the photo with a differently positioned subject.

Connect the action that matters.

Keep Demo mode on in the eight code-component templates while you work. It suppresses their external contact destinations. Fieldwork's native form needs separate destination setup; it does not use that toggle.

Email enquiries

Petal, Counter and Stillroom use email links. Goodkind and Tidehouse can use an external booking link or email. Afterhours can use a ticket link or organiser email.

External booking and enquiry pages

Form Studio links to your booking provider. Vow links to your enquiry destination. The templates do not include scheduling, inventory, payment processing or a message receiver.

A native form

Fieldwork includes an enquiry form. Configure its destination and send a test submission through your own setup before inviting visitors to use it.

Replace placeholder destinations, switch Demo mode off when ready and check the final link. An email link opens the visitor's mail app; it does not submit a message from the website.

Check the whole journey, then publish.

1. Preview at desktop, tablet and phone widths. Include a narrow 320px phone view; look for clipped names, awkward headings and cropped subjects.
2. Use the keyboard to follow navigation, open questions and operate any menus, filters, room selectors or galleries your template includes. Check Escape closes Vow's gallery.
3. For the eight code-component templates, confirm Demo mode is off before publishing; it suppresses contact links when on. Fieldwork instead needs its native form destination configured. Follow the main contact action to your real destination. For a form, confirm the test message actually arrives. For a booking or ticket service, verify the external setup rather than relying on the demo.
4. Review spelling, pricing, image rights and business claims with the client. Write down which content they can change visually and which design changes require source editing.
5. Publish through your Framer project when those checks pass. Connect your domain using your own account, then repeat the key checks on the published URL.

Budget separately for hosting. Your Framer account and any required publishing plan, custom domain and third-party services are separate. The template is the starting design, not managed hosting or an ongoing booking service.

A clear next step when you're stuck.

Start with the template-specific guide in the ZIP. It lists the controls, photo assignments and contact setup for that design.

If you need help, email me@mthomas.io with the template name, what you tried and the step where the result differed from what you expected. A screenshot can help explain a layout problem. Do not send passwords, API keys or private client information.