< All Topics

Instagram is very popular social media world wide with almost 1 Billion users. Instagram provides an option to add it’s feed to elsewhere using Instagram API options and using developer account for same.

But here we have saved you from that login and approval’s long procedure and you can simply choose any account to display it’s feed on your web page easily by just entering username or access token for private accounts with different layout and styling options as well.

Right now due to change in Instagram / Facebook Developer’s API, We are working on revamping of this widget due to major Updates. So Feed through Access Token is deprecated for some time, feed fetching with usernames will work perfectly. Your understanding is greatly Appreciated.
Pro tip
Instagram gained it’s first 1 million followers in just a month, cool isn’t it ?

How to use the Instagram Widget of The Plus Addons For Elementor

We have provided little notes for accessing account using access token, otherwise you just have to paste your username if your account is public. It’ll directly fetch the post and set them in the layout you’ve selected.

Table Of Contents

General Steps

Search for the Instagram element from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to the Instagram widget. First, click on the Content tab.

1. Content

Instagram Layout

Styles

Select the instagram feed layout style you want to have from here.

Instagram Account Settings

Feed Source

Select the method you want to use to fetch the feed by Access Token or by Username. We have provided little notes for Access Token method as it is little bit tricky to implement. And for public user accounts, you can easily type in the username and feed will be displayed in no time.

Enter Username

Enter username of the Instagram account you want to display posts of.

Feed Settings

Max Visible Images

Select how much images you want to display.

General Settings

Desktop Column

Set the column layout for desktop viewport.

Tablet Column

Set the column layout for tablet viewport.

Mobile Column

Set the column layout for mobile viewport.

Grid Layout Image

Force Square Image

Convert image into 1:1 expect ration forcefully for all images.

Image Dimension

Set the image dimensions from here.

Masonry Layout

Enable Masonry

Masonry is a layout type for grid layouts in which content is set according to their dimensions side by side.

Carousels

Enable Carousels

If you want to have carousel slider or not.

Link & Content

Display Popup

If you want to have images in popup.

Use Image As Icon

Set display image or icon for on click which will open original image in popup.

Display Caption

Want to have caption for image or not ?

Caption Count

Set the character limit for the caption text.

Display Like

Want to show like count or not.

Display Comment

Want to show comments or not.

Enable Link

Want user to see original Instagram post on image click ?

Open In New Tab

Original Instagram post on image click will be opened in new browser tab.

This is a sample image demonstration

2. Style

Instagram Feed Styles

Padding Gap

Put-in some inner space to images.

Border

Draw a border around the accordion and give width and color to it.

Border Radius

Set the radius curve of the accordion panel’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Like & Comment Styles

Typography

Assign size, weight, spacing and much more to fonts.

Color

A color picker to assign suitable color to the text.

Popup Image Icon

Image Size

Set the image size for popup trigger icon / image.

Border Radius

Set the radius curve of the image border.

Caption Styles

Typography

Assign size, weight, spacing and much more to fonts.

Caption Color

A color picker to assign suitable color to the text.

Load More Button Style

Padding

Put-in some inner space to the content.

Margin

Put-in some outer space to the content.

Alignment

Align button in left, centre or right from here.

Typography

Assign size, weight, spacing and much more to fonts.

Text Color

A color picker to assign suitable color to the button text.

Background

Apply suitable background like color to an element.

Border

Draw a border around the accordion and give width and color to it.

Border Radius

Set the radius curve of the button’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Background Overlay

Hover Overlay Color

Apply suitable background like color/ gradient to an element.

Color

A color picker to assign suitable color to the background on hover.

Padding

Put-in some inner space to the content.

Carousel Options

Slider Mode

Select slide direction of slider from here.

Slide Speed

Slider speed in milliseconds.

Column (Desktop / Tablet / Mobile)

Select how many columns you want to have per slide with view port options.

Next Previous

Select if you want to rotate all rows at once or not.

Slide Padding

Put in some space between columns.

Draggable

If slider is draggable, then you can drag any slide to side and see the next one without using arrows for navigation.

Infinite Mode

If slider is in infinite mode, slider will repeat it self after last slide.

Pause on Hover

Slider will stop sliding on mouse hover.

Adaptive Height

Slider will adapt the height according to the current slide’s height instead of fixed height.

Autoplay

Make the carousel slide itself after some time interval.

Autoplay Speed

Set the automatic slide time interval here.

Show Dots

Select if you want dots / slide count or not.

Dots style

Select dots / slider counter style from here.

Dots Border Color

A color picker to assign suitable color to the dot’s borders.

Dots Top Padding

Apply space from top in root container from here.

On Hover Dots

Show dots only on hover.

Show Arrows

Show arrows / slider navigator or not.

Arrows Style

Select arrows / slider navigator’s style from here.

Arrows Style (Style -4)

Select arrows / slider navigator’s position from here.

Arrow Background Color

A color picker to assign suitable color to the background of arrows.

Arrow Icon Color

A color picker to assign suitable color to the icons of arrows.

Arrow Hover Background Color

A color picker to assign suitable color to the background of arrows on hover.

Arrow Hover Icon Color

A color picker to assign suitable color to the icons of arrows on hover.

Outer Content Arrow

Place arrows outside it’s root container or not.

On Hover Arrow

Show arrows only on hover.

Centre Mode

Centre mode enables active slide to be shown as visually centre or in braced up mode.

Centre Padding

Put-in some inner space to centred slide.

Centre Slider Effect

Choose how you want to make look centre slide different from others.

Scale

Choosing scale would make centre slide look bigger than others. Choose scale for centre & normal slides from below options.

Shadow

Choosing shadow would create shadow effect on centre slide different than others. Apply custom shadow from below option provided.

Number of Rows

Select the number of rows you wan to have per column.

Rows Top Space

Spacing from the top can be managed from here.

Messy Columns

Messy Columns

Messy column is a type of layout which is displayed in the video below, choose options for customizing in this manner from stated below.Apply space from top in root container from here.

On-Scroll View Animation


On Scroll View Animation Options are used to set beautiful animations to your sections. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.

View On Scroll View Animation Tutorial

3. Advanced

Advanced Options are a common option for almost all widgets. So, we have written a detailed tutorial on how to use these options.

View On Scroll View Animation Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Need help?