Embedding Google Sheets in Elementor

To embed a Google Sheet into your Elementor WordPress site, follow these steps:

1. Publish Your Google Sheet

  • Open your Google Sheet.

  • Go to File → Share → Publish to web.

  • In the dialog box:

    • Choose “Entire Document” or a specific sheet.

    • Select “Web page” format.

    • Click “Publish” and confirm.

  • Copy the generated embed code (looks like <iframe src="https://docs.google.com/spreadsheets/d/e/.../pubhtml?widget=true&headers=false"></iframe>).

2. Embed in Elementor

  • Edit your page with Elementor.

  • Drag an HTML Widget to your layout.

  • Paste the iframe code into the widget.

  • Make it responsive (optional): Wrap the iframe in a div:

    html
    <div class="responsive-google-sheet">
      <iframe src="YOUR_EMBED_LINK" frameborder="0"></iframe>
    </div>

    Add CSS (via Elementor → Custom CSS or theme customizer):

    css
     
    .responsive-google-sheet {
      position: relative;
      overflow: hidden;
      padding-top: 60%; /* Adjust height ratio (60% = ~3:5 aspect) */
    }
    .responsive-google-sheet iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }