Selecting blocks

“Make this button blue” is much clearer to PageFork than “make the button in the hero section that’s below the headline blue”. The Select mode on the preview lets you point.

Select vs Interact

The toolbar has a Select / Interact toggle that changes what clicking the preview does:

• Select (default) — clicking an element highlights it and inserts a block reference into the composer. Links are disabled.
• Interact — clicking behaves exactly like using the real site: links navigate, forms submit, hover states fire.

Use Select when editing. Use Interact to test the actual behaviour of your site.

How a block reference works

When you click an element in Select mode, a chip appears in the composer with a label like hero-headline or .pricing-card. That chip is a reference to that exact element. You can:

• Keep typing before or after the chip.
• Insert multiple chips to reference multiple elements.
• Delete a chip by clicking it.

Typical prompts with a block reference:

• “Change [chip] to Launch faster with PageFork and centre it.”
• “Make [chip] into a gradient pill button.”
• “Remove [chip].”
• “Move [chip] above [chip2].”

PageFork opens the exact block, no guessing about which element you meant.

Nested elements

If you click near a large area (like a full card), PageFork picks the smallest meaningful container. If the selection is wrong, click again on a more specific child element — the chip updates.

When Select doesn’t work

• Inside iframes: PageFork can’t select across an embedded iframe (e.g. a YouTube embed). Describe the surrounding section instead.
• On mobile: Select still works, but small tap targets can be fiddly. Switch to the Tablet or Desktop preview to click precisely, then switch back. See Preview devices.

Next

• The editor interface
• Editing with AI