Table Of Contents

Instagram widget

How to Use Instagram Widget

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

inserting Instagram 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.

how to use instagram widge 2 - BdThemes

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?


Content Tab

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.

Layout

From this section, you can show Instagram feed through carousel skin along with the default skin.

Go to the Content tab > Layout.

Skin Default:

how to use instagram widget 4 - BdThemes

Skin Carousel:

how to use instagram widget 3 - BdThemes

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.

Masonry

how to use instagram widget 5 - BdThemes

Most importantly, you might show your Instagram feed in Masonry mode. If so, just enable the corresponding switcher button for the Instagram widget.

Light Box

how to use instagram widget 6 1 - BdThemes

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

Additional Settings

how to use instagram widget 7 - BdThemes

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.


Style Tab

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.

Item

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.

Normal:

how to use instagram widget style 1 - BdThemes

Simply, go to the Style tab > Item > Normal.

how to use instagram widget style 2 - BdThemes

Mostly, from this section, you may apply the CSS Filters and Opacity effect.

Hover:

how to use instagram widget style 3 - BdThemes

Go to the Style tab > Item > Hover.

Overlay

how to use instagram widget style 5 - BdThemes

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.

Video Assist

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.

Need any assistance? Call Us: +880 1700 55 95 95 | © Copyright 2022 All Rights Reserved by BdThemes
Be cool in Summer with up to 40% OFF on our products | Coupon: SUMMERSALE

Ready to buy our Products?

Don’t miss Powerful Elementor plugins; the Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit and over 2000+ ready templates for professional web design.

Changed your Mind?

Please Suggest us how to improve

Up to 40% OFF

Grab the best summer deal and enjoy awesome Elementor web design tools in your hands now! This is a limited-time offer so get it before time runs out.