Instagram Feed Widget Tutorial

We have recently added a caching option in Premium Instagram Feed widget to load the feed much faster than before.

Intro

Elementor Instagram Feed Widget gives you the ability to embed Instagram feed into your page/post inside Elementor Page builder.

Instagram is one of the major social media networks with many influential people and organizations use it as a way to communicate and share their images, videos, and stories.

You can find that almost every major organization is using Instagram, so using the Elementor Instagram Feed Widget can be a good way to share these images from Instagram into your pages seamlessly. You can easily connect your personal Instagram account to your website. As Elementor Instagram Feed widget automates most of the process for you, allowing you to provide a better insight on any specific topic with minimum effort.

Requirements:

• You will need Premium Addons PRO plugin installed and activated on your website.
• Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

---

Click here to check Premium Instagram Feed Widget demo.

Key Features

Content

• Access Credentials
• Queries
• Layout
• Carousel

1. Access Credentials

Here, we will go with the initial setup by connecting the widget with your Instagram account.

• Log in with Facebook: You have to log-in with your Facebook account, then the Access Token field will fetch automatically.

Important: Instagram API has been deprecated, but you don’t need to worry. You don’t need to use Instagram access token generators anymore. Premium Instagram Feed for Elementor can generate an access token for Instagram with just ONE click. For further information, please check this page.

• Refresh Cached Data Once Every: We have recently changed the widget to be able to cache the data returned by Instagram. So, you can use this option to change the cache period.

2. Queries

In this tab, you can control the widget’s Queries like tags, redirection, and lightbox.

• Filter by Tags: This option will allow you to filter images by tags, also you can select multiple tags separated with a comma. For instance, sport, football, tennis, etc.
• Enable Redirection: When this option is enabled, it will redirect you to see the image on the Instagram website rather than opening it in a lightbox.
• Open in a New Tab: Open images when clicked in a new tab, It’ll be available only when Enable Redirection option is activated
• Lightbox: Enabling this option will make the Instagram images opened in a lightbox Modal.
• Lightbox Theme: Choose one from the following theme’s style:
  • Default
  • Light Rounded.
  • Dark Rounded.
  • Light Square.
  • Dark Square.
  • Facebook
• Show Caption: Decide whether if you want to show or hide the image caption.
• Show Videos On Click: This option will make the videos play upon mouse click.
• Share Button: Enable/disable share buttons on Instagram media.

3. Layout

How do you want the Instagram feed widget to look like? Here, you will have the ability to control your Elementor Instagram feed widget’s layout. Let’s see what we have in this tab.

• Maximum Images Number: Set the maximum numbers of images to show per widget.
• Masonry: Check this if you want to display images layout in Masonry style, uncheck for List style.
• Image Height: Set the height of all images to be at the same height, It’ll be available only when Masonry option is disabled.
• Images per Row: Decide how many images should be displayed per row, you can select from 1 to 6 columns.
• Hover Image Effect: Choose from multiple hover effects for the Instagram feed images. The available effects are:
  • Zoom In
  • Zoom Out
  • Scale
  • Gray Scale
  • Blur
  • Sepia
  • Brightness
  • Translate

5. Carousel

• Carousel: Enable/disable showing Instagram feed in a carousel. You will be able to control the following option if the Carousel is enabled.
  • Autoplay: Enable/disable the autoplay of media carousel.
  • Autoplay Speed: Set the autoplay speed.
  • Arrow Position: Adjust the position of carousel arrows.

Style

• Photo Box
• Caption
• Container
• Spinner
• Carousel
• Share Button
• Share Links

1. Photo Box

• Border Type: Set a border type for Photo Box in Instagram Feed Elementor Widget you can choose from the following border types:
  • None (Default)
  • Solid
  • Double
  • Dashed
  • Groove.
• Width: Set border width.
• Color: Choose a color for your border.
• Border Radius: Set Border Radius for Photo Box using pixels (PX), percentage (%), or em (EM). Higher border-radius means a more circular border.
• Shadow: Customize shadow with the following options:
  • Color.
  • Horizontal.
  • Vertical.
  • Blur.
  • Spread.
  • Position.
• CSS Filters: Customize the filters on images from the following options:
  • Blur.
  • Brightness.
  • Contrast.
  • Saturation.
  • Hue.
• Margin: Creates space around the Photo Box, outside of any defined borders. You can set the margin in Pixel (px), Em (em), or Percentage (%).
• Padding: Creates space around the Photo Box, inside of any defined margins and/or borders. You can set Photo Box Padding in Pixel (px), Em (em), or Percentage (%) Note* Padding does not accept negative values.

Same Exact Settings are in Both Normal and Hover in Photo Box.

2. Caption

• Color: Set a color for the caption text.
• Typography: Customize Styling font for the caption text.
• Text Shadow: Set shadow for the caption text.

3. Container

• Background: Set a background color for the container.
• Border Type
• Border Radius
• Box Shadow: Set box shadow for Instagram Feed box container. The available options are:
  • Color
  • Horizontal
  • Vertical
  • Blur
  • Spread
  • Position
    • Outline
    • Inset.
• Margin
• Padding

4. Spinner

• Color
• Spinner Background

5. Carousel

• Arrow Color: Set the colors for the carousel arrows.
• Size: Set the size for the carousel arrows.
• Background Color: Set a background color for the carousel arrows.
• Border: Set a border for the carousel arrows.
• Padding: Set a padding for the carousel arrows.

6. Share Button

• Icon Size: Set icon size for share button.
• Typography: Customize share button text font style.
• Background Color: Pick a color for share button background.
• Icon Spacing: Set space between icon and share text.
• Icon Color: Pick a color for share icon on normal and on hover state.
• Text Color: Pick a color for share text on normal and on hover state.
• Border Type: Set a border type for share button in Instagram Feed Elementor Widget you can choose from the following border types:
  • None (Default)
  • Solid
  • Double
  • Dashed
  • Groove.
• Width: Set border width.
• Color: Choose a color for your border.
• Border Radius: Set Border Radius for share button using pixels (PX), percentage (%), or em (EM). Higher border-radius means a more circular border.
• Margin: Creates space around share button, outside of any defined borders. You can set the margin in Pixel (px), Em (em), or Percentage (%).
• Padding: Creates space around share button, inside of any defined margins and/or borders. You can set Photo Box Padding in Pixel (px), Em (em), or Percentage (%).

7. Share Links

• Menu Background Color: Pick a color for share menu background.
• Typography: Customize share links text font style.
• Icon Size: Set icon size for share links.
• Border Radius: Set border radius for share menu.
• Icon Spacing: Set space between share icons and their text.
• Vertical Spacing: Set space between share menu items.
• Text Color: Pick a color for share links text.