The Workshop · guide
How to use the Workshop
From starting a site to publishing it, in the order you will need each part, with the names of the buttons you will press.
Getting started
Open the Workshop
The Workshop is part of the Lounge, your Quooro workspace. Its first screen lists your sites, with tabs for the template marketplace, your own templates and form submissions.
Start a site
New site starts blank: give it a name and, if you like, a description. In the template marketplace, preview a template and choose Use template. Build from a brief writes a site from a sentence about the business, and Import a site brings in one you already have.
Find your way around the editor
Tools run down the left: Add elements, Sections, Navigator, Pages, Media, Brand and the rest. The page sits in the middle. The panel on the right has Style, Settings and Interactions for whatever is selected. Preview, Export and Publish are at the top right, and ⌘K finds anything.
Building pages
Swap a section
Click any section. The Sections panel lists every other style for that part of the page, drawn in your brand and written in your words. Click one and it takes the old one’s place in a single undo step; [ and ] step through the styles.
Add a section
With a section selected, Add below puts the new one after it. With nothing selected it goes above the footer, and the page scrolls to it.
Edit the words
Double-click a heading or paragraph to type over it. The bar underneath has bold, italic, link and clear, and ⌘B, ⌘I and ⌘K do the same. Pasted text arrives as plain words.
Add your photos
The Media tab holds everything you upload, newest first. Click a photo to place it after the selection, or to replace the selected image; drag it onto the page; or drop files from your computer straight onto the page. Each one asks for alt text, and a file over 10 MB, or one that is not an image, is refused.
Manage pages
The Pages panel adds, renames, duplicates and deletes pages. Renaming changes the name only; Change address moves the page and updates the links to it. Set as homepage chooses the front page.
Share the header and footer
Select the navigation, open Settings and turn on Use this header on every page; a footer has the same switch. Saving copies it to every other page, and new pages start with it.
Brand and style
Set the brand
The Brand panel holds the site’s seven colours, its heading and body typefaces, type scale, corner radius, content width and spacing. Start from a preset for your kind of business, then adjust it. Sections take everything from the brand, so a change reaches every page.
Style one element
The Style tab sets the selected element’s layout, spacing, typography and background, at the width you are viewing.
Add effects
The Effects panel adds transforms, filters, opacity, a blur behind the element, blend mode, cursor and overflow.
Animate
The Interactions tab sets how the selected element animates and when it starts.
Phones and tablets
Switch widths
The Desktop, Tablet and Phone buttons at the top of the editor show the page 1280, 768 and 375 pixels wide.
What happens on its own
Tablet and phone layouts are worked out from the desktop design. Grids of three or more columns become two on a tablet and one on a phone, rows wrap, large type and padding scale down, and fixed widths stop at the edge of the screen. The canvas uses the same rules as the published site.
Change one width
Change a style while viewing Tablet or Phone and it applies at that width only. Your values always win over the automatic ones.
Build from a brief
Write the brief
Choose Build from a brief on the Workshop’s first screen. Say the trade, the business name and the town, then anything else you want the words to use: services, towns covered, emergency call-outs, years trading, a guarantee, accreditations, a colour, or a feel such as dark or friendly. Add “and a dashboard” for admin screens as well.
Check what it read
The left column shows what was taken from the brief and what was not found. The site is written by fixed rules, so the same brief always builds the same site, and anything missing stays a [bracketed] gap rather than an invented fact.
Change it before it is created
Hover a section in the preview and choose Try another. Click any words to retype them. New layout redoes the open page only. Shuffle tries a new arrangement and New words rewrites the text; both ask first if you have made changes.
Quality checks
Every build is checked before it is shown: each section as it is chosen, the whole site once it is built, and every page at phone and desktop width. The quality panel lists each check and anything that was redone.
Create the site
Give it a name and choose Create site, or Save as template to keep the build for later.
Saving, publishing and export
Saving and undo
Changes save as you work. Undo (⌘Z) steps back one action at a time, so a whole drag is one step.
Versions
Versions keeps a copy of each page after saving, at most every five minutes, and before anything that rewrites pages. Save this version gives one a name. Restoring keeps a copy first, so a restore can be undone.
Preview
Preview opens the whole site, every page built by the same compiler that publishes it.
Publish
Publish compiles every page and puts the site live. Each publish is kept as a numbered version, and rolling back puts an earlier version’s files live again.
Export
Export downloads a zip: every page, styles.css, script.js, a README, and a CLAUDE.md that lists the brand, every section and everything still to replace. Open the folder in Claude Code and say “Read CLAUDE.md and finish this site.”
Form submissions
Forms on a published site are stored, and each entry appears under Form submissions on the Workshop’s first screen.
The Workshop is part of the Lounge
It is a subscription in the Lounge, the workspace that comes with a Quooro account.