How can I preview draft blogs in Webflow and see the same styling that will be displayed on the client's website once published?
- Use Webflow Designer to preview a draft CMS blog post by opening it from the CMS panel and clicking "Preview" for a styled layout view.
- For custom layouts, filter a Collection List on a static page to show the draft, or publish it to staging only for full-page testing without going live.
To preview draft blog posts in Webflow with the final styling as it will appear on the client's live site, you need to use Webflow's Designer mode and access the CMS item preview. Draft items won't show on the staging or live site until published, but they can be previewed internally.
1. Open the CMS Collection in Designer
- Go to the Webflow Designer, not the Editor.
- Click the CMS panel (stack icon on the left sidebar).
- Choose the Collection that contains your blog posts.
2. Open a Draft CMS Item
- Locate the blog post you want to preview — even if it's marked as a Draft, you can click to open it.
- At the top, you’ll see options like Save, Draft, Archive, etc. Don't publish yet.
3. Use "Preview" in the CMS Item
- In the CMS item window, click “Preview”.
- Webflow opens a preview modal to show how the content will look within the page layout where the Collection page is connected—this uses live site styles.
4. Adjust the Binding Page if Needed
- If nothing appears in the preview, ensure your Collection Page template is connected to the CMS correctly.
- Go to Pages > CMS Collection Pages, choose your blog Collection Page, and make sure the elements (heading, rich text, etc.) are bound to the correct fields.
5. Preview on a Specific Page
If you're using a static page to display blog content via a Collection List, the default item preview may not reflect that design.
- Build a test page or use an existing static page.
- Insert a Collection List, filter it to show only a specific item (e.g., by slug or name), and manually switch the filter to the draft item's content.
- Use preview mode (eye icon) in the Designer to view styling as it would appear live.
6. Use Staging for Published-Only Elements
Remember: draft items never appear on the staging or live site. If you absolutely need to preview on an actual URL, mark the item as “Ready to publish” but exclude it from the live publish:
- Set the post to Published.
- On Publish, choose to “Publish to Staging” only, not the live domain.
- View the post using the staging URL (yourproject.webflow.io).
This lets you test layout, SEO tags, and site integrations before full publishing.
Summary
To preview draft blog posts with full client-facing styling, use the Designer’s CMS item preview, or filter a Collection List on a static page to display the draft content. For full-page testing, publish to the staging site only, not the live domain.