Instagram Feed Widget Tutorial

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.

Elementor Instagram Feed Widget Video Tutorial

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.

Screenshot Displays Premium Instagram Feed Widget For Elementor
Elementor Instagram Feed Widget

Click here to check Premium Instagram Feed Widget demo.

Key Features

Content

  • Access Credentials
  • Queries
  • Layout
  • Carousel
  • Profile Header

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.
Premium Instagram Access Token Generator
Premium Instagram Access Token Generator

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.

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.
Screenshot Shows a Premium Instagram Feed Widget Queries Settings.
Queries Settings for Elementor Instagram Feed Widget

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
Screenshot Displays a Premium Instagram Feed Widget Layout Settings.
Elementor Layout Settings for Instagram Feed Widget

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.
Carousel Options for Elementor Instagram Feed Widget
Carousel Options for Elementor Instagram Feed Widget

6. Profile Header

  • Profile Header: Enable/disable profile header option.
  • Show Instagram Logo: Show/hide Instagram logo in profile header.
  • Username: Type profile header user name to fetch its data.
User Info
  • Show Profile Picture: Show/hide Instagram header profile picture.
  • Show Username: Show/hide Instagram header username.
  • Show Verify Icon: Show/hide verify icon for verified instagram accounts only.
  • Show Biography: Show/hide instagram account biography.
  • Display: Select how to display profile header in row or column
    • Row: Display profile picture, username, verify icon, biography and user data in same row beside each other.
    • Column: Display profile picture, username, verify icon, biography and user data in one column underneath each other.
  • Alignment: Align your profile header items to left, center or right.
  • Vertical Alignment: Algin your profile header items to top, middle or bottom. In row option only.
  • Text Alignment: Algin profile header text to left, center or right.
User Data
  • Show Number Of Followers: Show/hide number of followers in Instagram profile header.
  • Show Number Of Followings: Show/hide number of followings in Instagram profile header.
  • Show Number Of Posts: Show/hide number of posts in Instagram profile header.
  • Display: Display user data in inline or block style.
  • Reload Data Once Every: You can set how often reload Instagram data, so you can set it to Reload once every: Hour, Day, Week, Month or Year. [Week or Month is recommended]
Profile Header Options in Elementor Instagram Feed Widget
Profile Header Options in Elementor Instagram Feed Widget

Style

  • Photo Box
  • Caption
  • Container
  • Spinner
  • Carousel
  • Profile Header
  • Instagram Logo
  • 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.

Screenshot Shows Photo Box Styling Settings Included in Elementor Instagram Feed Widget
Instagram Feed Widget For Elementor, Photo Box Styling Options [Normal and Hover]

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.
Screenshot Shows Caption Styling Settings Included in Elementor Instagram Feed Widget
Instagram Feed Widget For Elementor, Caption Styling Options

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
Screenshot Displays Available Styling Settings for The Container in Instagram Feed Widget
Container Settings In Elementor Instagram Feed Widget

4. Spinner

  • Color
  • Spinner Background
Screenshot Displays Spinner Color and Spinner Background Options for The Instagram Feed Widget
Spinner Settings In Elementor Instagram Feed Widget

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.
Elementor Instagram Widget Carousel Style
Elementor Instagram Widget Carousel Style

6. Profile Header

User Info

Avatar
  • Size: Set user profile avatar size in px or em.
  • Border Type: Set a border type for Instagram Avatar 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.
  • Margin: Creates space around Instagram avatar, outside of any defined borders. You can set the margin in Pixel (px), Em (em), or Percentage (%).
  • Padding: Creates space around Instagram avatar, inside of any defined margins and/or borders. You can set Photo Box Padding in Pixel (px), Em (em), or Percentage (%).
Profile Header Avatar Style in Elementor Instagram Feed Widget
Profile Header Avatar Style in Elementor Instagram Feed Widget
Username / BIO
  • Color: Pick a color for username/BIO text.
  • Typography: Customize Styling font for the username/BIO text.
  • Margin: Creates space around Instagram username/BIO, outside of any defined borders. You can set the margin in Pixel (px), Em (em), or Percentage (%).
Profile Header Username/Bio Style in Elementor Instagram Feed Widget
Profile Header Username/Bio Style in Elementor Instagram Feed Widget
User Data
  • Color: Pick a color for user data text.
  • Background Color: Pick a color for user data background.
  • Typography: Customize Styling font for the user data text.
  • Border Type: Set a border type for user data 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 user data using pixels (PX), percentage (%), or em (EM). Higher border-radius means a more circular border.
  • Margin: Creates space around user data, outside of any defined borders. You can set the margin in Pixel (px), Em (em), or Percentage (%).
  • Padding: Creates space around user data, inside of any defined margins and/or borders. You can set Photo Box Padding in Pixel (px), Em (em), or Percentage (%).
Profile Header User Data Style in Elementor Instagram Feed Widget
Profile Header User Data Style in Elementor Instagram Feed Widget
Verified Icon
  • Icon Size: Set icon size for Instagram verified icon.
  • Color: Pick a color for Instagram verified icon.
  • Icon Spacing: Set spacing for Instagram verified icon.
Profile Header Verified Icon Style in Elementor Instagram Feed Widget
Profile Header Verified Icon Style in Elementor Instagram Feed Widget
Container
  • Background Color: Set a background color for profile header.
  • Border Type: Set a border type for profile header 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 profile header using pixels (PX), percentage (%), or em (EM). Higher border-radius means a more circular border.
  • Box Shadow: Set box shadow for profile header container. The available options are:
    • Color
    • Horizontal
    • Vertical
    • Blur
    • Spread
    • Position
      • Outline
      • Inset.
  • Margin: Creates space around profile header, outside of any defined borders. You can set the margin in Pixel (px), Em (em), or Percentage (%).
  • Padding: Creates space around profile header, inside of any defined margins and/or borders. You can set Photo Box Padding in Pixel (px), Em (em), or Percentage (%).
Profile Header Container Style in Elementor Instagram Feed Widget
Profile Header Container Style in Elementor Instagram Feed Widget

7. Instagram Logo

  • Size: Set Instagram logo size.
  • Vertical Alignment: Align Instagram logo vertical align to top, middle or left.
  • Margin: Creates space around Instagram logo, outside of any defined borders. You can set the margin in Pixel (px), Em (em), or Percentage (%).
Instagram Logo Style in Elementor Instagram Feed Widget
Instagram Logo Style in Elementor Instagram Feed Widget

8. 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 (%).
Share Button Style in Elementor Instagram Feed Widget
Share Button Style in Elementor Instagram Feed Widget

9. 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.
Share Links Style in Elementor Instagram Feed Widget
Share Links Style in Elementor Instagram Feed Widget

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 20+ Elementor Widgets Totally Free of charge.