Edit what's on a screen
Change text and images on an HTML screen, hide or blur private details, and add actions such as clicks and count-ups that play with your steps.
A captured screen rarely looks exactly the way you'd want a buyer to see it. There's a real customer's name in the corner, last quarter's dates, a number that undersells the product. On an HTML screen you can fix all of that in the builder, without recapturing, and make the screen move while the tour plays.
You're in the right place when you want to change, hide or animate part of a captured screen.
Which screens can you edit?
Element editing works on HTML screens only. They keep the page's real elements, so every heading, button and cell can be selected and changed.
| Screen type | What you can do |
|---|---|
| HTML | Everything on this page: text and image edits, hide, blur and remove, actions, and the AI tools. |
| Image | Add steps by drawing a box, and add camera moves. The picture itself can't be edited. |
| Video | Add steps at a time on the timeline, and add camera moves. The footage can't be edited. See Video screens. |
| Chapter slide | Edit the slide's words and design in the slide panel. See Chapter slides. |
Clicking an image or video screen doesn't select anything. To edit what's on those screens, capture them again as HTML with the extension. See Capture with the extension.
How do you select an element?
Hover the canvas: the element under the pointer gets an outline. Click it to select it. Two things open:
- A small toolbar floats next to the element.
- The right panel shows the Element card, a Text or Image form, and AI Edit.
If a step form is open, the right panel asks you to "Finish or cancel the current step first." Close the step, then click again.
The floating toolbar
| Button | What it does |
|---|---|
| Bold, Underline, Italic | Formats the text. Shown on text elements only. |
| Hide element | Hides the element and keeps its space. |
| Blur element | Blurs the element so it can't be read. |
| Guide | Starts a guide step attached to this element. |
| Link | Starts a link step attached to this element. |
| Close | Deselects the element. |
The Element card
The card's heading shows Element and the element's tag, such as div or button. An animated tag means typing is set on it with Animated text.
| Control | What it does |
|---|---|
| ↑ (Select parent element) | Selects the element that contains this one. Use it when you clicked a label but meant the whole row. |
| ↓ (Select first child element) | Selects the first element inside this one. Use it to reach the text or image inside a box. |
| Hide | Hides the element and leaves an empty space where it was. The button then reads Hidden. |
| Blur | Blurs the element in place. The button then reads Blurred. |
| Remove | Takes the element out and closes the gap, as if it was never captured. The button then reads Removed. |
| Reset to original | Shown once the element has edits. Puts it back exactly as captured. |
Select Hidden, Blurred or Removed again to turn it off.
Under the toggles are four action buttons: Click, Scroll to, Spotlight and Count up. See How do you make the screen move?
How do you change text?
Select a text element. The Text form opens under the Element card.
| Setting | What it does |
|---|---|
| Content | The element's words. Changes show on the canvas as you type. |
| HTML | The small switch beside Content. Shows the element's HTML so you can edit markup, such as adding a line break or a link. Changes apply when you click away. |
| Formatting | B, I and U, plus align left, center and right. Select the active alignment again to clear it. |
| Font size | Any CSS size, such as 16px. Applies when you press Enter or click away. |
| Color | The text color. Pick from the swatch or type a hex value such as #1A2B3C. Clear the box to go back to the captured color. |
| Background | The element's background color, set the same way. |
Boxes that hold other elements, such as a card or a table row, have no Text form. Select ↓ to reach the text inside, or use AI Edit on the whole box.
How do you change an image?
Select an image. The Image form opens under the Element card.
| Setting | What it does |
|---|---|
| Image | Upload a file from your computer, or pick one with Library from the images in your content library. Library only shows when the library has images. |
| Image URL | Paste a link to an image instead. |
| Alt text | A short description of the image for screen readers. |
How do you hide private details?
Customer names, emails and account numbers often end up in captures. Cover them before you publish.
Select the element
Click the name, email or number on the canvas. Use ↑ to widen the selection when the detail spans several pieces, such as a whole table cell.
Choose how to cover it
| Choice | Result | Best for |
|---|---|---|
| Blur | The element stays where it is, unreadable. | Names and numbers where the viewer should see that something is there. |
| Hide | The element disappears and leaves a gap. | Details you'd rather not show at all, without shifting the layout. |
| Remove | The element disappears and the layout closes up. | Whole rows or banners that shouldn't be part of the story. |
Sweep the rest of the tour
Doing this one element at a time is slow on a busy screen. Two AI tools cover more ground: Anonymize in AI Edit swaps real names and details for believable fakes on the selected element, and Blur PII in Ask AI finds personal details such as names and emails across the screen and blurs them, leaving company names alone. See AI tools.
Your edits only change this tour's copy of the screen. The capture in your library, and other tours built from it, stay as captured.
How do you make the screen move?
Actions make the product do something while a step shows: press a button, scroll to a section, spotlight a panel, or count a number up from zero. The viewer sees the product in motion instead of a still.
| Action | What the viewer sees |
|---|---|
| Click | A visible press on the element, with a ripple. It doesn't follow the link or change the page. |
| Scroll to | The screen scrolls until the element is in view. |
| Spotlight | Everything around the element dims for a moment, so it stands out. |
| Count up | The element's number counts up from zero to its real value, keeping symbols such as $ or %. Only works on a piece of text that holds a number. |
Count up is greyed out when the selected element isn't a single piece of text with a number in it. Select ↓ until you reach the number itself.
Add the action
Select the element, then select Click, Scroll to, Spotlight or Count up on the Element card. The action plays once on the canvas, and its row appears in the storyboard under the screen.
Place it
In the storyboard, the action row sits among the screen's steps. Drag the row to choose when it plays: above every step, it plays as the screen opens; under a step, it plays with that step. New actions start with step 1.
Time it
Select the action row to open its panel, then set the timing.
The action panel
The panel's heading names the action, such as Count action or Spotlight action, with a preview of the element's text under it.
| Setting | What it does |
|---|---|
| When | Shows On screen enter or With step N. Change it by dragging the row in the storyboard. |
| Delay before it starts (seconds) | How long to wait after the screen opens or the step shows. The row shows it as "+2s". |
| Duration (seconds) | How long a Spotlight or Count up lasts. Count up starts at 1.5 seconds and Spotlight at 2. |
| Delete action | Removes the action. |
Hover an action row in the storyboard to watch it play on the canvas without opening it.
A Type row is typing set up with Animated text in AI Edit. Its words and speed live with the element, so change them there. See AI tools.
How do you undo an element edit?
Press ⌘Z (Ctrl+Z on Windows) to undo the last element edit on the current screen, and ⇧⌘Z or Ctrl+Y to redo it. Each screen keeps its own history. To go all the way back on one element, select it and choose Reset to original.
Actions aren't part of undo. Remove one with Delete action.
Test it
Your screen edits work when:
- You select Preview and the screen shows your new text and images.
- Nothing you hid, blurred or removed can be read.
- Each action plays at the moment you placed it, with the delay you set.
- You open the tour's share link after publishing and see the same thing.
Troubleshooting
| Issue | What to check |
|---|---|
| Clicking the screen selects nothing | Element editing works on HTML screens only. Other screen types can't be edited this way. |
| There's no Text form | You've selected a box that holds other elements. Select ↓ to reach the text. |
| Count up is greyed out | Select the text that holds the number itself, not the box around it. |
| An edit disappeared after Replace capture | Replacing a capture clears element edits made on the old one. Make them again on the new capture. |
| Library isn't shown in the Image form | Your content library has no images yet. Use Upload or Image URL. |
| An edit won't undo | Undo doesn't work while your cursor is in a text box. Click the canvas first. |
FAQ
Do my edits change the capture in the library?
No. They apply to this tour only. Other tours using the same capture keep the original.
Can I blur part of an image screen?
Not in the builder. Image screens are pictures. Recapture the screen as HTML, or replace it with a clean capture using Replace capture.
What's the difference between Hide and Remove?
Hide keeps the element's space, so nothing else moves. Remove closes the gap, so the elements around it shift up or across.
Does a Click action open the link it presses?
No. It shows the press only, so the tour stays on the screen you captured. Use a Link step to move somewhere.
Can I change text across every screen at once?
Yes. Use Find & replace, from the AI Edit card. See AI tools.