Buyer guide
Start here.
Everything you need to make GROUNDS your own landscape or outdoor living website, in eleven short steps. No code required.
Functional features: CMS projects and filters, the project builder, forms, the before-and-after slider and the materials explorer. Sample content: every business, project, location, budget range, article and contact detail is fictional and must be replaced.
01
Duplicate and rename
· Remix GROUNDS into your Framer workspace and rename the project.
· Site Settings: update the site title, description, favicon and social image.
· Plan check: GROUNDS uses 4 CMS collections (Projects, Categories, Services, Journal). At the time of writing (checked November 2026), Framer’s Basic plan allows 2 collections and Pro allows 10, so a custom domain needs Pro. The Free plan can preview it on a framer.app address. Always confirm on framer.com/pricing.
02
Edit the brand
· Assets, Colors: edit Limestone, Stone, Forest, Forest Deep, Sage, Sage Light, Clay, Clay Text, Ink and Ink Soft. Every page updates.
· Assets, Text: Instrument Serif is the display face and Geist the body face. Swap fonts inside the text styles, never on individual layers.
· Change the GROUNDS wordmark in the Navigation component and the footer wordmark in the Site Layout. Or ask the Agent: /rebrand.
03
Customise the design system
· The Design System page shows every token, text style and component. It uses the live styles, so it always matches the site.
· Keep the section pattern: full-width band, 1320px inner column, eyebrow plus display heading.
04
Replace project photography
· CMS, Projects: replace the Hero Image and the Gallery images for each project and write alt text for each image.
· Home hero, studio and process photos are on the canvas: select the photo layer and choose a new image.
· Sample photos are from Unsplash and are licensed for use on your site. Replacing them with your own work is strongly recommended.
05
Manage CMS projects
· Each project has a title, category, location, year, summary, hero image, gallery, materials, project scope, brief, design challenge, concept, related services and order.
· Turn on Featured for the one project shown in the homepage Featured Project Story.
· Categories power the filter chips on Home and Projects. Add a category and a new chip appears.
06
Configure enquiries and read submitted plans
· Three native Framer forms: the Garden Planner Form (Start a Project), the Contact Form and the footer Newsletter Form.
· Select each form and set where submissions go (email, webhook or an integration). Framer also keeps submissions in the project.
· To view a submitted garden, open its garden_plan_link. It opens /plan-viewer on your site, which redraws the plan and offers Download image and Print or save as PDF. Keep the /plan-viewer page published (it is noindex).
· Send one real test plan from your published site and open the link before you launch.
07
How Design Your Garden works
· /start-a-project is one native Framer form named Garden Planner Form, split into Step 1 Draw, Step 2 Design, Step 3 Tell us more, Step 4 Your details and Step 5 Review. Enquiry Steps shows one step at a time.
· Draw: visitors start with a rectangle or L-shape, or click to place corners and close the shape. Corners can be dragged; small + handles add corners. Undo, redo, zoom and reset (with confirmation) are in the toolbar.
· Design: visitors drag features from the library onto the plan, or tap a feature and tap the plan (phones). Selected features can be moved, resized, rotated, labelled, duplicated or deleted. Features cannot be dropped outside the outline.
· Accessible alternative: a list option lets visitors choose a garden shape and pick features with approximate positions (Top left, Centre and so on) without drawing.
· Drafts save automatically in the visitor’s own browser (this device only) and can be restored later. Nothing is stored online until they press Send.
· Review shows the plan, a feature table and every answer. On Send, the native form delivers all fields plus garden_plan_summary (readable text), garden_plan_json (structured data), garden_features and garden_plan_link, a link that redraws the plan on your /plan-viewer page. Framer forms cannot attach files, so the plan travels as data and a link, not an image attachment.
08
Use the before-and-after slider
· The homepage slider is an illustrative demo: its concept layer is a sketch generated from the finished photo. Replace both images with a genuine before-and-after pair of the same garden.
· On project pages, the slider appears only when a project has a Before Image. Add Before Image, After Image and an optional Transformation Note in the CMS.
· Drag, tap or use the arrow keys. Without JavaScript the images show split at the start position.
09
Customise the planner and Material Studio
· Budget ranges and project types: edit the option labels and each option’s input value in Step 3 on /start-a-project.
· Feature library: names, categories, default sizes and drawings live in the FEATURES list at the top of the GardenPlanner code file. Rename items there; new drawings need a small code change.
· Colours follow the colour styles; the planner’s canvas and controls use the same Forest, Limestone, Sage and Clay values defined at the top of the code file.
· Material Studio (Home and Materials): edit each material’s name, texture photo, note and typical spec in the right panel. Keep the Illustrative visualisation label.
11
Publish on your domain
· Replace all sample text, the fictional address, email and phone, and the sample Privacy and Terms content.
· Run /launch-check, publish, then connect your domain in Site Settings, Domains (Pro plan needed for 4 collections).
· Test the live site on a real phone, including the project builder and newsletter.
Start a project
A great space
begins with a
conversation.
