Custom Watermark on iFrame in Elementor

Step-by-step guide to add a text or image watermark to an embedded iFrame in Elementor using the Custom iFrame Pro WordPress plugin.

Overview

Custom iFrame lets you add a watermark to any embedded iFrame in Elementor. Display a text label or logo overlay on top of your embed for branding, white-label demos, or content protection.

Custom iFrame is a WordPress plugin by CoderzStudio that embeds 100+ external sources in Elementor and Gutenberg without writing any code.

This is a Pro feature. It requires Custom iFrame Pro (Starter, Studio, or Agency plan). View pricing — plans start at $29 one-time.

Requirements

Custom iFrame Free plugin installed and active
Custom iFrame Pro plugin installed and active
Elementor installed
An external URL or content to embed

Install Custom iFrame Free and Pro

Install and activate both the Custom iFrame Free and Custom iFrame Pro plugins from your WordPress dashboard.

Open your page in Elementor

Go to the page where you want the watermarked embed. Click Edit with Elementor.

Drag the Custom iFrame widget onto the page

Search for Custom iFrame in the widget panel. Drag the widget onto the page.

Paste your content URL

In the Source field, paste the URL of the external content you want to embed. The iframe loads in the editor.

Step 2: Enable the Watermark

Open the Content tab

Select the Custom iFrame widget. Go to the Content tab.

Enable the watermark

Scroll down to Watermark. Toggle Enable Watermark to Yes. More options appear.

Step 3: Choose the Watermark Type

You can use a text label or an image logo.

Text Watermark

Best for website names, product names, or "Powered by" branding.

Set the type to Text

Set Watermark Type to Text.

Enter your text and position

Enter the watermark text (for example: your brand or site name). Choose the Position: Top Left, Top Right, Bottom Left, or Bottom Right.

Custom iFrame watermark settings panel in Elementor showing text watermark type, label input, and bottom-right position selected

Image Watermark

Best for logos, brand marks, or custom icons.

Set the type to Image

Set Watermark Type to Image.

Upload your logo and set position

Upload or select your logo from the media library. Choose the Position to place it on the embed.

Step 4: Style the Watermark

Open the Style tab

Switch to the Style tab. Open the Watermark section.

Adjust typography, color, and opacity

For text watermarks: set the font family, size, and weight. Choose a color that matches your brand palette. Adjust opacity to keep the watermark subtle without blocking the content.

Custom iFrame Style tab in Elementor showing watermark typography, color picker, and opacity controls for branding an embedded iframe

Click Update or Publish. Your watermark is now live on the embedded content.

The watermark overlays the iframe without modifying the embedded website. It appears on top of the content and works across all embed types. See the Set Up Custom iFrame in Elementor guide for all available widget options.

This guide showed you how to add and style a watermark in Elementor using Custom iFrame Pro. From enabling the watermark to choosing text or image and adjusting style, the setup runs entirely through the Elementor editor.

FAQ

No. The watermark is an overlay on top of the iframe. The embedded website remains untouched. This avoids cross-domain and browser security issues.

Yes. Set Watermark Type to Image and upload your logo from the media library. Position it anywhere on the embed.

A slightly transparent watermark (around 50-70% opacity) looks professional and does not distract visitors from the embedded content.

Yes. The watermark overlay works on any content you embed with Custom iFrame, including PDFs, videos, maps, and external websites.

Also Available For

Custom iFrame Watermark (Feature)

Learn about watermark options across all embed types.

Set Up Custom iFrame in Elementor

Full guide to all Custom iFrame widget settings.

Was this page helpful?

Last updated today

Built with Documentation.AI