> For the complete documentation index, see [llms.txt](https://docs.customiframe.com/llms.txt).
> Use it to discover all available pages before exploring further.

# 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](/getting-started/gutenberg-setup) guide.

## Step 1: Add the Custom iFrame Widget

<Steps>
  <Step title="Install and activate the plugin" icon="package" title-type="p">
    Install the Custom iFrame plugin from WordPress.org and activate it in your WordPress dashboard.
  </Step>
  <Step title="Open your page in Elementor" icon="layout" title-type="p">
    Go to the page where you want to embed content. Click **Edit with Elementor**.
  </Step>
  <Step title="Drag the widget onto your page" icon="move" title-type="p">
    Search for **Custom iFrame** in the Elementor widget panel. Drag the widget into your layout.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776868406/getting-started/styling/guide-add-custom-iframe.webp"
      alt="Custom iFrame widget being dragged from the Elementor panel onto a page in the editor"
      width="1024"
      height="337" priority={true} fetchPriority="high" />
  </Step>
</Steps>

## 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.

<Steps>
  <Step title="Enable Lazy Load" icon="zap" title-type="p">
    Toggle **Lazy Load** to **Yes**. The iFrame loads only when it enters the visitor's viewport.
  </Step>
  <Step title="Set a Placeholder Image" icon="image" title-type="p">
    Upload a **Placeholder Image** to display before the iFrame loads. This keeps the page visually complete while content is loading.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776868408/getting-started/styling/custom-iframe-smart-load-settings.webp"
      alt="Custom iFrame Smart Load settings in Elementor showing Lazy Load toggle and Placeholder Image upload field"
      width="374"
      height="345" priority={true} fetchPriority="high" />
  </Step>
</Steps>

## 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

<Steps>
  <Step title="Choose a background type" icon="image" title-type="p">
    In the Style tab, find the **Background** section. Select **Classic** or **Gradient**.
  </Step>
  <Step title="Configure Classic background" icon="paintbrush" title-type="p">
    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.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776868410/getting-started/styling/custom-iframe-background-options.webp"
      alt="Custom iFrame background style options in Elementor editor showing color, image, position, attachment, repeat, and display size settings"
      width="373"
      height="723"
    />
  </Step>
  <Step title="Configure Gradient background" icon="layers" title-type="p">
    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.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776868412/getting-started/styling/custom-frame-bg-gradient-options.webp"
      alt="Custom iFrame gradient background options in Elementor editor showing two color pickers, location sliders, and type selector"
      width="371"
      height="716"
    />
  </Step>
</Steps>

## 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.

<Image
  src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776868413/getting-started/styling/custom-iframe-border-style.webp"
  alt="Custom iFrame border settings in Elementor editor showing type, width, color, and border radius controls"
  width="374"
  height="410"
/>

## 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).

<Image
  src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776868415/getting-started/styling/custom-iframe-box-shadow-style.webp"
  alt="Custom iFrame box shadow settings in Elementor editor showing color picker, horizontal, vertical, blur, spread, and position controls"
  width="372"
  height="494"
/>

Click **Update** or **Publish**. Your styled embed is live.

## FAQ

<ExpandableGroup>
  <Expandable title="Can I set different padding for mobile and desktop?" default-open="false">
    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.
  </Expandable>
  <Expandable title="What is the difference between Lazy Load and Placeholder Image?" default-open="false">
    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.
  </Expandable>
  <Expandable title="Can I use global colors for the border and background?" default-open="false">
    Yes. All color pickers in the Style tab support global colors defined in your Elementor site settings.
  </Expandable>
  <Expandable title="Does the box shadow affect page performance?" default-open="false">
    No. Box shadows are CSS-only and add no measurable load to your page.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

<Columns cols="2">
  <Card title="Set Up Custom iFrame in Elementor" href="/getting-started/elementor-setup" icon="layers" horizontal={false}>
    Full widget setup guide for Elementor.
  </Card>
  <Card title="Set Up Custom iFrame in Gutenberg" href="/getting-started/gutenberg-setup" icon="layout" horizontal={false}>
    Setup guide for the WordPress block editor.
  </Card>
</Columns>

## Related Guides

- [Set Up Custom iFrame in Elementor](/getting-started/elementor-setup)
- [Auto Height Adjustment](/features/auto-height)
- [Custom Watermarks (Pro)](/features/custom-watermarks)
- [Embed a PDF in Elementor](/elementor/documents/embed-pdf)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)