Instagram feed is very much important to many website owners. You can easily integrate Instagram into your site using the Instagram widget by Bdthemes. Because the feeds work for increasing social engagement, keeping users on their own site, mostly improving SEO. However, here, I am going to show how you can use Instagram Widget and what to do to make the widget workable.
So, let’s get started.
To Insert Widget
To insert a widget into the section actually is a matter of fun. Simply, drag and drop the Instagram widget in Elementor that you want to use for your project. As you see in the screenshot above.
After inserting the Instagram widget, you will find a message to set App Id, App Secret, and mostly Access Token. To use the Instagram widget for Instagram fed, you should first generate the Instagram Access Token. For that, you can read the doc “How to get Instagram Access Token?“
Using the Content Tab, you’ll be able to make a layout of a particular part of a website. And in this regard, some handy sections in the tab will assist you a lot.
Now, I’m going to show the sections of the tab and how they work behind the widget.
From this section, you can show Instagram feed through carousel skin along with the default skin.
Go to the Content tab > Layout.
If you need to manage height and item limits, you can do that using the scroll bar Image Height and Item Limit. Moreover, you can determine the number of columns and handle the column gap.
Most importantly, you might show your Instagram feed in Masonry mode. If so, just enable the corresponding switcher button for the Instagram widget.
Some switchers namely Lightbox, Lightbox Autoplay, and Lightbox Pause on Hover will let you give a lightbox effect to the image. Also, give animation to the image from the Lightbox Animation(Slide, Fade, Scale).
Just, go to the Content tab > Additional Settings.
The important thing in this section is the caching period. From this section, you can set how long you want to cache the feed in the gallery.
Now, let’s work with Style Tab. The tab will easily have you style the web content (text, image, video, etc.) of the page you require to design.
Styling with the tab in Elementor will always give you a fantastic experience.
Let’s have a look.
In this section, under the modes- Normal and Hover, you might style the gallery. Mostly, in terms of Background and Image/ Video, you can set color, border type, padding, border radius.
Simply, go to the Style tab > Item > Normal.
Mostly, from this section, you may apply the CSS Filters and Opacity effect.
Go to the Style tab > Item > Hover.
In this section, you’ll be able to set overlay Background color and Icon color. In addition, you set Overlay Gap and Overlay Icon Size. Just, use the scroll bar.
In conclusion, though our Instagram Widget contains some tricky parts, hopefully, in the end, you have got the solution. After this doc, in case, the doc is not enough, you can stream the video clip above. And to get more ideas about this, visit the demo page.