Style Custom iFrame Widget in Elementor

Style the Custom iFrame widget in Elementor using the WordPress plugin. Control background, border, box shadow, and dimensions. No coding required.

Overview

Custom iFrame lets you style the Custom iFrame widget in Elementor to match your site design. Control padding, alignment, backgrounds, borders, and shadows from the Elementor Style tab.

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

Using Gutenberg instead? Follow the Set Up Custom iFrame in Gutenberg guide.

Install and activate the plugin

Install the Custom iFrame plugin from WordPress.org and activate it in your WordPress dashboard.

Open your page in Elementor

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

Drag the widget onto your page

Search for Custom iFrame in the Elementor widget panel. Drag the widget into your layout.

Custom iFrame widget being dragged from the Elementor panel onto a page in the editor

Step 2: Adjust iFrame Content Settings

Paste your URL into the Source URL field. The content loads in the editor. Configure these display options:

Height: Set a fixed height in pixels for desktop, tablet, and mobile separately.
Auto Height: Let the iFrame resize based on content inside. Use this for forms and documents.
Show Scrollbars: Toggle scrollbars for content larger than the iFrame height.
Refresh Interval: Set a timer in seconds to auto-reload the iFrame. Use for live data feeds.

Step 3: Configure Smart Load

Smart Load reduces page load time by controlling when the iFrame content loads.

Enable Lazy Load

Toggle Lazy Load to Yes. The iFrame loads only when it enters the visitor's viewport.

Set a Placeholder Image

Upload a Placeholder Image to display before the iFrame loads. This keeps the page visually complete while content is loading.

Custom iFrame Smart Load settings in Elementor showing Lazy Load toggle and Placeholder Image upload field

Step 4: Adjust Styling Options

Go to the Style tab with the Custom iFrame widget selected. These options control layout:

Padding: Set space inside the iFrame. Adjust separately for desktop, tablet, and mobile.
Alignment: Choose Left, Center, or Right to position the iFrame in its container.
Container Width: Set the iFrame width using px, %, or vw. Set separate values per device.

Step 5: Style the Background

Choose a background type

In the Style tab, find the Background section. Select Classic or Gradient.

Configure Classic background

If you select Classic, configure:

Color: Pick a solid color or use a global color.
Image: Upload a background image.
Image Resolution: Set quality and size.
Position: Set alignment within the background area.
Attachment: Choose Default, Scroll, or Fixed.
Repeat: Choose No-repeat, Repeat, Repeat-X, or Repeat-Y.
Display Size: Choose Default, Auto, Cover, Contain, or Custom.

Custom iFrame background style options in Elementor editor showing color, image, position, attachment, repeat, and display size settings

Configure Gradient background

If you select Gradient, configure:

Color: Pick the first color.
Location: Set where the first color starts.
Second Color: Pick the second color.
Location: Set where the second color begins blending.
Type: Choose Linear (straight) or Radial (circular).
Angle: Set the gradient direction.

Custom iFrame gradient background options in Elementor editor showing two color pickers, location sliders, and type selector

Step 6: Style the Border

Add a border to define the iFrame edges:

Border Type: Choose Solid, Dashed, or Dotted.
Border Width: Set the thickness.
Border Color: Pick a color or use a global color.
Border Radius: Round the corners for a softer look.

Custom iFrame border settings in Elementor editor showing type, width, color, and border radius controls

Step 7: Style the Box Shadow

Add depth with a shadow effect. Select the Custom iFrame widget and go to Style - Box Shadow:

Color: Pick a shadow color or use a global color.
Horizontal: Move the shadow left or right.
Vertical: Move the shadow up or down.
Blur: Increase to soften edges. Decrease to sharpen them.
Spread: Extend or shrink the shadow area.
Position: Choose Outline (outside) or Inset (inside).

Custom iFrame box shadow settings in Elementor editor showing color picker, horizontal, vertical, blur, spread, and position controls

Click Update or Publish. Your styled embed is live.

FAQ

Yes. The Padding field is responsive. Click the device icon in Elementor to switch between desktop, tablet, and mobile and set different values for each.

Lazy Load delays iFrame loading until it enters the viewport. Placeholder Image shows a static image before the content loads. Use both together for best performance.

Yes. All color pickers in the Style tab support global colors defined in your Elementor site settings.

No. Box shadows are CSS-only and add no measurable load to your page.

Also Available For

Set Up Custom iFrame in Elementor

Full widget setup guide for Elementor.

Set Up Custom iFrame in Gutenberg

Setup guide for the WordPress block editor.

Was this page helpful?

Last updated today

Built with Documentation.AI