How to add an Instagram feed to Elementor (no extra plugin)

The short version

1. Create a widget in Social Feed by grip space and copy its embed code (one <script> tag).
2. In Elementor, drag the HTML widget to the place where you want the feed and paste the code.
3. Publish or update the page, then open the live page in a new tab to see your posts.

That works with the free version of Elementor. If you want the same feed on every page, the cleanest way is a footer template in Elementor’s Theme Builder, which is part of Elementor Pro. Without Pro, you still have options, which are covered further down.

You do not need an Instagram feed plugin for Elementor, and you do not need a separate add-on pack with an “Instagram widget”. The feed is drawn by a small script that loads from our server, so it adds nothing to your WordPress database and does not depend on your plugins being updated.

What you can do with free Elementor and with Elementor Pro

Elementor’s FAQ states that the Theme Builder is a Pro feature. The HTML widget itself is available in the free version. Here is how that affects where you can put your feed:

Plans and features change over time. If you are not sure whether your Elementor plan includes the Theme Builder, check your plan on elementor.com or look at Elementor → Theme Builder in your WordPress admin. According to Elementor’s help center, free users can open that screen but only see which site parts would be available with Pro.

Step 1: Get your embed code

1. Sign up for Social Feed by grip space with your email address. The Free plan lets you create one widget.
2. In the dashboard, click “+ Connect Instagram account” and connect an Instagram professional account (Business or Creator). A personal account can be switched to a professional account for free in the Instagram app. See our guide to professional accounts if you have not done this yet.
3. Open “Settings & preview”. Choose a grid or a slider, and set the number of posts and columns while you watch the preview. Save.
4. Under “Add the embed code to your website”, click “Copy”.

The code is a single line that looks like this (your code has your own ID at the end):

<script type="text/javascript" src="https://n246.grip.space/api/v1/instagram/widget/xxxxxxxx"></script>

The feed appears exactly where this tag is placed on the page. That is why it fits so well into Elementor: wherever you drop the HTML widget, the feed shows up in that spot, inside the container or column you chose.

Step 2: Add the HTML widget to a page

1. In WordPress, open the page you want and click Edit with Elementor.
2. In the widget panel on the left, search for HTML. Its icon is </>.
3. Drag the widget onto the page. A blue line shows where it will be dropped. Put it inside the container (or section and column) where the feed should appear, for example below your main content or above the footer.
4. Click into the code area in the left panel and paste the embed code. Paste the whole line, from <script to </script>.
5. Click Publish (or Update on a page that is already live).
6. Open the page in a new browser tab, not in the editor, and check the feed.

Elementor’s help article on the HTML widget says the widget can hold HTML, CSS, shortcodes and JavaScript, and that Elementor tries to point out errors in the code you enter. The embed code is plain, valid HTML, so you should not see any warnings. If you do, the code was probably cut off while copying. Copy it again from the dashboard.

What the Elementor editor shows

The editor is not the live page. It loads your page inside its own frame, with extra code for drag and drop, and it updates widgets as you change them. Scripts pasted into the HTML widget do not always behave there the way they do on a published page. Depending on your Elementor version and setup, you may see:

1. The feed, as on the live page. Good, but still check the published page, because that is what visitors see.
2. An empty area where the HTML widget is. This is common and usually not a problem.
3. The feed in an odd position or appearing twice after you edit the widget. The editor may reload the widget several times while you work. Each reload runs the script again.

None of these mean the feed is broken. The reliable test is the published page in a normal browser tab. Elementor’s own instructions also end with saving the page and previewing it in a new tab.

If you want to check before publishing, use Elementor’s preview and look at the page it opens, not the editor canvas. To change the look of the feed, go back to “Settings & preview” in the Social Feed dashboard. Changes you save there reach your site without touching the code in Elementor.

Step 3 (optional): Show the feed on every page with a Theme Builder footer

A footer feed works well for shops, restaurants, salons and studios: it shows on every page without making each page longer by much. With Elementor Pro, you can add it once to a footer template.

1. In WordPress admin, go to Elementor → Theme Builder.
2. Open your existing footer, or click the + on the Footer card to create one. You can start from a pre-designed footer in the Template Library or close the library and build from scratch.
3. In the footer editor, drag an HTML widget into the footer where the feed should appear, for example above the copyright line, and paste the embed code.
4. Click Publish. Elementor asks where the footer should appear. Choose Entire Site to show it everywhere.
5. Open a few pages of your site in a new tab and check that the feed appears in the footer.

To change where the footer appears later, open the Footer card in Theme Builder and choose Edit Conditions. You can also limit the footer, and so the feed, to certain parts of the site, or create a second footer without the feed for pages where you do not want it, such as a checkout page.

Elementor’s troubleshooting article for missing headers and footers lists a few things to check when your template shows in the editor but not on the live site:

1. The template is published, not saved as a draft.
2. The template has display conditions (Elementor → Theme Builder → the template → Edit Conditions). Without them, Elementor does not know where to show it.
3. The page does not use the Elementor Canvas page layout. Canvas hides the header and footer, so a footer feed does not appear there. Switch to Default or Elementor Full Width in the page settings.
4. The template’s display conditions really cover the page you are looking at. For a site-wide footer, choose Entire Site.
5. Clear Elementor’s cache under Elementor → Editor → Tools with Clear Files & Data, and clear any browser, plugin, server or CDN cache.

Site-wide without Elementor Pro

If you use free Elementor, your theme still controls the header and footer. You can add the feed there with WordPress’s own tools:

1. Classic themes with widget areas: go to Appearance → Widgets, add a Custom HTML block to the footer area and paste the code.
2. Block themes (such as Twenty Twenty-Four): go to Appearance → Editor, open the footer template part, add a Custom HTML block and paste the code.

Our WordPress guide walks through these options step by step. If none of them fits your theme, the simplest approach is to add an HTML widget near the bottom of the pages that matter most, usually the home page, the About page and the Contact page.

Layout and width inside Elementor

The feed takes the full width of the container or column you place it in, up to the maximum width set in the Social Feed dashboard (1,500 pixels by default, adjustable from 0 to 2,000, where 0 means no maximum). So the size of the feed is mostly decided by your Elementor layout:

1. Full-width container: the feed stretches across the page. Lower the widget width in the dashboard (for example to 1,000 or 1,200 pixels) if it looks too wide on large screens.
2. Boxed container: the feed follows the content width of the container, which keeps it aligned with your text and images.
3. One column of a two- or three-column layout: the feed is narrower. Use fewer columns in the feed settings, or let the feed reduce them automatically (see below).

You can add space above and below the feed with the HTML widget’s Advanced settings (margin and padding) in Elementor, as with any other widget. A heading widget above the feed, such as “Follow us on Instagram”, helps visitors understand what they are looking at, especially if you turn off the account header in the feed settings.

For more on choosing between the two layouts, see Grid or slider?

Phones and tablets: no separate mobile version needed

Elementor lets you hide elements per device with the Responsive settings, and it is tempting to build one feed for desktop and another for mobile. With this widget, you do not need to. You set the number of columns once (1 to 8). The widget measures the actual width of the space it sits in and uses fewer columns when the images would become smaller than about 100 pixels. It checks again when the window is resized or a phone is rotated. On most phones that means about three columns.

Avoid placing two copies of the feed and hiding one per device. An element hidden with Elementor’s responsive settings is still part of the page: its script still runs, and it still counts as a view. Two copies on one page mean two views per visit, which uses up the Free plan’s 3,000 monthly views twice as fast, and the hidden copy can load images nobody sees.

If you really need a different look on phones, for example a slider on mobile and a grid on desktop, create two widgets in the dashboard and accept the double count, or choose the one layout that works on both. Most sites are well served by a single grid or a single slider.

Several feeds on one Elementor site

One embed code always shows the same feed with the same settings. If you paste the same code on several pages, every page shows the same posts in the same layout. That is ideal for a footer.

To show a different selection on different pages, create more widgets from the same Instagram account in the dashboard. For example, a product page could show only posts whose captions contain a certain keyword, and the home page could show everything from the last 90 days. Each widget has its own embed code, which goes into its own HTML widget in Elementor.

The Free plan includes 1 widget, the Light plan 3 and the Standard plan an unlimited number. On the Free plan, new posts appear once a day and a small “Powered by Social Feed” credit is shown below the feed. On paid plans, the credit is optional. See pricing for the details.

Speed and caching plugins

Elementor sites often use caching or optimization plugins, and these can affect scripts:

1. Clear the cache after adding the HTML widget. Otherwise visitors may keep getting an old copy of the page without the feed.
2. “Delay JavaScript” options hold scripts back until the visitor interacts with the page. If the feed appears only after you scroll or click, or not at all, exclude the embed script (its address contains n246.grip.space) from the delay.
3. “Combine” or “minify JavaScript” options sometimes move scripts into one file at the end of the page. The widget needs to stay where you pasted it, because it draws the feed right next to its own tag. Exclude it if the feed appears in the wrong place.

Grid images load in a sensible order: the first row loads right away and the rest load as visitors scroll near them. A slider loads all of its images right away, so keep a slider to a modest number of posts. Place the feed below your main content rather than at the very top of the page, so that it does not push the most important text and images down while it appears.

If your posts do not appear

1. Check the published page, not the editor. Open it in a private window to make sure you are not seeing a cached copy.
2. Check that the widget is Published in the Social Feed dashboard. An unpublished widget shows nothing.
3. Check the code. Open the HTML widget and make sure the whole line is there, from <script to </script>, and that nothing was added before or after it by accident.
4. Check the widget type. The code must be in the HTML widget. Other widgets, such as the Text Editor, are not meant for scripts and may show the code as text or strip it.
5. Check the Instagram connection. If you switched the account back to a personal account or removed Social Feed’s access in Instagram’s settings, reconnect the account in the dashboard.
6. Check caching and optimization plugins as described above.
7. Check the template if the feed is in a Theme Builder footer: published, display conditions set, and no Canvas page layout.
8. Check your monthly views. The monthly view limit applies to all widgets in your account together. If your account goes over it two months in a row, the feed stops showing in the following month. The dashboard shows your current usage, and upgrading raises the limit.

Frequently asked questions

Do I need Elementor Pro? No, not for a feed on a page. The HTML widget is in the free version. Pro is useful only if you want to place the feed once in a Theme Builder footer or another template.

Do I need an Elementor add-on with an Instagram widget? No. Some add-on packs include their own Instagram widgets, but you do not need one for this. The embed code works in Elementor’s built-in HTML widget.

Will the feed update by itself? Yes. New posts appear without any change in Elementor: once a day on the Free plan, and more often on paid plans.

Can I style the feed with Elementor’s Style tab? The HTML widget has no style options for its content. Set the layout, columns, spacing, width, font size and follow button in “Settings & preview” in the Social Feed dashboard. Elementor’s Advanced tab still controls the space around the widget.

Can I show someone else’s Instagram account, or a hashtag? No. Social Feed shows the posts of an Instagram professional account that you connect yourself. It does not show hashtag feeds or accounts you do not own.

Does the feed slow down Elementor’s editor? The feed is not stored in your page data. It is one script tag, so the editor treats it like any other short HTML widget.

I use Divi or another builder on a different site. The same embed code works in any builder that can hold custom HTML. See How to add an Instagram feed in Divi and our HTML guide.

Next steps

Ready to try it? Create a free account, connect your Instagram account and paste the code into an HTML widget. To learn more first, read what Social Feed by grip space is or compare it with other tools in our Instagram feed widget comparison. For WordPress setups without Elementor, see the WordPress guide.

Sources

1. Elementor, “HTML widget”: https://elementor.com/help/html-widget/
2. Elementor, “Frequently Asked Questions” (Theme Builder is a Pro feature): https://elementor.com/faq/
3. Elementor, “What is the Theme Builder?”: https://elementor.com/help/the-elementor-theme-builder/
4. Elementor, “Create or modify your footer”: https://elementor.com/help/footer-site-part/
5. Elementor, “How to fix a missing header or footer in Elementor?”: https://elementor.com/help/how-to-fix-a-missing-header-or-footer-in-elementor/
6. Elementor, “Custom Code”: https://elementor.com/help/custom-code-pro/
7. Elementor, “Show or Hide Columns Per Device”: https://elementor.com/help/show-or-hide-columns-per-device/