Instagram Widget

Use the widget to add Instagram on your website.

Content

Layout

Metadata

Display Caption: Slide to YES to enable Captions.

Caption Length: Set desired caption length here.

Display Date: Slide to YES to enable Date and choose its format from a dropdown.

Display Likes: Slide to YES to enable Likes.

Display Comments: Slide to YES to enable Comments.

Skin: Choose a Skin between Cover and Card.

In case Cover Skin is selected you can also set a Content visibility, i.e. Show on hover or Hide on hover.

Columns: Choose the number of columns from the dropdown (for desktop, tablet and mobile)

Maximum Amount of Images: Set the Maximum Amount of Images to be shown.

Columns Gap: Set a gap between columns.

Rows Gap: Set a gap between rows.

Masonry: Slide to YES to enable masonry layout.

Image Ratio: Set desired Image Ratio for desktop, tablet and mobile.

The option is available in case Masonry layout is disabled.

Header: Slide to YES to enable Header.

Load More

Slide to YES to enable the “Load More” button and set it in a desired way.

Feed Title

Slide to YES to show a Link to Instagram profile and set it.

The option is available in case “Load More” and “Header” buttons are disabled.

On Click

Choose if you want to open images in a Lightbox or link to an image itself or disable a link at all.

Query

Search for: Choose between User and Hashtag.

Order by: Choose between Lade, Likes and Comments order.

Order: Choose Descending or Ascending order.

Slider Options

Animation Speed: Set the speed in milliseconds.

Mousewheel control: Slide to YES to scroll slides with a mouse wheel.

Navigation: Choose a Navigation type between Bullets, Progressbar and Fraction.

Type: Choose the type from the dropdown.

Arrows

Show Arrows: Slide to YES to enable arrows.

Visibility: Choose between ‘Always’ and ‘On hover’ arrows visibility.

Choose Previous and Next icons and add icons’ Text if needed.

If Text is added you can set its Direction (horizontal or vertical) and choose the Icon Position (before or after the text).

Slider Direction: Choose between Horizontal and Vertical directions.

Slider Height: Choose between Auto and Custom height.

Using the Custom option you can set the desired sider height manually.

Padding: Set paddings for desktop, tablet and mobile.

Account

Delete Cache: Press to delete cache.

Custom connection: Slide to YES to enable Custom connection (Access Token and User ID are required).

Style

Items

Cover

Style/Position – Choose between Start, Center and End caption positions. /Top, Center and Bottom

Alignment: Choose between Left, Center and Right metadata alignment.

Padding: Set padding for desktop, tablet and mobile.

Filters: Set filters in a desired way (Blur, Brightness, Contrast, Saturation, Hue)

Box Shadow: Choose desired settings from the dropdown.(for Normal and Hover modes)

Background Color: Choose a Background color from a color palette or dynamic tags. (for Normal and Hover modes)

Border Type: Choose a Border Type from the dropdown and set it.

Caption

Color: Choose a Caption color from a color palette or dynamic tags.

Typography: Set a Typography using settings from the dropdown.

Bottom Spacing: Set a Bottom spacing here.

Shadow: Choose desired settings for a Caption shadow from the dropdown.

Date

Bottom Spacing: Set desired Bottom spacing here.

Date Icon: Choose the icon from Icon library or upload desired SVG.

Gap between Icon and Date: Set desired gap here.

Color: Choose Icon/Date Color from a color palette or dynamic tags.

Size: Set the Icon Size for desktop, tablet and mobile.

Background Color: Choose a Background color from a color palette or dynamic tags.

Border Type: Choose a Border Type from the dropdown and set it. (for Normal and Hover modes)

Border Radius: Set Border Radius to the field.

Padding: Set padding for desktop, tablet and mobile.

Shadow: Choose desired settings from the dropdown.

Load More Button

Text Color: Choose a Text Color from a color palette or dynamic tags. (for Normal and Hover modes)

Background Color: Choose a Background color from a color palette or dynamic tags.(for Normal and Hover modes)

Border Type: Choose a Border Type from the dropdown and set it. (for Normal and Hover modes)

Border Radius: Set Border Radius to the button.

Typography: Set the Date typography using settings from the dropdown.

Text Shadow: Choose desired settings from the dropdown.

Padding: Set padding for desktop, tablet and mobile.

Top Spacing: Set a spacing between Content and the Button.

Slider Arrows

Icon Color: Choose Icons’ Color from a color palette or dynamic tags. (for Normal and Hover modes)

Background Color: Choose a Background color from a color palette or dynamic tags. (for Normal and Hover modes)

Box Shadow: Choose desired settings from the dropdown.(for Normal and Hover modes)

Icon Size: Set Icons’ Size for desktop, tablet and mobile.

Arrows Box Width: Set Arrows Box Width for desktop, tablet and mobile.

Arrows Box Height: Set Arrows Box Height for desktop, tablet and mobile.

Border Radius: Set Border Radius for desktop, tablet and mobile.

Border Type: Choose a Border Type from the dropdown and set it.

Padding: Set padding for desktop, tablet and mobile.

Container

Position: Choose between Horizontal and Vertical positions.

Horizontal Alignment: Choose between Left, Center, Right and Space Between horizontal alignment.

Vertical Alignment: Choose between Top, Center and Bottom vertical alignment.

Margin: Set margin for desktop, tablet and mobile.

Slider Navigation

Background Color: Choose a Background color for Normal, Hover and Active modes.

Box Shadow: Choose desired settings from the dropdown for Normal, Hover and Active modes.

Border Type: Choose a Border Type from the dropdown and set it.

Border Radius: Set Border Radius for desktop, tablet and mobile.

Size: Set desired navigation bullets size for desktop, tablet and mobile.

Spacing: Set a spacing between navigation bullets for desktop, tablet and mobile.

Container

Background Color: Choose a Container Background color.

Border Type: Choose a Border Type from the dropdown and set it.

Padding: Set paddings for desktop, tablet and mobile.

Margin: Set margin for desktop, tablet and mobile.

Border Radius: Set Border Radius for desktop, tablet and mobile.

Horizontal Alignment: Choose between Left, Center and Right horizontal alignment for desktop, tablet and mobile.

Vertical Alignment: Choose between Top, Center and Bottom vertical alignment for desktop, tablet and mobile. .

Advanced

Set the Advanced options that are applicable to this widget