fbpx

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.

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:

Skin Carousel:

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

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

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

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:

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

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

Hover:

Go to the Style tab > Item > Hover.

Overlay

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.

SIGNUP NEWSLETTER

Don’t worry we hate spam and we promise you will get only quality news and offer from us.

Missed Black Friday offer this year? Get up for flat 50% discount right now. Check Here

© Copyright 2021 All Rights Reserved by BdThemes

Missed the Black Friday offer this year? Get up for flat 50% discount right now.