Buyer Customization Guide

Before you start

Get your template

1. Open your delivery email, “Your Dressed Panel template is ready”, and select Get your template in Framer.
2. Sign in to Framer, or create an account. Framer adds your own editable copy of Dressed Panel to your workspace.
3. Keep the email. It contains your template access link and your order reference.

Inside your project you'll also find a Start Here page with a short version of this guide. It's a draft page, so it's never published.

Your Framer plan

Dressed Panel is designed for Framer's Basic site plan. It uses exactly two CMS collections (Services and Projects) and Framer's native forms. Framer's plans and limits change over time, so check Framer's current pricing for CMS collections, CMS items, pages and forms before you publish. Publishing on your own domain needs a paid Framer site plan.

Keep a safety copy

Before you start editing, duplicate the project from your Framer dashboard and leave one copy untouched. If something goes wrong, you can compare against it.

The four places you'll use in Framer

Three rules that keep the design intact

1. Edit content on Desktop. Each page has three sizes at the top of the canvas: Desktop, Tablet and Phone. Tablet and Phone copy Desktop automatically. A text edit made on Tablet or Phone changes that size only. Only two labels are meant to be edited on Phone; Task 8 and Task 14 point them out.
2. Change content, not structure. Edit text, images, CMS items, FAQ rows, reviews, service areas and color values freely. Don't restructure layouts, delete component variants or detach styles; that's where templates break.
3. Preview often. Press Preview (▶, top right) and check desktop, tablet and phone sizes.

↑ Back to contents

The 10 must-do tasks

Do all ten before you publish. Each one replaces demo content that must not go live.

Task 1 Required Change your business name and logo

Where: the Site layout (header and footer).

1. Open Pages → Layout Templates → Site (in some versions of Framer: Assets → Templates). Make sure you're on Desktop.
2. Click the header. In the right panel, edit Company Name (e.g. “Halden”) and Descriptor (e.g. “Electric Co.”). Together they form the text logo.
3. To use your own logo image: upload it to Logo Image, then switch Use Image Logo on. Use an SVG or PNG with a transparent background; a wide logo of about 320×72 px works best.
4. Click the footer logo (on the dark footer) and edit its Company Name and Descriptor the same way. For an image logo, upload a version that reads well on a dark background, then switch Use Image Logo on.
5. Favicon and social image: open Site Settings → General. Upload a square icon (at least 512×512 px) and a 1200×630 px image for social sharing.

The small panel-style mark next to the text logo takes its colors from your color styles (Task 11). To use your own mark instead, switch on Use Image Logo.

Task 2 Required Change your phone number (four places)

Your number appears in four deliberate places. Update all four.

Link format: tel: + country code + number, with no spaces. Example: tel:+13035550148.

Task 3 Required Change your email, hours and footer text

Where: Site layout → footer (on Desktop). Click each text on the canvas and type.

• Description: “Residential electrical work across the Denver metro — …”
• Email: “hello@haldenelectric.example”. Also update its mailto: link in the right panel.
• Service-area summary: “Denver, Aurora, Lakewood, …, and the surrounding metro.” This is separate from the homepage list in Task 8; update both.
• Hours: “Mon–Fri, 7:00 am – 5:00 pm”
• Copyright: “© 2026 Halden Electric Co.”

Also update:

• the hours line on the Request an Estimate page, in the call block: “Call or text · Mon–Fri, 7:00 am – 5:00 pm”
• the email in the Privacy Policy text.

The Services links in the footer come from your Services CMS automatically.

Task 4 Required Review and update your services and their FAQs

Where: CMS → Services.

Each service gets its own page and appears automatically on the homepage, in the hero's “Circuit directory”, on the Services page, in the footer and under “Other services”.

1. Open each service and update its text, image and alt text. How the CMS works explains every field.
2. Update its FAQs, the questions shown only on that service's page:
   • Edit: click an entry and change its Question or Answer.
   • Add: use the add (+) button on the FAQs field.
   • Remove: delete the entry. If a service has no FAQs, its FAQ section hides automatically.
   • Reorder: drag entries. The list order is the order on the page.
3. Update its SEO Title and SEO Description. The included ones mention Halden Electric Co. and Denver.
4. Add a service: duplicate an existing one, then edit every field, including FAQs. Remove a service: delete the item; it disappears everywhere.
5. If you added, removed or renamed services, update the Service needed options on both forms (Task 10).

The hero's Circuit directory shows your first six services by Order. The homepage services list looks best with an even number of services. Questions that apply to every customer belong in the General FAQs (Task 7).

Task 5 Required Replace or remove the demo projects

Where: CMS → Projects. Each project is a case study with its own page.

The included projects are demonstration content. Replace them with your own work, or delete them.

1. Edit the text fields and the case-study story: The Challenge, Our Approach and The Outcome.
2. Set Service to the related service. A service's page then shows up to three related projects.
3. Replace the Cover Image and the Gallery photos, and add alt text to the cover and to each gallery image.
4. Switch Featured on for exactly one project; it shows large on the homepage. The next three non-featured projects, by Order, fill the homepage grid.

Only publish work you actually did, with the homeowner's permission for photos and location details.

Task 6 Required Replace or remove the demo reviews

Where: Home page (on Desktop) → Reviews section (“Clear, calm, and careful — in their words.”).

The section has four review cards: one featured (the large card) and three supporting (the list beside it).

1. Open the Home page on Desktop.
2. Click a review card. If a click selects the text inside instead, use the Layers panel: Reviews → Featured Review or Supporting Reviews → Review Card.
3. In the right panel, edit:
   • Name: the reviewer name at the top of the card. It displays in small capitals.
   • Quote: the review text.
   • Reviewer: the short label at the bottom (e.g. “Homeowner”).
   • Location: shown after the label (e.g. “Harvey Park”).
4. Preview at desktop, tablet and phone sizes.

• Don't change a card's Variant. The Featured, Compact and phone versions are set up for each screen size.
• Fewer than four real reviews? Delete the supporting cards you don't need, then check tablet and phone in Preview.
• No real reviews yet? Hide the whole Reviews section on every size, and remove /#reviews from your menu if you added it.

Only publish genuine reviews you have permission to use. Never invent names, ratings or review counts.

Task 7 Required Update the General FAQs

Where: Assets → Components → General FAQs.

The six General FAQs appear on both the Home page (“Answers before you call.”) and the Services page (“Common questions about our services.”). They live in one shared component, so one edit updates both pages. Make sure every answer is true for your business: estimates, response times, permits and so on.

1. Open Assets → Components → General FAQs.
2. Click a FAQ row and edit Question and Answer in the right panel.
3. Add a question: select a row and duplicate it (Ctrl+D on Windows, Cmd+D on Mac), then edit the new row.
4. Remove a question: select its row and press Delete.
5. Reorder: drag the “FAQ Row” layers in the Layers panel.
6. Preview the Home and Services pages.

• Leave each row's Variant set to Closed, so questions start collapsed.
• Don't edit the FAQ Item component itself. It controls the design and the open/close behavior of every FAQ on the site.
• About six questions works best. Keep at least one row.

Task 8 Required Change your service areas and location wording

Where: Home page (on Desktop) → Service Area section → Service Area List → Areas.

1. Open the Home page on Desktop and scroll to the Service Area section (“Serving homes across the Denver metro.”).
2. Click the list of town names. The right panel shows Service Area List.
3. Open Areas. Each item has a Name. Edit, add (+), remove or drag to reorder.
4. Preview at all three sizes. Desktop and tablet show three columns and phones show two, automatically. Long names may wrap on small phones; that's expected.

Don't change the list's Variant: “Desktop” is used on desktop and tablet, “Phone” on phones.

Update every other location mention

• The Service Area section heading and intro text above the list
• The hero label above the headline: “Residential electrician · Denver metro”. Edit it on Desktop, then switch to Phone and edit its shorter phone version, “Electrician · Denver metro”.
• The hero intro paragraph (“…for homes across the Denver metro…”)
• The footer description and service-area summary (Task 3)
• Each service's SEO Title and SEO Description (Task 4), and the page titles (Publishing checklist, step 2)
• The contact line in the Privacy Policy (Publishing checklist, step 3)

Task 9 Required Add your license number, or hide the credential line

The line under the homepage buttons reads “Licensed electrical contractor · Lic. #EC-000000 · Fully insured”, and the footer reads “Contractor license: EC-000000”. Both are placeholders.

Change the license number (one edit updates both lines)

1. Open Assets → Components → Credential Line. You'll see two versions: Hero (first) and Footer.
2. In the Hero version, click the number EC-000000 (the “License Number” layer) and type your license number.
3. Preview the Home page. The hero line and the footer now show your number.

Edit the number in the Hero version only. A change made in the Footer version changes the footer alone, and the two lines stop matching.

Change the wording

In the same Hero version, click “Licensed electrical contractor ·” or “Fully insured” and type. Keep the “·” at the end of the first text. The footer's “Contractor license:” label appears only in the Footer version; edit it there.

Hide the credentials

• Homepage: Home → click the credential line under the hero buttons → right panel → switch Show off.
• Footer: Site layout → click the license line in the footer's bottom row → right panel → switch Show off.

Only publish credentials that are real and verifiable. If your license number is unusually long, check the footer at a small phone size in Preview.

Task 10 Required Connect and test both estimate forms

There are two estimate forms: at the bottom of the Home page and on the Request an Estimate page. Connect both.

1. On each page, select the form (the Estimate Form layer).
2. In the right panel, choose where submissions go: an email notification, a webhook or a supported integration. The options depend on Framer's current form settings for your plan.
3. Keep the Service needed dropdown options identical on both forms and matched to your services (select the dropdown → right panel → options).
4. Update the short privacy line under each form (“We only use these details to respond to your request.”) so it matches how you handle form data and your Privacy Policy.
5. Publish your site, then send a test from each form and confirm it arrives.

The submit button shows “Send request”, then “Sending…”, then “Request sent — we'll be in touch” or “Couldn't send — please call us”. To change these, select the submit button on each form and edit Title, Sending Label, Success Label and Error Label in the right panel.

Form fields: Name*, Phone*, Email (optional), ZIP code*, Service needed*, Project details* (* = required).

↑ Back to contents

Optional customization

Everything in this part is up to you. The template looks finished without these changes.

Task 11 Optional Change your colors

Where: Assets → Styles → the color list.

Change the values. Never delete or rename the color styles; the whole site uses them.

Current accent values: Copper #A96100, Copper Deep #754400, Copper Light #D7A34A, Text/On Accent #FFFFFF. The names say “Copper” although the color is amber; don't rename them.

Keep text readable. Aim for at least 4.5:1 contrast between text and its background; any online contrast checker will do. If you change Accent/Copper, check that the white button text still reads clearly. If you change Accent/Copper Deep, check the small labels on light backgrounds.

Task 12 Optional Change fonts and text sizes

Where: Assets → Styles → text styles.

Change a font or size inside a text style and the whole site updates. Don't apply one-off font settings to individual text boxes.

• Display is the page title, Heading 2 is a section title, and Heading 3, Feature Title and Question are item titles. Keep these roles, so each page keeps a clear heading order.
• Display has an extra, smaller size for very narrow phones (below 360 px wide), so long words don't break. Keep it, and check long page titles at the smallest phone size in Preview.
• Body Small Inline is used only by the license line. It matches Body Small but never wraps, which keeps “Lic. #” and the number together. If you change Body Small, make the same change here.

Task 13 Optional Change the navigation menu

Where: Site layout → header → right panel → Navigation.

1. Open Pages → Layout Templates → Site on Desktop and click the header.
2. In the right panel, open Navigation. Add, remove or drag items to reorder them. Each item has a Label and a Link: a page, or a homepage section.
3. The desktop menu and the mobile menu both update. Check both in Preview.

Homepage sections you can link to: /#services, /#standard, /#work, /#reviews, /#process, /#service-area, /#faq, /#estimate.

The amber header button is set in the same panel: Estimate Label and Estimate Link (default /estimate).

Task 14 Optional Edit the homepage wording and page CTAs

Click any text on the canvas (on Desktop) and type. Read every line and change anything that isn't true for your business.

• Hero headline: keep it short, about 6–8 words, so it stays balanced on phones.
• Standards strip, process steps and job-site checklist: edit the text directly. Keep items roughly the same length so the columns stay even.
• Photo label in the Job-site Standard section: “Ckt 14 · Office pendant · Tested” describes the photo, so update it if you change that photo. It has a shorter Phone version (“Ckt 14 · Office pendant”); edit that on the Phone size too.
• CTA bands (at the end of the Services, service, Projects and project pages): select the band and edit Eyebrow, Heading, Body, Button Label and Button Link in the right panel.

Location wording (the hero label and every “Denver” mention) is covered in Task 8.

Task 15 Optional Replace images

Included Images

The images included with this template may remain in your customized website or be replaced with your own images. Included image files are provided for use with this template and should not be resold, redistributed, or offered separately as standalone image assets.

Where practical, replace the demo photos with photos of your own real work; real jobs build more trust than any demo image.

• Page images: select the image frame → right panel → Fill → choose your image.
• Service and project images: edit them in the CMS item, including each project's Gallery.
• Project Card default image: Assets → Components → Project Card. Replace it too.
• Always add alt text that describes the photo, e.g. “New 200-amp panel with labeled breakers in a basement”, including on every gallery image.

Check crops after replacing. Some frames use an adjusted image position so the subject stays in view at every size: the service page hero, the Services page images, the project page cover and the homepage Service Area photo. After you swap a photo, preview desktop, tablet and phone. If the subject is cut off, adjust the image position in the Fill settings; don't resize the frame.

Task 16 Optional Show real credentials with Trust Proof

Use this only if you have real, verifiable credentials. Add the Trust Proof component (Assets → Components) to your homepage, ideally just below the hero.

• It has four slots, each with Show, Icon, Title and Detail. Examples: “Licensed & insured” with your license number; your real review rating and count, with the platform name; your written warranty; financing; the year you started serving your area.
• Switch off the slots you don't need. Use the On Dark variant if you place it on a dark section.

Never publish the bracketed placeholder text, or any claim you can't back up.

↑ Back to contents

How the CMS works

Dressed Panel keeps the CMS deliberately small. Only services and projects live there. Everything else is edited directly on the page or in one shared component.

Services fields

You may also see an id field. It's internal; leave it as it is. A question can appear on several services; add it to each one.

Projects fields

How pages choose what to show

• Homepage projects: the Featured project, then the next three non-featured projects by Order.
• Hero Circuit directory: your first six services by Order.
• Service page: up to three projects linked to that service, plus every other service under “Other services”. With no linked project, it shows a friendly “Project write-ups for this service are on the way” message.
• Services page, Projects page and footer: every item, by Order.

Don't add more CMS collections without checking your Framer plan. The template is designed to use exactly two.

↑ Back to contents

Publishing checklist

Work through these five steps after the 10 must-do tasks. They're required too.

Step 1 Required Check that no demo content is left

• Company name, logo and favicon (Task 1)
• Phone number in all four places (Task 2)
• Email, hours (footer and Request an Estimate), footer description, footer service-area text and copyright (Task 3)
• Services, each service's FAQs and SEO fields (Task 4)
• Demo projects replaced with your own work, or deleted (Task 5)
• Demo reviews and reviewer names replaced with real reviews you have permission to publish, or removed (Task 6)
• General FAQs answer for your business (Task 7)
• Service areas, the hero label on Desktop and Phone, and every “Denver” mention (Task 8)
• License number and credential wording are real and verifiable, or switched off with Show on both lines (Task 9)
• Both forms connected and tested (Task 10)
• Photos replaced with your own real work where practical (included images may stay), with accurate alt text on every image (Task 15)

Step 2 Required Update page titles, descriptions and sharing

• Site Settings → General / SEO: the site title and description (your Home page uses these), the favicon and the social image. Confirm that search engine indexing is on.
• Each page: right-click the page in the Pages panel → Settings → title and description. The Services, Projects, Request an Estimate, Privacy Policy and 404 pages are pre-filled with demo text; replace “Halden Electric Co.” and “Denver metro”.
• Service pages use each service's SEO Title and SEO Description (Task 4).
• Project pages are titled “Project title | Project | Halden Electric Co.” and use the project's Summary as the description. Change the company name in the project detail page's settings.
• The 404 page is already hidden from search engines. Keep it that way.

Step 3 Required Rewrite the Privacy Policy

The included Privacy Policy is template text, not legal advice.

1. Rewrite it for your business, and have it reviewed by a qualified professional.
2. Update the contact details in it: the line “Halden Electric Co. · Denver metro, Colorado · (303) 555-0148”, and the phone number and email in the text (Task 2, Task 3).
3. When your own policy is in place, remove the “Template text · not legal advice” label and the paragraph explaining that the policy is placeholder text.

Step 4 Required Run a final preview

1. Preview every page at desktop, tablet and phone sizes.
2. Open and close the mobile menu. Open a few FAQs on the Home page, the Services page and a service page. Click every button and link. Submit both forms.
3. Confirm the hero and the footer show the same license number, or that both lines are hidden.

Step 5 Required Publish and connect your domain

1. Check that Start Here is still marked Draft in the Pages panel, or delete it.
2. Use Publish (top right) to put the site live.
3. To use your own domain, add it under Site Settings → Domains. Custom domains need a paid Framer site plan; check Framer's current pricing.

↑ Back to contents

Troubleshooting and support

Things to avoid

• Don't delete component variants, such as “Phone”, “On Dark”, “Closed”, “Featured”, “Compact”, “Hero” or “Footer”. Pages rely on them for phone layouts and states.
• Don't detach text styles or color styles. Change their values instead.
• Don't delete CMS fields that pages display, such as Short Name, Number, FAQs, Order, Featured or Sample Content. Renaming a field is fine.
• Don't change a CMS item's slug after publishing; it changes the page address.
• Don't remove the Site layout from pages; it holds the header and footer.
• Don't delete the General FAQs or the Credential Line from the pages. To hide the credentials, use Show (Task 9).

Troubleshooting

Quick reference: where everything lives

Getting help

Email admin@riverandbranch.com, or reply to your delivery email. Please include your order reference (it's in your delivery email), the page you were working on, and what you expected to happen.

Support covers questions about using this template and fixes for genuine template defects. It doesn't cover custom design or development, copywriting, form integrations beyond Framer's native options, or third-party services. For problems with your Framer account, plan, billing or publishing, contact Framer.

↑ Back to contents