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.
- 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.
- Access Credentials
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, 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. QueriesIn 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:
- Light Rounded.
- Dark Rounded.
- Light Square.
- Dark Square.
- 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.
3. LayoutHow 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
- Gray Scale
- 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.
- Photo Box
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)
- 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:
- CSS Filters: Customize the filters on images from the following options:
- 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.
- Color: Set a color for the caption text.
- Typography: customize Styling font for the caption text.
- Text Shadow: Set shadow for the caption text.
- 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:
- Spinner Background
- 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.