Instructions · Webray Studio

Instructions.

Everything you need to make Tally yours. Most edits take a few minutes and need no code.

Work through the steps in order the first time, then come back to any section later.

01 — Your details

Start here

Name and intro

Select the large name in the hero and type your own. Edit the intro line and the two buttons below it. The header logo is the TallyLogo component: change its size, colors and alt text in its properties, or swap it for your own logo. Update the footer email, phone number and agency details.

Site settings

Open Site Settings and update the title, description, social preview image and favicon. The 404 page has its own title and description under Page settings.

02 — Demos and audio

DemoPlayer component

Swap the demo files

Select a demo card's player and upload your MP3 in the Audio file field. Set the File name and Size text, and update the card's title, duration and transcript. Use the file length rounded down for the duration, for example 00:25 for a 25.9 second file.

The hero script

Select the script card in the hero. Edit the slug, take, script and note. Wrap words in double brackets, like [[these]], to highlight them. Upload a short clip in its Audio file field.

One player at a time

Starting any player pauses the others automatically. Nothing to set up.

03 — Photos and colors

Assets and styles

Photos

Select the hero portrait or the studio photo and replace the image in its Fill. Add alt text in the same panel. Keep the hero roughly 4:5 and the studio photo roughly 1:1.

Colors

Every color lives in the Tally color styles. Change a style once and the whole site follows. Dark mode values live at the top of ThemeToggle.tsx in DARK_MAP, keyed by each style's light value.

Type

Text styles control every font size. The page titles on Licenses, Instructions and 404 use the FluidHeading component, which scales between its Phone size and Desktop size.

04 — Motion and theme

TallyMotion and ThemeToggle

Appear effects and hover states

The TallyMotion component on the home page runs the section reveals, the hero intro, the smooth section links and the hover states. Select it to turn any of these off. Motion is skipped for visitors who prefer reduced motion.

Light and dark

The site opens in light mode. The sun and moon toggle switches themes and remembers the choice. Keep a ThemeToggle on every page so the visitor's choice carries over.

404 page

The animated microphone is the OffAirMic component. Change its tape text and colors in its properties, or turn animation off.

05 — Booking form

BookingForm component

Where messages go

Select the booking form and paste a form endpoint URL into Send to. Formspree, Basin, Make and Zapier webhooks all work. Leave it empty and the form opens the visitor's email app, addressed to the Email field.

Text and fields

Change the button label, success message and footnote in the component properties. Project types and usage options are listed at the top of BookingForm.tsx. Send a test request from the published site.

06 — Before you publish

Checklist

Replace placeholders

Swap every demo file, photo, client name, testimonial and contact detail for your own. Remove anything you don't have permission to use.

Check every breakpoint

Preview desktop, tablet and phone. Click every nav link and button, and play every demo.

Need help?

Contact Webray Studio through the template's Framer Marketplace page and include a link to your site.

Home

Licenses

Instructions