You can add an Elementor Instagram feed with Spotlight in either of two ways:
- With Spotlight Free: Create the feed in Spotlight, copy its shortcode, and paste it into Elementor's Shortcode widget.
- With any paid Spotlight plan: Use the dedicated Spotlight widget to create, edit, and preview the feed without leaving Elementor.
Both routes give you an auto-updating Instagram feed on the finished page. The dedicated widget is quicker if you are building the feed and the page at the same time, so we will start there.
What you need before opening Elementor
For either method, you need:
- Elementor or Elementor Pro installed on your WordPress site.
- Spotlight installed and active.
- An Instagram Business or Creator account connected to Spotlight.
If you have not created a Spotlight feed yet, you can do that during the dedicated-widget walkthrough below. If you are using Spotlight Free, follow our Instagram feed setup guide first, then return here when the feed is ready to embed.
Method 1: Use Spotlight's Elementor widget
The dedicated widget comes with Spotlight's paid plugin, including the Essentials plan. It works with both the free and Pro versions of Elementor.
1. Find the correct Spotlight widget
Open the page where you want the feed and click Edit with Elementor. Search the widget panel for Spotlight.
You may see two similarly named results. Choose Spotlight Instagram feed, the tile with the Instagram icon. The one with the WordPress logo is the standard WordPress widget.
Drag the widget into the section or container where you want the feed.
2. Select a feed or create one
If you already have a feed, choose it from the dropdown. The feed should appear on the Elementor canvas immediately.
To build one without leaving the page, click Create a New Feed or Design Your Feed, depending on whether a feed is already selected.
Spotlight opens its feed editor over Elementor. Any feed you create here is also saved under Instagram Feeds in the WordPress dashboard, ready to reuse on other pages.
3. Connect your account and design the feed
Choose an Instagram account that is already connected, or connect a Business or Creator account when prompted. If this is your first feed, the account connection guide walks you through the authorization steps.
Open Design and adjust the feed for the space it will occupy on the page. The settings that usually matter most in Elementor are:
- layout;
- number of posts and columns;
- space between posts;
- feed width;
- header and button visibility; and
- the desktop, tablet, and mobile column counts.
You do not need to settle every design choice now. Once the feed is embedded, you can reopen these settings from Elementor with the widget's Edit button.
4. Save the feed into the page
Click Save and embed in the top-right corner of the feed editor. Spotlight returns you to Elementor with the feed visible on the page.
Use Elementor's section or container controls for the feed's position and maximum width. Use Spotlight's editor for the grid, posts, header, buttons, and feed-specific spacing.
Click Update when the page is ready, then open it in a new tab. Do not skip this front-end check. A feed can fit the editor canvas but still look too wide or cramped alongside the site's actual header, typography, and page margins.
Method 2: Use Spotlight Free with a shortcode
The shortcode route adds one copy-and-paste step, but the finished feed still updates automatically when you publish new Instagram posts.
1. Copy the feed shortcode
In WordPress, go to Instagram Feeds. Find the feed and copy its shortcode from the Actions menu.
You can also open the feed, move to Embed, and use the Copy button beside its shortcode. Each feed has its own numeric ID, so copy the shortcode rather than typing it.
2. Paste it into Elementor
Open the target page with Elementor and search for Shortcode. Drag Elementor's Shortcode widget into the section where the feed belongs.
Paste the complete Spotlight shortcode into the field. It will look like this, with your feed's ID in place of 148:
Elementor should render the feed on the canvas. Click Update, then check the page on the front end.
If you later change the feed in Spotlight, the Elementor page will show the updated version automatically. You do not need to replace the shortcode.
Make the feed work on desktop and mobile
Elementor controls the section around the feed, while Spotlight controls the feed itself. Keeping those jobs separate helps you avoid changing the entire page container just to fix a cramped mobile grid.
Start in Spotlight's Design tab:
- Switch between the desktop, tablet, and mobile controls.
- Choose a sensible column count for each device. A four- or six-column desktop feed often needs two or three columns on a phone.
- Check the gap between posts, feed padding, header, and buttons at every size.
Then return to Elementor's responsive preview and check the surrounding section. Look for excess side padding, a narrow content width, or another widget crowding the feed.
Finally, inspect the actual page on a phone-sized screen. Your theme, caching, and optimization rules can all affect the published page in ways that are not obvious in the editor.
Fix the setup when something does not appear
The Spotlight widget is missing
The dedicated Elementor widget requires Spotlight's premium plugin. If you are using Spotlight Free, use the shortcode method instead.
If you have a paid plan, confirm that both Spotlight and Elementor are active, then reload the Elementor editor. Search for Spotlight, not just Instagram, and choose the result with the Instagram icon.
The widget is present but the feed is blank
Select a saved feed from the widget dropdown. If none appears, create and save the feed first.
If the feed worked before, check the Instagram account connection and clear the relevant WordPress and plugin caches. Our Instagram feed troubleshooting guide takes you through the checks in order.
Elementor displays the shortcode as text
Use Elementor's Shortcode widget. A Text Editor or HTML widget may print the shortcode instead of processing it.
Copy the shortcode again from Spotlight's Feeds list or Embed step to make sure the feed ID and quotation marks are correct.
The desktop feed looks good but mobile does not
Change the device-specific columns and spacing in Spotlight before changing the Elementor container. Then use Elementor's mobile preview to check the section around the feed.
Design and preview the feed in one place
The shortcode method works well when the feed is ready and you only need to place it on the page. If you plan to create, compare, or revise feeds while working in Elementor, Spotlight's dedicated widget keeps the feed editor and live page preview in one place.
Paid plans start with Essentials at $59 per year.
See Spotlight plansFrequently asked questions
Can I add a Spotlight feed to Elementor for free?
Yes. Create the feed with Spotlight Free, copy its shortcode, and paste it into Elementor's Shortcode widget. The dedicated Spotlight widget requires a paid Spotlight plan.
Do I need Elementor Pro?
No. Spotlight works with both Elementor and Elementor Pro.
Can I add more than one Instagram feed to the same Elementor page?
Yes. Add another Spotlight widget or Shortcode widget wherever the second feed should appear, then select the appropriate saved feed. Spotlight supports unlimited feeds.
If I edit a feed, do I have to update Elementor again?
No. Changes saved to the feed in Spotlight are applied wherever that feed is embedded, including Elementor pages.
