SkyScribe Sites
The design wizard
The wizard is where you decide what your site looks like. It has two steps and a live preview, and it produces a Design Config — the saved record of your choices that SkyScribe uses to render the site.
You can open the wizard and play with it without signing in. Signing in is only needed to save a design, and an active subscription only to use it for a real site.
Step 1 — Choose a starter template
Pick one of the starter templates — Classical, Contemporary, Futurist, or Midnight Library. Each is just a starting point: every colour, font, border, shadow, and layout choice is editable in the next step, and each template uses a few of those to show what's possible.
Step 2 — Customise
The customise step is a form on the left and a live preview on the right. The preview has a tab for each page type — Home, Category, and Document — plus All, which shows the three side by side.
Desktop and Mobile
The switch above the preview, between the tabs and Preview Content, shows your design on a Desktop screen (monitor icon) or a Mobile one (phone icon). It starts on Desktop each time you open the wizard.
- Mobile shows the page on a phone-sized screen, the way readers see your live site on their phones. In All, the three pages sit side by side as three phones.
- Desktop always shows the desktop layout. If your screen is narrow enough that the preview pane is smaller than a desktop layout, the preview shrinks slightly to fit rather than squeezing the layout.
How your site looks on phones
Every design gets its phone layout automatically; there's nothing extra to set up. On a phone:
- Lists of Documents put each image above its title and summary, one Document per row.
- Document pages become a single column, with slightly smaller headings.
- Footer columns stack one above another, and empty columns are left out.
- A static side menu becomes a menu button, like a collapsable one; the floating menu button gets a little smaller.
- A word too long to fit on one line in a heading wraps onto the next line rather than running off the screen. If a very large heading size breaks words where you'd rather it didn't, try a smaller size in Typography and check it with Mobile.
On tablets held upright, a static side menu also becomes a menu button, and Document pages become a single column.
Not sure what a setting changes? Many have a flashlight button beside them. Click it and the preview darkens everything except the part of the page that setting affects, switching to the right tab and scrolling to it if it isn't already in view. Click the button again, click the darkened preview, or press Escape to turn it off. The button is greyed out when that part isn't on the page at all — the footer when its size is None, say.
The form is grouped into sections:
| Section | What you set |
|---|---|
| Layout | The Home layout (Splash Image/Video or Categories), the Category and Document layouts (Full, Compact, or Minimal), and whether Documents show their tags |
| Splash Media | Whether the Splash home layout's hero is an image (your Publication's own Splash Image — SkyScribe hosts it) or a video (a link to a file you host elsewhere — SkyScribe doesn't host video), and the Heading Text over it: its position, colour and text shadow. No effect on the Categories home layout — the tab is greyed out and unclickable whenever Layout's Home Layout is set to Categories, since there's nothing here for it to affect |
| Colours | Background and content colours for the header, body and footer, and for interactive elements (the call-to-action button and tag pills). The header, body and footer backgrounds can be a solid colour or a gradient — see below |
| Typography | Google Font family, weight, size, and bold/italic for the heading, sub-heading, and body roles independently. Each role also has a Customise panel for an override colour, and — for headings and sub-headings — a text shadow |
| Header | Header size, logo image, call-to-action button, a shadow and bottom border, and whether the header stays visible as the page scrolls — see below |
| Body | The details container (the author and Document details card): its colours, shadow, border and corner radius |
| Nav Menu | Whether there's a side menu, static or collapsable; where the collapsable menu's button sits; the menu's colours (the background can be a gradient), shadow and right border; and the button's own colours |
| Footer | Footer size, its own navigation menu, a shadow and top border, and a Customise Footer panel for the column layout — see below |
Sizes: px in the form, scale-friendly on your live site
Every size you set here — border widths, the details container's corner radius, shadow offsets and blur, heading/body font sizes — is a plain pixel number, and the preview on the right shows it at that exact size.
Your live site converts these to a unit that scales together with the page on very large screens (a big monitor or TV used as a display), so borders, shadows and text all stay in visual proportion with everything else instead of looking comparatively thin or small. In the vast majority of cases — a normal laptop, desktop, or phone screen — nothing changes: what you see in the preview is exactly what a visitor sees (on a phone, compare with the preview's Mobile view). Only on a genuinely huge screen can a border, shadow, or heading render a little larger on the live site than what you saw while designing — that's the scaling working as intended, not a bug.
Gradient backgrounds
The header, body, side menu and footer backgrounds can each be a solid colour or a gradient. Every other colour control (text colours, the details container, interactive elements) stays a single solid colour.
Each of those four background pickers has a Solid / Linear / Radial dropdown:
- Solid — a single colour, exactly as before.
- Linear — a straight colour fade. A dial sets the direction, with a degree box beside it for an exact angle.
- Radial — a colour fade radiating out from a point. Choose a circle or ellipse shape and where its centre sits on the 3×3 grid.
For Linear and Radial you get a gradient bar with colour stops. Drag a stop along the bar to move it, click an empty part of the bar to add one, and drag a stop off the bar to remove it (2–5 stops). Click a stop to set its colour — transparency is allowed, so you can fade a colour out to nothing.
Switching a picker from Solid to a gradient starts you off with a two-stop gradient based on your current colour; switching back to Solid keeps the first stop's colour.
Borders
The header (bottom edge), footer (top edge), side menu (right edge), and the details container (all four sides, plus its corner roundness) can each have a thin border. A width of 0 means no border — drag the slider up and a colour swatch appears next to it to pick the line's colour.
Sticky header
Under Header behaviour, Keep the header visible when the page scrolls is on by default — the header (and, if your navigation menu button lives in it, that button) stays pinned to the top as the reader scrolls.
Turn it off for a header that scrolls away with the page. If your navigation menu button is set to Header, it then stays pinned to the top-left corner on its own, so the menu is always reachable.
Navigation menu button colours
When the navigation menu is collapsable, its toggle button normally matches the header colours. Tick Customise the menu button colours (in the Body section) to give the button its own background — solid or a gradient — and icon colour.
Footer size and layout
The Footer section sets the footer's size: None, Flex, Small, Medium, or Large. Flex (the default for a new design) sizes the footer to its own content, up to a limit; the fixed sizes give it a set height regardless of what it holds.
Customise Footer opens a panel with a live preview where you set how many columns the footer has (2–5) and the divider drawn between them (its width and colour). Lowering the column count keeps the hidden columns' content for if you raise it again.
Each column also has an alignment control (left / centre / right) and a + Add Item button. Adding an item lets you choose:
- Link — a label and a URL.
- Text — a line or paragraph of text (line breaks are kept).
- Image — an image from the image picker (your Image Library with PRO, or a pasted image URL), with an optional link and alt text.
- Divider — a plain horizontal rule, added straight away with no fields to fill in.
Added items show in the preview with Edit and delete controls (except Divider, which has nothing to edit); edits and deletions are undone if you close the modal with Cancel rather than Apply.
Every item — including your site's navigation menu (when the footer navigation menu is turned on) and the permanent RSS / sitemap / SkyScribe row — can be dragged, using the handle in its control strip, to reorder it within a column or move it to another column. The navigation menu and the meta-links row can be moved but not edited or deleted: turn the navigation menu off from its own setting rather than deleting the item, and the meta-links row is always present somewhere in the footer.
The button is disabled when the footer size is None.
Saving
Save stores the current design as a Design Config. The first time, you give it a name (e.g. "Autumn blog redesign"); after that, Save updates the same config. Saving requires a Bluesky sign-in.
Saving shows a short checklist while it works — generating and saving your design, then capturing and storing preview screenshots of your Home, Category, and Document pages. Your design is saved as soon as the "Saving Design" step completes; the screenshot steps that follow are just for the thumbnail shown on the Site Designs page, and don't affect whether your save succeeded. If a screenshot step fails, you can retry it from the checklist, or just click Done — a design without a thumbnail yet still shows a placeholder there, and gets one the next time you save.
Until you save, your work is kept as a local draft in your browser (one at a time — starting a new design replaces whatever draft was there). Once a design is saved it's no longer the draft, and opening a saved design from Site Designs never touches your draft, so changes to a saved design are kept only when you Save them. If you try to leave the wizard with unsaved changes to a saved design, you're asked whether to Stay or Discard & Leave (closing or reloading the tab shows your browser's own warning instead). Moving between the wizard's steps doesn't ask. Where you see the draft depends on whether you're signed in:
- Not signed in: it shows as a Work In Progress card at the top of the starter-template step — pick it to carry on, or use the trash button on it (and confirm) to discard the draft and start fresh from a template.
- Signed in: it shows on the Site Designs page instead (in the side menu), labelled Unsaved, alongside anything you've already saved. Picking + New Design while an unsaved draft is sitting there asks you to confirm first, since starting a new one would otherwise replace it.
Your saved designs are listed on the Site Designs page, each marked Saved and either Live (connected to a site) or Not Live. The panel alongside the list shows every design's Home, Category, and Document screenshots together — move your pointer across one to preview all three; where you're pointing decides which one comes to the front. Hovering either a design's row or its screenshots highlights both together, since they're the same design. Click Edit on a row to open it back up in the wizard, and you can have several designs — one per site, or several drafts of the same site. A FREE account can save up to 3 designs at once; PRO removes that limit — see Subscribing.
Note
A handful of your most recently updated designs also show on the Dashboard, each cycling through its own Home, Category, and Document screenshots automatically.
To discard a design you no longer want, use the trash button on its row and confirm. A design that's connected to a site can't be deleted — disconnect it from the Site Slot first, and the trash button explains this when you hover it.
Note
A saved Design Config isn't a live site yet. To use it, you connect it to a Publication on a Site Slot — see Launching & managing a site.
Next
Subscribing — what a subscription includes and how to get one.