Want to create an Elementor Instagram feed for your WordPress website?
In this step-by-step guide, you’ll learn how to add an Instagram feed to Elementor using a free, non-technical plugin named Spotlight.
There’s no technical knowledge or money required – just follow along with our tutorial and you’ll be up and running in no time.
Step-by-Step Guide: Display Instagram Feed on Elementor Website
Ready to get started? Here’s your step-by-step guide on how to display an Elementor Instagram feed.
Step 1: Install & Activate the Instagram Feed Plugin
To get started, you’ll want to install and activate the Spotlight Instagram feed plugin.
Again, Spotlight is free to use and 100% compatible with Elementor.
The free Spotlight plugin is listed at WordPress.org, so you can install it by following these instructions:
- Open your WordPress dashboard.
- Go to Plugins β Add New.
- Search for “Spotlight”.
- Click the Install Now button.
- Once the install process finishes, click the Activate button to activate the Spotlight plugin.
Step 2: Create an Instagram Access Token
Next, you need to create an Instagram Access Token, which is what allows your WordPress site to connect to Instagram.
Don’t worry – while that sounds a little technical, you just need to click a few buttons and it will take you maybe 30 seconds in total!
If you’re using your own personal account, Spotlight also lets you connect your account directly (in which case you have the option to skip to the next step). However, we’re going to use the Instagram Access Token method because it will work for any setup, including connecting your client’s account (if you’re building a client website).
To create your Instagram Access Token, go to this page.
Or, if you’re building a client website, ask your client to go to this page and follow the same instructions.
Then, click on the relevant Generate your access token button, based on whether you want to connect a personal Instagram account or a business account.
This will open a popup screen from Instagram that asks if you want to give Spotlight permission to access your account.
Click the Allow button in the popup:
After clicking Allow, you should see your Instagram Access Token appear on the original page:
Copy this Access Token to a safe place because you’ll need it in a second.
Or, if you’re working with a developer who is building your site, you’ll need to share this Access Token with your developer so that they can continue setting up the plugin.
Step 3: Connect Your Instagram Account to Your Elementor Website
Now, you can add this Instagram Access Token in your WordPress dashboard to connect your Elementor website to Instagram:
- Go back to your WordPress dashboard.
- Navigate to Instagram Feeds β Settings.
- Paste the Instagram Access Token into the Instagram/Facebook access token box.
- Click the Connect button.
If you’re exclusively working with your own Instagram account, you can also connect directly by clicking the Connect your Personal account or Connect your Business account buttons.
After clicking Connect, you should see a success message:
If you’re connecting a personal account, you’ll also see an option to add a custom photo and bio text. You can click Yes to do that now. Or, you can always add it later once you’ve configured your Elementor Instagram feed.
Speaking ofβ¦
Step 4: Configure Your Instagram Feed
Now that you’ve connected your Instagram account, you’re ready to set up your first Elementor Instagram feed.
To do that, go to Instagram Feeds β Feeds in your WordPress dashboard.
Choose Type of Feed
First, you’ll choose what type of content you want to display.
With the free version of Spotlight, you can display a feed of your own Instagram posts. However, Spotlight Pro adds more options, such as a feed based on hashtags or posts that have tagged your account.
If you want to try Spotlight Pro, you can access a 14-day free trial of Spotlight Pro to see how it works (no credit card required) – just click the Free 14-day trial button in the top-right corner.
For our Elementor Instagram Feed tutorial, we’re just going to use the My Instagram posts option.
Then, click Next step to advance.
Pick a Template
Next, you can choose one of Spotlight’s templates, which lets you control the layout and design of your Elementor Instagram feed.
The free version gives you six different templates, while Spotlight Pro adds another eight templates.
For this example, we’ll choose the free Classic feed template, but you’re totally free to pick a different one if you prefer.
Once you’ve made your choice, click the Next step button to advance.
Choose Your Instagram Account
On the next step, you’ll be prompted to Connect & customize. But because you already connected your Instagram account, you don’t need to do anything more here.
To advance, click the Connect & customize button.
Customize Your Elementor Instagram Feed
Now, you’ll be in the Spotlight customizer tool, which lets you further customize your chosen template.
To start, choose the account that you connected in the previous step under the Show posts from these accounts heading.
This will update the live preview of your feed to use the actual posts from your Instagram account.
Next, you can go to the Design tab to customize your Elementor Instagram feed template.
Here are some of the choices that you can make here with the free version of the plugin:
- Choose how many posts to display and in how many columns.
- Adjust the feed order. By default, it will display the most recent posts first, but you can change this if desired.
- Choose how to open posts when users click on them.
- Adjust the size and spacing of your feed.
- Customize the feed header that appears above the feed items.
- Configure the Follow on Instagram button style and text.
- Configure the Load More Posts button style and text.
- Add your own custom CSS if you want even more control.
With Spotlight Pro, you’ll get even more control over details like captions, likes, and comments.
Spotlight Pro users also get access to the other tabs to filter and moderate feed content or set up feed promotions.
Once you’re happy with how your feed looks, make sure to click the Save button in the top-right corner.
Then, let’s move on to how to embed your Instagram feed in Elementor.
Step 5: Embed Your Instagram Feed in Elementor
Spotlight gives you two ways to embed your Elementor Instagram feed:
- Spotlight (free) – you can add your feed to Elementor using the regular Spotlight WordPress widget. While you can add this widget directly from the Elementor interface, you won’t be able to customize your feed settings from Elementor.
- Spotlight Pro – you get a dedicated Spotlight Instagram Feed Elementor widget that lets you not just embed your feed, but also further configure its design and style directly from the Elementor interface.
We’ll look at both optionsβ¦
Either way, you can get started by opening the Elementor editor for the piece of content to which you want to add your Elementor Instagram feed.
Spotlight (Free)
If you’re using the free version of Spotlight, scroll down to the WordPress section in the Elementor sidebar and expand the list of options.
Then, drag the Spotlight Instagram Feed Widget onto your Elementor design where you want to display your feed.
Once you add the widget, you should see two options in the sidebar:
- Add a title (or leave it blank).
- Choose the Instagram feed that you just created in the previous step.
Then, click Apply.
You can also use the Advanced tab to adjust details like spacing and margins.
You might not see a live preview of your feed in the Elementor editor.
However, if you open a live preview or the live version of the page, you should see your Elementor Instagram feed.
Spotlight Pro
If you’re using Spotlight Pro, you’ll get a dedicated Spotlight Instagram Feed Elementor widget.
Not only does this widget let you see a live preview in the Elementor editor, but it will also let you customize (and create) Instagram feeds directly from the Elementor interface.
Again – if you want to test this out, you can get a 14-day free trial of Spotlight Pro – no credit card required.
You can search for the widget by name or find it in the General section of Elementor’s widgets.
When you add the widget, you should instantly see a preview of your Elementor Instagram feed.
If needed, you can click the Edit button to edit your feed’s settings right from Elementor. Or, you can even create a new feed if you want to display multiple feeds.
Step 6: Display Your Instagram Feed in a Pop-Up
This last step is optionalβ¦
But if you want to display your Instagram feed in a pop-up in Elementor, you have a few options.
First off, Spotlight includes a built-in feature to display individual posts in a popup when visitors click on them. This is available in both the free and paid version.
Here’s an example of what it looks like:
To enable or adjust this setting, set the Open posts in setting to Popup box under Feed Options:
Spotlight Pro users can further configure the popup using the Popup Lightbox settings.
If you want to display your entire Instagram feed in a pop-up, you have a few options:
- If you have Elementor Pro, you can add the Spotlight Instagram Feed widget to a popup that you create with Elementor Popup Builder. Just follow the same steps from the previous step when adding the widget to your popup design.
- You can use any WordPress popup plugin, such as Popup Maker. To display your feed in the popup, you can use the Spotlight shortcode.
Conclusion
That wraps up our guide on how to display an Elementor Instagram feed using the free Spotlight plugin.
You can follow everything in this guide and create your Elementor Instagram feed without spending any money.
If you want even more functionality, such as a dedicated Elementor Instagram feed widget that you can use instead of the regular Spotlight WordPress widget, you can upgrade to Spotlight Pro.
Spotlight Pro offers a 14-day free trial with no credit card required, so you can always test out the premium features before you commit to anything.