Search
Close this search box.

Display Instagram Feed on Elementor Website [Step-by-Step]

Learn how to display your Instagram Feed on your Elementor website with this step-by-step guide. Follow the instructions to install & activate the plugin, create an access token, configure your feed, and embed it in Elementor.
Table of Contents

Sponsored Ad

If you purchase through a link on our site, we may earn a commission.

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:

  1. Open your WordPress dashboard.
  2. Go to Plugins β†’ Add New.
  3. Search for “Spotlight”.
  4. Click the Install Now button.
  5. Once the install process finishes, click the Activate button to activate the Spotlight plugin.
Install and activate the Spotlight Elementor INstagram feed 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.

Generate your access token

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:

Allow access

After clicking Allow, you should see your Instagram Access Token appear on the original page:

Your Instagram access token

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:

  1. Go back to your WordPress dashboard.
  2. Navigate to Instagram Feeds β†’ Settings.
  3. Paste the Instagram Access Token into the Instagram/Facebook access token box.
  4. Click the Connect button.
Add access token

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:

Connected account

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.

Choose type of feed

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 template

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.

Connect and customize

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.

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

Feed options

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.

The regular WordPress Instagram widget in Elemenotr

Once you add the widget, you should see two options in the sidebar:

  1. Add a title (or leave it blank).
  2. 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.

add the widget

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.

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

How to find the widget

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.

Elementor Instagram feed widget

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:

Lightbox popup

To enable or adjust this setting, set the Open posts in setting to Popup box under Feed Options:

Lightbox settings

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:

  1. 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.
  2. 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.

Colin has been using WordPress for over a decade and is on a quest to test all 60,000+ plugins at WordPress.org. He has been a Writer and Product Review Expert for WP Mayor since 2017, testing well over 150 products and services throughout that time.

Sponsored Ad

If you purchase through a link on our site, we may earn a commission.

All suggestions are anonymous.

More from our blog...

Post a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Stay updated with WP Mayor's newsletter showcase every week

Stay on top of every new WordPress innovation and latest launches. Receive all our fresh product reviews and expert guides directly in your inbox.

Hosting Survey 2024

Are you happy with your hosting provider or are you over-paying for too little? Have your say below!

"*" indicates required fields

What's the main reason you picked this host?*
How happy are you with your host?*

OPTIONAL: If you'd like to receive the results of this survey, please enter your details below.