Need to create an Elementor Instagram feed on your WordPress web site?
On this step-by-step information, you’ll discover ways to add an Instagram feed to Elementor utilizing a free, non-technical plugin named Highlight.
There’s no technical information or cash required – simply comply with together with our tutorial and also you’ll be up and working very quickly.
Step-by-Step Information: Show Instagram Feed on Elementor Web site
Able to get began? Right here’s your step-by-step information on show an Elementor Instagram feed.
Step 1: Set up & Activate the Instagram Feed Plugin
To get began, you’ll need to set up and activate the Highlight Instagram feed plugin.
Once more, Highlight is free to make use of and 100% suitable with Elementor.
The free Highlight plugin is listed at WordPress.org, so you may set up it by following these directions:
- Open your WordPress dashboard.
- Go to Plugins → Add New.
- Seek for “Highlight”.
- Click on the Set up Now button.
- As soon as the set up course of finishes, click on the Activate button to activate the Highlight plugin.
Step 2: Create an Instagram Entry Token
Subsequent, that you must create an Instagram Entry Token, which is what permits your WordPress website to connect with Instagram.
Don’t fear – whereas that sounds a little bit technical, you simply have to click on just a few buttons and it’ll take you perhaps 30 seconds in whole!
In case you’re utilizing your personal private account, Highlight additionally helps you to join your account immediately (wherein case you’ve got the choice to skip to the subsequent step). Nonetheless, we’re going to make use of the Instagram Entry Token methodology as a result of it is going to work for any setup, together with connecting your shopper’s account (when you’re constructing a shopper web site).
To create your Instagram Entry Token, go to this web page.
Or, when you’re constructing a shopper web site, ask your shopper to go to this web page and comply with the identical directions.
Then, click on on the related Generate your entry token button, based mostly on whether or not you need to join a private Instagram account or a enterprise account.
It will open a popup display from Instagram that asks if you wish to give Highlight permission to entry your account.
Click on the Permit button within the popup:
After clicking Permit, it’s best to see your Instagram Entry Token seem on the unique web page:
Copy this Entry Token to a secure place since you’ll want it in a second.
Or, when you’re working with a developer who’s constructing your website, you’ll have to share this Entry Token together with your developer in order that they will proceed establishing the plugin.
Step 3: Join Your Instagram Account to Your Elementor Web site
Now, you may add this Instagram Entry Token in your WordPress dashboard to attach your Elementor web site to Instagram:
- Return to your WordPress dashboard.
- Navigate to Instagram Feeds → Settings.
- Paste the Instagram Entry Token into the Instagram/Fb entry token field.
- Click on the Join button.
In case you’re solely working with your personal Instagram account, you too can join immediately by clicking the Join your Private account or Join your Enterprise account buttons.
After clicking Join, it’s best to see successful message:
In case you’re connecting a private account, you’ll additionally see an possibility so as to add a customized photograph and bio textual content. You may click on Sure to do this now. Or, you may at all times add it later when you’ve configured your Elementor Instagram feed.
Talking of…
Step 4: Configure Your Instagram Feed
Now that you simply’ve linked your Instagram account, you’re able to arrange your first Elementor Instagram feed.
To do this, go to Instagram Feeds → Feeds in your WordPress dashboard.
Select Sort of Feed
First, you’ll select what kind of content material you need to show.
With the free model of Highlight, you may show a feed of your personal Instagram posts. Nonetheless, Highlight Professional provides extra choices, comparable to a feed based mostly on hashtags or posts which have tagged your account.
If you wish to attempt Highlight Professional, you may entry a 14-day free trial of Highlight Professional to see the way it works (no bank card required) – simply click on the Free 14-day trial button within the top-right nook.
For our Elementor Instagram Feed tutorial, we’re simply going to make use of the My Instagram posts possibility.
Then, click on Subsequent step to advance.
Decide a Template
Subsequent, you may select one in every of Highlight’s templates, which helps you to management the format and design of your Elementor Instagram feed.
The free model provides you six totally different templates, whereas Highlight Professional provides one other eight templates.
For this instance, we’ll select the free Basic feed template, however you’re completely free to select a distinct one when you desire.
When you’ve made your alternative, click on the Subsequent step button to advance.
Select Your Instagram Account
On the subsequent step, you’ll be prompted to Join & customise. However since you already linked your Instagram account, you don’t have to do something extra right here.
To advance, click on the Join & customise button.
Customise Your Elementor Instagram Feed
Now, you’ll be within the Highlight customizer software, which helps you to additional customise your chosen template.
To start out, select the account that you simply linked within the earlier step below the Present posts from these accounts heading.
It will replace the stay preview of your feed to make use of the precise posts out of your Instagram account.
Subsequent, you may go to the Design tab to customise your Elementor Instagram feed template.
Listed below are a number of the selections which you can make right here with the free model of the plugin:
- Select what number of posts to show and in what number of columns.
- Modify the feed order. By default, it is going to show the latest posts first, however you may change this if desired.
- Select open posts when customers click on on them.
- Modify the scale and spacing of your feed.
- Customise the feed header that seems above the feed gadgets.
- Configure the Comply with on Instagram button type and textual content.
- Configure the Load Extra Posts button type and textual content.
- Add your personal customized CSS if you’d like much more management.
With Highlight Professional, you’ll get much more management over particulars like captions, likes, and feedback.
Highlight Professional customers additionally get entry to the opposite tabs to filter and average feed content material or arrange feed promotions.
When you’re pleased with how your feed appears, ensure that to click on the Save button within the top-right nook.
Then, let’s transfer on to embed your Instagram feed in Elementor.
Step 5: Embed Your Instagram Feed in Elementor
Highlight provides you two methods to embed your Elementor Instagram feed:
- Highlight (free) – you may add your feed to Elementor utilizing the common Highlight WordPress widget. When you can add this widget immediately from the Elementor interface, you gained’t be capable of customise your feed settings from Elementor.
- Highlight Professional – you get a devoted Highlight Instagram Feed Elementor widget that permits you to not simply embed your feed, but additionally additional configure its design and elegance immediately from the Elementor interface.
We’ll have a look at each choices…
Both method, you will get began by opening the Elementor editor for the piece of content material to which you need to add your Elementor Instagram feed.
Highlight (Free)
In case you’re utilizing the free model of Highlight, scroll all the way down to the WordPress part within the Elementor sidebar and increase the record of choices.
Then, drag the Highlight Instagram Feed Widget onto your Elementor design the place you need to show your feed.
When you add the widget, it’s best to see two choices within the sidebar:
- Add a title (or go away it clean).
- Select the Instagram feed that you simply simply created within the earlier step.
Then, click on Apply.
You can even use the Superior tab to regulate particulars like spacing and margins.
You may not see a stay preview of your feed within the Elementor editor.
Nonetheless, when you open a stay preview or the stay model of the web page, it’s best to see your Elementor Instagram feed.
Highlight Professional
In case you’re utilizing Highlight Professional, you’ll get a devoted Highlight Instagram Feed Elementor widget.
Not solely does this widget allow you to see a stay preview within the Elementor editor, however it is going to additionally allow you to customise (and create) Instagram feeds immediately from the Elementor interface.
Once more – if you wish to take a look at this out, you will get a 14-day free trial of Highlight Professional – no bank card required.
You may seek for the widget by identify or discover it within the Normal part of Elementor’s widgets.
Once you add the widget, it’s best to immediately see a preview of your Elementor Instagram feed.
If wanted, you may click on the Edit button to edit your feed’s settings proper from Elementor. Or, you may even create a brand new feed if you wish to show a number of feeds.
Step 6: Show Your Instagram Feed in a Pop-Up
This final step is non-compulsory…
However if you wish to show your Instagram feed in a pop-up in Elementor, you’ve got just a few choices.
First off, Highlight features a built-in characteristic to show particular person posts in a popup when guests click on on them. That is accessible in each the free and paid model.
Right here’s an instance of what it appears like:
To allow or modify this setting, set the Open posts in setting to Popup field below Feed Choices:
Highlight Professional customers can additional configure the popup utilizing the Popup Lightbox settings.
If you wish to show your complete Instagram feed in a pop-up, you’ve got just a few choices:
- In case you have Elementor Professional, you may add the Highlight Instagram Feed widget to a popup that you simply create with Elementor Popup Builder. Simply comply with the identical steps from the earlier step when including the widget to your popup design.
- You need to use any WordPress popup plugin, comparable to Popup Maker. To show your feed within the popup, you should utilize the Highlight shortcode.
Conclusion
That wraps up our information on show an Elementor Instagram feed utilizing the free Highlight plugin.
You may comply with every little thing on this information and create your Elementor Instagram feed with out spending any cash.
If you need much more performance, comparable to a devoted Elementor Instagram feed widget that you should utilize as an alternative of the common Highlight WordPress widget, you may improve to Highlight Professional.
Highlight Professional affords a 14-day free trial with no bank card required, so you may at all times take a look at out the premium options earlier than you decide to something.
