How To Add Your Instagram Feed to Elementor (In 5 Minutes)
Home Blog How To Add Your Instagram Feed to Elementor (In 5 Minutes)

How To Add Your Instagram Feed to Elementor (In 5 Minutes)

How to Easily Add Your Instagram Feed to Elementor

Do you want to learn how to add an Instagram feed to Elementor?

If you want to easily build beautiful pages for your website, Elementor is one of the best options out there. With it, you can create engaging pages without touching a single line of code.

The good news is there’s an easy way to make your pages even more engaging. You can add an Elementor Instagram feed to your website.

Today, we will show you how to add your Instagram feed to Elementor in just a few easy steps.

But before that, let’s take a moment to see how adding an Instagram feed to Elementor can help your WordPress website.

Why Add Your Instagram Feed to Elementor?

add instagram feed to elementor homepage

Elementor is a popular page builder plugin for WordPress that comes with an easy-to-use drag and drop editor. With its simple editor, you can create web pages to engage your audience even if you’re a new WordPress site owner.

And you can also add Instagram feeds to your Elementor pages to improve them. You can get more Instagram followers, conversions, and sales for your business that way.

Here are a few reasons you should add an Instagram feed to your Elementor page:

  • You can show reviews and testimonial Instagram posts on your ecommerce site. When people see others enjoying your products, it works as social proof and makes them more likely to buy from you.
  • By adding a feed of your Instagram profile to WooCommerce, you can show relevant images and full videos on your website. So, you can make your pages more engaging even without uploading these images and videos to your site.
  • Embedding your own Instagram posts on your site means more people can see them. And that can get you more Instagram followers.
  • Instagram feeds can also give your visitors an amazing online shopping experience. You can add shoppable Instagram feeds to your site and directly sell your products.

As you can see, Elementor Instagram feeds can help you promote your business and get more sales in lots of ways.

Now, let’s see how you can add an Instagram feed to your website with the Elementor page builder.

Easiest Way to Add Instagram Feeds to Elementor

best instagram feed pro plugin

If you want a quick and easy way to add Instagram feeds to your Elementor website, you can go for Instagram Feed Pro.

As the best Instagram feed plugin, it extends the functionality of your WordPress website. Instagram Feed Pro helps you create, customize, and post Instagram feeds free of any hassle, so it’s perfect for WordPress beginners.

What’s more, Instagram Feed Pro is also perfectly compatible with the Elementor page builder. This way, you can use Elementor’s drag and drop editor to add Instagram feeds.

Plus, Instagram Feed Pro also has tons of features to help you effectively promote your Instagram content on your website. In fact, here are a few highlights:

  • Easy & Fast Setup: Setting up Instagram Feed Pro only takes a few minutes with no coding needed.
  • Lots of Feed Types: Instagram Feed Pro gives you different types of feeds to choose from. You can have hashtag feeds, IGTV videos, shoppable feeds, and more.
  • Matches Your Branding: Plus, all the feeds you make with this plugin will automatically copy the looks of your website. So you’ll get Instagram feeds that perfectly match your branding — no extra effort needed.
  • Easy Customization: Customizing your feeds is also super easy with its live feed editor. In just a few clicks, you can change the feed size, margins, color, font, layout, and much more.
instagram live feed editor example
  • Lightning Fast: Worried that all the Instagram photos and videos might slow down your site? Well, Instagram Feed Pro is designed to be lightweight, so all of your pages and feeds will load super fast. Plus, a faster website will also help boost your SEO.
  • Customer support: Best of all, you’ll also get a team of WordPress experts with Instagram Feed Pro. With their help, your experience of building engaging Instagram feeds will be as smooth as possible.

As you can see, there are many reasons why Instagram Feed Pro is the best Instagram feed plugin out there. Over the years, it has managed to get 1,000,000+ active users with a rating of 4.9/5 stars.

reviews instagram feed pro plugin

And that includes some of the biggest brands in the world. With Instagram Feed Pro, you’ll be in good company.

smash balloon brands

Now, let’s see how you can use Instagram Feed Pro to add your feeds to your Elementor pages.

How to Add an Instagram Feed to Elementor (Step by Step)

Adding an Elementor Instagram feed is actually pretty easy. Let’s go through the 5 simple steps to do that below.

Step 1: Install and Activate the Instagram Feed Pro Plugin

To get started, you can grab your copy of Instagram Feed Pro here. Next, you can just install and activate the plugin on your website.

If you want to see how that’s done, you can look at our guide on how to install WordPress plugins.

Once the plugin is installed and activated, you can go to step 2 and start creating your Instagram feed.

Step 2: Create a New Instagram Feed

After installing and activating the plugin, you can now use Instagram Feed Pro to create your new feed.

First, go to the Instagram Feed » All Feeds menu from your WordPress dashboard area.

Now click on the Add New button to get started.

create new feed instagram feed pro

On the next page, you can select the type of Instagram feed that you want from these 3 options:

  • User Timeline: Show your own Instagram posts.
  • Public HashtagDisplay Instagram photos and videos that have specific hashtags
  • Tagged Posts: Embed posts that have tagged your Instagram account

Want to combine different Instagram feed types into a single feed? Just select multiple options here.

Finally, click on the Next button once you’ve chosen your Instagram feed type,

We’ll go with a user timeline for our tutorial.

select your feed type instagram feed pro

Now that you’ve created your Instagram feed, you can move to step 3 and connect it to Instagram.

Step 3: Connect Your New Feed to Instagram

In this step, you can connect the new feed to your Instagram account so it can show photos and videos from Instagram on your website.

To get started, click on the Add Source button here.

instagram add source for feed

You’ll see a popup that asks you to choose between a business profile or a personal profile for your Instagram feeds. Here’s how they’re different:

  • Personal profile: A personal profile allows you to use all the usual Instagram features. And with this plugin, you can create feeds with Instagram posts taken from your own profile.
  • Business profile: With a business profile, you get analytics and a contact button for Instagram. Plus, you can use Instagram Feed Pro to create lots of different types of Instagram feeds, including hashtag feeds, Instagram TV (IGTV) videos, shoppable feeds, and much more.

Once you pick the option you prefer, click on Login with Instagram.

For our tutorial, we’ll select the personal profile here.

select instagram account type popup

Next, you can give the plugin read-only access to your Instagram account. This means Instagram Feed Pro can only see your content and can’t change anything, so this Smash Balloon plugin is completely safe.

So click on Allow to give the read-only access.

allow access to instagram account create feed

And once you’ve done that, you can finally click on Next to finish connecting your feed to Instagram.

confirm account as source for instagram feed

See how easy that was? You didn’t even have to manually create an Instagram access token. It only took a few clicks and your Instagram account is now connected to your feed.

Now that you’ve created a feed and connected it to Instagram, you can move to step 4 and customize how it looks.

Step 4: Customize Your Elementor Instagram Feed

Once you’ve connected your account, you can now move on and start customizing your feed.

The plugin will now open the live feed editor, where you can set your feed layout, color scheme, post layout, header style, buttons, spacing and more styling options on the left side.

You can then see a live preview of how your Instagram feed looks on the right.

live feed editor for instagram feed pro

First, select the Feed Layout option on the left to start changing the layout of your Instagram feed.

select feed layout options

With Instagram Feed Pro, you have 4 different layout options here: Grid, Carousel, Masonry, and Highlight.

feed layout options add instagram feed to elementor

If you want to show lots of Instagram images at the same time in rows and columns, try the grid option.

This gives your Instagram content a clean and uniform look.

grid layout for instagram

Do you want a dynamic way to show your Instagram posts? You can try using an Instagram carousel layout to show photos and videos then.

carousel layout for instagram

You also have the masonry layout, which can show your photos and videos in different columns while keeping their original proportions.

masonry feed layout for instagram

Finally, there’s the highlight option that will put more focus on your posts by removing the likes, comments, and captions.

In fact, this layout increases the size of specific photos and videos by 4 times.

highlights layout for instagram

After selecting the Instagram feed layout you like, click on Save Changes.

Now look for the small Customize button at the top and click on it to return to the main customization options.

return to customization options

Now click on the Color Scheme option on the left to change the colors of your Instagram feed.

select color scheme option live feed editor

You can now pick from 4 different color schemes for your new Instagram feed here:

  • Inherit from Theme: Copy the colors of your website’s theme
  • Light: Show a light background along with a dark font
  • Dark: Pick a dark color for the background and a lighter font
  • Custom: Manually pick all the colors of your Instagram feed
color scheme options instagram feed pro

Just pick your color scheme from the options and click on Save to keep your changes.

After that, you can customize your header layout, post style, load more button, lightbox design, and much more using the live feed editor.

Finally, click on Save to confirm your changes after customizing the rest of your Instagram feed.

As you can see, the customization is pretty easy with Instagram Feed Pro. So, you can have feeds that look just the way you want without any complex coding needed.

You can now add your Instagram feed to Elementor in the final step.

Step 5: Add Your Instagram Feed to Elementor

Once you’re done customizing, it’s time to add your Instagram feed to Elementor. You can start embedding your Instagram feed directly from the live feed editor.

First, look for the Embed button in the top right corner and click on it.

instagram click on the embed button

From here, you can copy the shortcode for your Instagram feed. By pasting that code, you can add the feed to your website with ease.

To continue, click on the Copy button on the popup.

copy shortcode of instagram feed

After that, go to Pages » Add New from your dashboard to create a new WordPress page.

After that, just click on the Edit with Elementor button at the top.

create new wordpress page

You can also use a WordPress post here instead. To do that, go to Posts » Add New from your dashboard and select Edit with Elementor.

create new wordpress post

Once you do that, you can then see the Elementor editor.

On the right side, you can see a live preview of your web page. And on the left, you can find all the Elementor widgets that you can add to your page.

For the next step, just go to the search field on the left and type in “shortcode.” 

shortcode widget search

And below that, you should see the Shortcode widget in the search results.

Now all you have to do is drag the widget and drop it on the right.

drag and drop shortcode widget

You can now see the settings for the shortcode widget on the left panel. There, look for the Enter your shortcode field and paste your shortcode that you copied earlier.

Finally, click on the Publish button to finish it up.

You’ve now added your Instagram feed to Elementor! Just check your website and see how it looks.

add instagram feed to elementor example

And that’s it!

As you can see, it’s pretty easy to add your Instagram feed widget to Elementor. Using the Instagram Feed Pro plugin, all it takes is a few simple clicks — no need to touch a single line of code.

And now, you can do it for your site and create engaging pages to boost conversion and get more sales.

Want to embed Instagram feeds to your Elementor site? Get Instagram Feed Pro, and you can start today!

If you want to get more popular on Instagram, we also have a handy guide on how to increase Instagram followers.

Do you have another social media account? Here’s how to embed social media feeds on your website.

If this article helped you out, follow us on Twitter and Facebook, and stay tuned for more social media marketing tips and tricks.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.