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

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.
Screenshot Displays Log in with Facebook Button and Access Token Field for The Instagram Feed Widget
Instagram Feed Widget for Elementor Access Credentials [ Log In With Facebook and Access Token]

Important: Instagram API has been deprecated, so you will need to migrate to the new API handled by Facebook through the login button below. 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.
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

Style

  • Photo Box
  • Caption
  • Container
  • Spinner
  • Carousel

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

Download Now it's free!

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