The Web Editor is the page that opens when you preview a staged version of a website (26.6): the site itself, running as it will live, with the tools to read it, mark it up, rewrite it, design it and lay it out, and an agent working beside you. Nothing on it is public, and nothing it changes reaches the live site until the version is deployed.
This chapter takes the Web Editor from the top of its page down: opening it, the header, annotations, Edit Copy, Design and its tools, saving, agents, recording, and the notices it gives.
There are three ways in:
A silver bar runs across the top, with the version beside its name (the bar still says Preview), and its controls in three groups:
The bar tucks itself away, so that the page opens as the site alone; move the pointer near the top edge and it comes back. Right-click the bar for Auto-retract, which turns this on and off. Messages appear in the bar, or at the foot of the page while the bar is away.
While you work, the site's own links and buttons still work, so you can walk the whole site from here. While Annotate, Edit Copy or Design is on, the mode takes the click: links do not follow and forms do not submit. Turning one mode on turns the others off.
Annotate turns the page into something you can mark. Rest the pointer on anything and it is outlined; click it, and a note opens beside it, naming the element and asking What should change here?
Press ESC again to leave Annotate. The count beside Save Annotations As... shows how many notes are waiting.
Tasks from notes. Save Annotations As... lists every note with its page and element, each ticked; untick what you do not want. Task makes a Task of the ticked notes; with an agent in the pane (27.7), Task for names the agent, and the Task appears on your Gridtop joined to it by a line and listed, unchecked, on its INSTR tab. Prompts saves the notes as Prompts instead. Gridtop confirms Saved as Task (or Prompts). From an agent's INSTR tab, Send to Agent... sends a Task into its chat as a green chip, carried with your next message.
Edit Copy changes text where it stands. With it on, click a heading, a line or a button, and it becomes editable in place, with Save and Cancel beside it; ENTER saves, ESC puts the text back. Select part of the text and a silver format bar appears above it: bold, italic, underline, strikethrough, superscript, subscript and links, and finer type settings such as weight and spacing, kept as named styles in the site's design rather than written into the page.
Each save goes into the staged version at once, and the Web Editor reports Saved in and the file's name. Edit Copy finds text wherever the site keeps it: in the page itself, in the site's settings (its name, tagline and contact details, which change everywhere they show), in a template's form texts, and in a template site's database, where it changes the one row that holds the text. A change to the database cannot be undone, and text kept in several rows is refused, with a pointer to the site's back office.
Design turns the page into a work surface, and opens a pane of tools at the right in Gridtop's own panel style.
Selecting. Rest the pointer on anything and the finest element beneath it is outlined, with its name on a small tab beneath the outline; click to select it, ESC to clear. Select the parent, on the right-click menu, widens the selection.
Moving and sizing. A selected element carries handles. Drag it to move it (the page's flow stays as it was), or a handle to resize it (SHIFT keeps its proportions); CTRL+drag a handle, or turn on Free Transform (E), to scale it with its text. Smart Guides show when an edge or centre lines up with another element (green), the page's centre (magenta), or an equal width or height, and the drag snaps to them (ALT: no snap). The arrow keys nudge one pixel, ten with SHIFT. Reset Position and Reset Size put an element back; Set Dimensions... sets its smallest and largest size in two steps. In a template's section rows, an item's side handles set its width in the row's twelve columns, and dragging it places it beside another item.
The right-click menu offers quick choices, saved at once: Color (its text, background, border or hover background, from the palette, Any colour..., or Theme default); Shape (radius, border, padding); Effects... and Image Effects; Structure (Move Up, Move Down, Duplicate, Delete, Go Inside); Create New; Motion graphics; Calculators; and at its foot Adjust in Appearance..., Select the parent and Clear this element's design.
Create New places something new after what you right-clicked (or before it, or inside it, from Place): Text, Image, Button..., Link..., a Section, a Layout, Video..., Map..., Web Page... or Embed, a divider or spacer, and form parts (Form, Text Field, Long Text, Email Field, Phone Field, Date, Drop-down, Checkbox, Send Button). Forms are drawn and marked here; their sending is set up on the Web Front's Forms tab (26.8). Motion graphics adds an Earth globe, a countdown, a counter, a ring, a drawn-in logo or a ticker; Calculators, on template sites only, adds a working calculator, from Loan Payment and Mortgage to Break-even and Margin and Markup.
Effects... opens one dialog for every effect on the selected element: the effects listed at the left, each with a tick (shadow, text shadow, glow, hover, picture, rim light, spotlight, and the light effects: gradient, gloss, glint, rays, star, flare, spot), the settings of the one chosen at the right. The page shows each change at once; Cancel puts it back, and OK saves it all as one step.
Pictures. A picture under the pointer shows a small icon at its top right, with Replace From This Computer..., Replace From A:/..., Crop..., Fit, Scale and the image effects; a file dropped on a picture replaces it. Crop shows the whole picture, see-through outside the frame: drag it to place it, drag a corner to size it, then OK (ENTER) or Cancel (ESC). A replaced or cropped picture is saved as a new file; the original stays on the drive.
Screens. The screen button in the header (Wide) shows the site at the width of a Laptop, Tablet or Phone, or any width you drag from the edge beside the page. While the page is narrowed, Design's edits are kept for that size only (tablets, or phones), unless Edits While Narrowed ▸ Every Screen is chosen; a dot on the button says so. Device Aspects... sets the screens the site is made for, larger touch targets for buttons and menu links on touch screens, and whether hover looks show on a tap.
The pane's tools, each with a Live Preview box and an Apply:
Page Value and Page Color. Right-click a knob for Page Value and Color Override. Use Page Value puts the knob back to what the page itself has, and Use Page Color takes the element's colour from the page again. Change Global Value and Change Global Color reach past the one element to the site-wide setting: every corner on the site, a palette colour wherever it is used, or every element of the same kind. The page moves live as you drag; ENTER or a click elsewhere saves, ESC puts it back.
Only what you changed is written.
The Web Editor saves deliberately. Save (CTRL+S) writes a .vsn file, the version's editable files gathered into one save, wherever you choose in the drive picker; Save As... (CTRL+SHIFT+S) names it; Open... (CTRL+O) reads one back. The Save button shows a dot while there are changes since the last save, and hovering it names where that save is.
Behind your saves, restore points are kept as you work: after about every twenty changes, and before every Open or Restore. Restore, on the Save menu, lists them, newest first; opening the Web Editor with unsaved changes offers them in a small Unsaved changes box at the corner of the page.
Undo and Redo follow one timeline (CTRL+Z, CTRL+Y). Changes not yet applied in a tool's pane come first, newest first; then the changes saved to the drive (yours, and an agent's) in the order they landed. Each Undo takes whatever came last, whichever tool or hand it came from, and plays on the page. Opening a save and restoring a point are themselves one step.
Add Agent opens a picker of the agents on your Gridtop. Choose one, and its own descriptor panel, chat docked, moves into the Web Editor's right pane, exactly as it stands on the grid: its conversation, chips and everything it can do. The × in its header takes it out again. The pane remembers the agents you chose for this site, in this browser.
An agent in the pane is told which site and version it is working on, and which page and element you have selected, so change this heading needs no explaining. It works with its own tools and permissions, and by default at a fast effort (13.7):
preview_inspect, 47.5), so that its changes match what you see.REC, at the right of the header, records the Web Editor itself. Its menu:
Recordings and videos keep themselves as they go, as (unfinished) files in the site's Recordings folder, so a crash loses nothing; Stop finishes them under their proper names, a video with its length written in so that players can seek.
PHP error: file, line, at the corner of the page, means a staged page could not be shown: it does not parse, and would show nothing at all on the live site. Resting the pointer on the notice shows the parser's words; fix the file (in the Editor, or by an agent), and the page shows again. A page that comes back blank for any other reason says Blank page.
Staged files changed on the drive, by an agent or by you in the Editor, are picked up when the page loads, and while an agent works.