Placeholder Image
Show a custom image while an embedded iFrame loads in Elementor and Gutenberg using the Custom iFrame WordPress plugin.
Overview
Custom iFrame Placeholder Image displays a custom image in the iFrame area while the embed loads. Instead of a blank white box, visitors see a meaningful preview image that sets expectations for the content below.
Custom iFrame is a WordPress plugin by CoderzStudio that embeds 100+ external sources in Elementor and Gutenberg without writing any code.
Placeholder Image is a free feature. No Pro plan required.
Requirements
- Custom iFrame plugin installed and active
- WordPress with Elementor or the Gutenberg block editor
- An image uploaded to your WordPress media library
When to Use a Placeholder Image
Use a placeholder image whenever an embed takes more than a second to load:
- Lazy-loaded embeds: The placeholder fills the space until the visitor scrolls to trigger the load
- Large pages with multiple embeds: Reduces the visual impact of loading states
- Video embeds: Use a thumbnail to set context before the player loads
- Maps: Use a static map screenshot to fill the space before the interactive map loads
The best placeholder image is a screenshot of the embedded content itself. Visitors see what to expect and the transition to the live embed feels natural.
How to Set a Placeholder Image
In Elementor
Open your page in Elementor
Go to the page with the Custom iFrame widget. Click Edit with Elementor.
Enable Lazy Load
In the Content tab, set Lazy Load to Yes. The placeholder image upload area appears below the toggle.
Upload the placeholder image
Click the image upload area. Select an image from your media library or upload a new one. The image fills the iFrame area while the embed loads.
Publish
Click Update or Publish. The placeholder shows on the live page until the embed loads.
In Gutenberg
Open your page in the block editor
Go to the page with the Custom iFrame block. Click Edit.
Enable Smart Load
In the block settings panel, turn on Smart Load. The placeholder image upload area appears.
Upload the placeholder image
Click the image upload area. Select an image from your media library or upload a new one.
Publish
Click Update or Publish. The placeholder image is now live.
The placeholder image now shows in the iFrame area until the embedded content finishes loading.
Best Practices
- Match the dimensions: Use an image with a similar aspect ratio to the embed. A 16:9 image works well for video players.
- Use a screenshot: Take a screenshot of the embedded content and upload it. Visitors see a realistic preview.
- Keep it light: Use a compressed WebP or JPEG. The placeholder should load fast.
- Avoid text-heavy images: Text in a placeholder image may confuse visitors who mistake it for live content.
FAQ
Yes. The placeholder image field appears after enabling Lazy Load (Elementor) or Smart Load (Gutenberg). Enable the lazy load toggle first to reveal the image upload area.
WebP gives the smallest file size with good quality. JPEG works well as an alternative. Avoid PNG for photographs as the file size is larger without visible quality gains.
The iFrame itself loads in the Elementor editor, so the placeholder typically does not show in the editor preview. It appears on the live published page while the embed is loading.
Yes. Upload the image once to your media library. Select it for each Custom iFrame widget or block where you want to use it as a placeholder.
Related Guides
Last updated 1 day ago
Built with Documentation.AI