Site Preview

Usage

Site Preview embeds an external website in a window-style iframe on your page. Visitors can browse a scaled-down live preview and switch between Desktop, Tablet, and Mobile frame sizes before clicking through.

Use it on portfolio pages, case studies, or landing pages where you want to showcase another site without sending users away immediately.

Preview frame

The block loads the URL you provide in an iframe, scaled to fit the preview area. On the front end, device icons above the frame switch the preview dimensions:

• Desktop — full-width frame (about 60vh tall)
• Tablet — iPad-proportioned frame
• Mobile — iPhone-proportioned frame

The iframe content is zoomed out so more of the page is visible at once.

Settings

• URL — address of the site to embed (required for the preview to load)
• Title — accessibility label for the iframe (not shown on the page)
• Shadow — drop shadow around the preview frame (on by default)
• Hide Toggles — remove the desktop/tablet/mobile icon row
• Hide Button — remove the Visit link below the preview

Visit button

When visible, the Visit button opens the URL in a new tab. Hide it when the iframe preview alone is enough, or when you provide your own link elsewhere on the page.

Block width

Site Preview supports Wide and Full alignment from the block toolbar.

Tips

• Many sites block iframe embedding via security headers — if the preview is blank, the target site may not allow it.
• Use Hide Toggles for a clean portfolio embed; keep toggles visible when responsive behavior is part of the showcase.
• Pair Site Preview with a Hero or Section intro that explains the project before the live preview.
• Set an descriptive Title for screen readers even though it is not displayed visually.