Hi, I'm Lee-Jay

Official Framer Expert

Helping growing startups turn outdated sites into standout ones.

Portfolio

Start a Project

Portfolio

My Best Work

Store

Templates

Hi, I'm Lee-Jay

Official Framer Expert

Helping growing startups turn outdated sites into standout ones.

Portfolio

My Best Work

Store

Templates

Start a Project

ONBOARDING & CUSTOMIZATION GUIDE

How to Customize This Website

A complete, beginner-friendly manual for making this template your own. Follow the steps below to rebrand, rewrite, restyle, and launch your site — using Framer and AI agents, with no technical experience required.

Beginner friendly

~30 minutes

No code needed

What this guide covers

Getting Started

Understand how the whole site is organized.

Brand Setup

Name, logo, colors, type & contact details.

Content Customization

Headlines, copy, testimonials & services.

Images & Media

Swap photos, galleries, hero images & video.

Using AI Agents

Copy-paste prompts to generate everything fast.

CMS Management

Add, edit, delete & organize collections.

SEO & Metadata

Page titles, descriptions & social sharing.

Advanced Customization

Layout sections, components, nav & forms.

Launch Checklist

Everything to check before you publish.

01 — GETTING STARTED

Understand how the site is built

Before changing anything, it helps to know where everything lives. This template is organized into five simple areas inside Framer. You’ll find them all in the left-hand panels of the editor.

WORKSPACE PANELS

Pages

CMS Collections

Components

Styles

Assets

Pages

Your routed website pages (Home, Store, Template detail). Open the Pages panel in the top-left to switch between them.

CMS Collections

Reusable content like Templates and Testimonials. Edit these in the CMS panel and every page using them updates automatically.

Components

Repeating building blocks — the Navigation Bar, Buttons, Feature Cards and Price Cards. Change one and it updates everywhere.

Styles

Your global colors and text styles. Update a color token or text style once to restyle the entire site consistently.

Assets

Uploaded images, logos and files. Open the Assets panel to manage everything you've added to the project.

PRO TIP

Press the Layers panel (top-left) to see the structure of any page. Click a layer to jump straight to it on the canvas — the fastest way to find what you want to edit.

02 — BRAND SETUP

Make it your brand

These six settings define your identity across the whole site. Update them once and they carry through every page automatically.

BRAND KIT

Your logo

Typography

Business name

Double-click the logo text in the navigation and footer, then type your name. It appears in the top-left of every page.

Logo

Select the logo layer and drag your own image onto it, or use the fill setting in the right panel to upload your logo file.

Brand colors

Open the Styles panel and edit the color tokens (Background, Text, Accent). Changing the Accent recolors buttons and highlights site-wide.

Typography

In the Styles panel, edit the text styles (Display, Heading, Body). Swap the font family there once to update all headings and paragraphs.

Contact information

Update the email, phone and address text in the footer. Select each text layer and replace it with your own details.

Social media links

Select each social icon in the footer and update its link in the right panel to point at your own profiles.

PRO TIP

Always change colors through the Styles panel tokens — never recolor elements one by one. Editing the token keeps your whole site perfectly consistent.

COMMON MISTAKE

Don't upload a giant logo file. Export your logo at roughly 2× its display size (e.g. 320px wide) so pages stay fast to load.

03 — CONTENT CUSTOMIZATION

Replace the words with yours

To edit any text, simply double-click it on the canvas and type. Below is where each kind of content lives in this template, plus AI prompts to write replacements in seconds.

EDITING TEXT

Your

headline

Double-click to edit

Headlines & subheadings

Found at the top of the Home hero and at the start of each section. Double-click and type your message — keep it short and benefit-led.

Body copy

The paragraphs beneath headings. Replace with your own description of what you do and who you help.

Calls-to-action

The buttons (e.g. ‘Book a call’). Edit the label text and set the button link in the right panel.

Testimonials (Wall of Fame)

These come from a CMS collection. Edit them in the CMS panel so every testimonial card updates at once.

Team & about info

The ‘Hire a Pro Expert’ block. Replace the photo, name and bio with your own.

Service descriptions

The Feature Cards in the services grid. Edit each card's title and text directly on the canvas.

Portfolio & case studies

The Project / Template cards come from a CMS collection. Add or edit entries in the CMS panel to showcase your own work.

BEFORE & AFTER EXAMPLE

BEFORE (template)

“Relaunch Your Site 10x Faster”

AFTER (your brand)

“Luxury Interiors, Designed Around You”

AI PROMPT — COPY & PASTE

Rewrite this headline for a premium interior design studio focused on luxury residential projects. Keep it under 8 words, confident, and benefit-led.

PRO TIP

Paste your old website or business description into an AI agent first, then ask it to rewrite each section. It keeps your voice consistent across the whole site.

04 — IMAGE & MEDIA REPLACEMENT

Swap in your own visuals

To replace any image, select it and drop a new file onto it, or change its fill in the right panel. Use the recommended sizes below to keep pages crisp and fast.

REPLACE IMAGE

Replace

Recommended 1600 × 900px

Replace an image

Select the image layer, then drag a new file onto it or click the fill thumbnail in the right panel to upload.

Update galleries & cards

Project / Template visuals live in the CMS. Edit the image field on each CMS entry so the whole gallery stays consistent.

Change the hero images

The large visuals at the top of Home. Select each and replace the fill — keep them high resolution since they're the first thing visitors see.

Add a video

Insert a Video or YouTube component from the insert panel, then paste your video URL or upload an MP4.

Optimize for performance

Compress images before uploading and export at about 2× display size. Framer serves modern formats automatically once uploaded.

RECOMMENDED IMAGE SIZES

Hero / full-width

2400 × 1600 px

Project / gallery card

1200 × 900 px

Team photo / avatar

600 × 600 px

Logo (transparent PNG/SVG)

~320 px wide

AI PROMPT — COPY & PASTE

Generate a list of 8 image concepts for a modern fitness coaching brand — include the subject, mood, and composition for each so I can search or shoot them.

COMMON MISTAKE

Don't stretch an image to fit a frame. Match the original aspect ratio, or set the fill to ‘Fit’ / ‘Fill’ so it crops cleanly instead of distorting.

05 — USING AI AGENTS

Let AI do the heavy lifting

An AI agent can draft every piece of copy on this site in minutes. Copy a prompt below, replace the details in brackets with your own, and paste the result back into the matching section.

AI ASSISTANT

Prompt

Write homepage copy for my studio that helps small brands…

Generate

Content generation

AI PROMPT — COPY & PASTE

Write homepage copy for [business] that helps [audience]. Give me a hero headline, a one-line subheading, and a short intro paragraph. Tone: [confident / friendly / premium].

Brand messaging

AI PROMPT — COPY & PASTE

Create a clear value proposition and 3 supporting taglines for [business]. Explain what we do, who it's for, and why we're different — in plain, jargon-free language.

SEO optimization

AI PROMPT — COPY & PASTE

Write an SEO page title (under 60 characters) and meta description (under 155 characters) for the [page name] page of [business], targeting the keyword [keyword].

Image ideation

AI PROMPT — COPY & PASTE

Suggest 8 photo concepts for [business] that match a [modern / warm / minimal] aesthetic. For each, describe the subject, mood and composition so I can search or shoot them.

Service descriptions

AI PROMPT — COPY & PASTE

Write 6 short service cards for [business]. Each needs a 2–4 word title and one sentence (max 15 words) describing the benefit to the customer.

Customer testimonials

AI PROMPT — COPY & PASTE

Polish these rough customer notes into 3 natural-sounding testimonials, each 1–2 sentences, with a believable name and role. Notes: [paste your raw feedback here].

FAQ creation

AI PROMPT — COPY & PASTE

Generate 6 frequently asked questions and concise answers for [business], covering pricing, process, timelines and what's included.

PRO TIP

Give the AI context first: paste your business name, what you do, and your tone of voice at the start of the chat. Every prompt after that will sound like you.

06 — CMS MANAGEMENT

Manage your content collections

Repeating content — like templates and testimonials — is stored in the CMS so you edit it in one place. Open the CMS panel from the left sidebar to manage your collections.

CMS COLLECTION

Title

Status

Project A

Project B

Project C

Add a new entry

Open the CMS panel, choose a collection, and click ‘New’. Fill in the fields (title, image, description) and it appears on the site instantly.

Edit existing content

Click any entry in the collection to open it, then update its fields. Every card or page using that entry updates automatically.

Delete an entry

Select an entry and choose delete. Removing it also removes it from every list it appeared in — so double-check before deleting.

Organize collections

Reorder entries by dragging them, and use the sort and filter options on each CMS list to control what shows and in what order.

PRO TIP

Edit the fields, not the cards. Changing text directly on a CMS card edits only that one. Always update content inside the CMS panel to keep every instance in sync.

COMMON MISTAKE

Don't delete a collection field unless you're sure. Removing a field deletes that data from every entry at once and can't be undone.

07 — SEO & METADATA

Get found on search & socials

Metadata controls how your site looks in Google and when shared on social media. Select a page in the Pages panel, then open its settings to edit the fields below.

SEARCH PREVIEW

yoursite.com

Your Page Title — Brand

A short, compelling description that makes people want to click through from search.

Page titles

The clickable headline in search results. Keep it under 60 characters and lead with what the page is about.

Meta descriptions

The short summary under the title in Google. Aim for around 150 characters and include a reason to click.

Open Graph image

The preview image shown when your link is shared. Set a 1200 × 630 px image per page in the page settings.

Social sharing settings

Check the social preview in page settings so your title, description and image look right on every platform.

Basic on-page SEO

Use clear headings, describe images with alt text, and include the words your customers actually search for in your copy.

AI PROMPT — COPY & PASTE

Write an SEO-friendly page title (under 60 characters) and meta description (under 155 characters) for the [page] page of [business], targeting [keyword]. Make it compelling enough to click.

PRO TIP

Give every page a unique title and description. Duplicate metadata across pages confuses search engines and weakens your ranking.

08 — ADVANCED CUSTOMIZATION

Go deeper with structure

Once your content is in, you can rearrange and restyle the structure itself. These edits are more powerful — and some affect the whole site — so make changes one at a time and preview as you go.

LAYERS

Section

Hero

Heading

Button

Layout sections

Reorder sections by dragging them in the Layers panel. Delete a section you don't need, or duplicate one to repeat a layout.

Components

Cards, buttons and the nav are components. Editing the main component updates every copy — great for global changes, risky for one-offs.

Navigation

Edit the nav labels and their links in the right panel. Add or remove items by editing the Navigation Bar component.

Footer content

Update links, contact details and social icons in the footer. It usually repeats across pages, so changes apply everywhere.

Buttons

Change a button's label, then set where it links in the right panel. Restyle buttons globally by editing the Button component.

Forms

Edit field labels and placeholders, then connect the form to your email or a tool like Loops or Mailchimp so submissions reach you.

WARNING — AFFECTS WHOLE SITE

Editing a component's main copy changes every instance across all pages. To change just one, detach that single instance first, then edit it.

PRO TIP

Make one change, then preview before the next. If something breaks, undo (Cmd/Ctrl+Z) immediately — it's much easier to fix one step than ten.

09 — LAUNCH CHECKLIST

Before you publish

Run through this final checklist. When every box is ticked, hit Publish in the top-right of the editor and your site goes live.

LAUNCH READY

90%

Checklist complete

Logo updated

Content reviewed & proofread

Images replaced

All links tested

SEO titles & descriptions completed

Forms tested & connected

Mobile responsiveness checked

Site published 🎉

Designed & Built

in Framer