Preview a Webflow or WordPress staging site
See the live page at desktop, tablet and mobile size, and pin feedback anywhere on it.
Paste a staging address, such as your-site.webflow.io or a WordPress staging copy, and IdeaLine shows the real page. You can scroll it, click its links and pin feedback anywhere on it, from the header to the footer, at every device size.
Zoom in on each part
Device size. Desktop, Tablet or Mobile. Each pin remembers the size it was made at. Add a pin. Then click the spot that needs attention. See Add, link and resolve feedback pins. General note. Feedback about the whole page, with no spot. A pin on the page. It stays on its spot as the page scrolls. Select it to find it in the list. Pins above or below. Arrows at the edge count pins off screen. Select one to scroll to it. Status line. “Pins follow the page as you scroll” means pins can go anywhere. Use the live site directly. For pages behind a password or sign-in. See below. Filters. Open, Addressed or All. Pin actions. Mark addressed, link a task, show to clients or delete.
Add a staging site#
- Open Repository, choose Add a live source, then Staging site
- Paste the staging address
Addresses on webflow.io, WP Engine, Kinsta, Pantheon and similar hosts are recognized as staging sites. For any other address, tick Show this address as a live website preview.
- Choose Built with, add a category and choose Save
Pin anywhere, at any size#
- Choose Preview & pins on the card
- Choose Desktop, Tablet or Mobile
The page is drawn at that real width (1280, 834 or 390 pixels) and scaled to fit.
- Scroll to the part that needs attention
Scroll the preview itself. You can scroll in browse mode and in pin mode.
- Choose Add a pin and click the spot
Type the note and choose Save pin. Prefer the keyboard? See Place pins with a keyboard or screen reader.
Zoom in on each part
Mobile. The page as a phone shows it. Pins made at this size. Each pin shows on the size it was made at, so a mobile pin never lands on the wrong part of the desktop layout.
Links inside the preview#
Links to other pages on the same site open inside the preview, and pins follow the page they were made on. Links to other sites open in a new tab.
Pages behind a password or sign-in#
Webflow password protection, WordPress private pages and maintenance screens belong to the visitor’s own browser session. When IdeaLine sees one, it switches to the live site by itself and says why. Sign in inside the preview as usual. You can also tick Use the live site directly at any time.
In that mode pins stay on the first screen of the page, unless the site has the optional pin bridge line. With it, pins go anywhere on those pages too. See Set up live media sources: Canva, Adobe Express and the pin bridge.
IdeaLine opens staging pages in a locked frame. The page cannot see your IdeaLine account, and only the page itself passes through IdeaLine. Its images, styles and forms go straight to your site. See How live media handles your data.
Related articles
- Add, link and resolve feedback pinsPin what needs attention, tie it to a task, turn it into a subtask and mark it addressed.
- Place pins with a keyboard or screen readerMove a crosshair with the arrow keys and press Enter. Works for your team and for clients.
- Fix live preview and pin problemsWhat to do when a preview will not load, a pin looks out of place or a client cannot see a file.
- Set up live media sources: Canva, Adobe Express and the pin bridgeConnect your Canva account, check Adobe Express, and add the optional pin bridge to password-protected staging sites.
- How live media handles your dataWhat IdeaLine stores, what it asks each source for, and how previews are kept safe.
Still stuck on this one?