Skip to main content

Search All In One Carousel for Divi Documentation

Search for answers or browse our knowledge base.

All Topics
Print

DE Instagram Feed Carousel

The Instagram Feed Carousel module dynamically displays your Instagram posts inside a fully customizable, responsive carousel. Designed natively for the new Divi 5 builder, this module allows you to showcase social feeds with overlay interactions, custom buttons, and smooth swiping transitions.

How to add module on page

  1. Open your page layout in the Divi 5 Visual Builder.
  2. Click on the gray (+) button to add a new module.
  3. Search for Instagram Feed Carousel in the module library.
  4. Click on it to insert it into your column.
  5. In the module settings, enter your Instagram Access Token to begin rendering your feed.

Content settings

Configure the source data, layout settings, and visibility elements:

  • Access Token: Enter your Instagram Graph API access token. Long-lived tokens are recommended to prevent authentication expiration.
  • Posts Count: The number of posts to fetch from your Instagram feed (default: 12).
  • Cache Duration: Define how long (in minutes) the feed should be cached locally (default: 60 minutes). This prevents hitting Instagram rate limits and speeds up page load times.
  • Link to Instagram: Make each slide image clickable, redirecting the visitor to the corresponding post directly on Instagram.
  • Show Caption: Toggle ON to show the caption text from your Instagram posts.
  • Enable Overlay: Toggle ON to show a visual overlay on slide hover containing likes, comments, or custom icon details.
  • Show Follow Button: Toggle ON to display a call-to-action button prompting users to follow your account. You can customize the button text (default: Follow me).
  • No Result Text: Customize the fallback text that appears if no Instagram feeds are retrieved.

Slider settings

Manage the carousel’s responsive behavior and Swiper transition rules:

  • Slides Per View: Set how many posts are displayed at once on desktop, tablet, and mobile screens (default: 4 for desktop).
  • Slides Per Group: Set how many slides are transitioned at once when clicking arrows or auto-scrolling.
  • Space Between Slides: Adjust the margin/space between each post in pixels (default: 20px).
  • Slider Navigation controls:
    • Loop: Toggle ON to enable infinite looping of the slider.
    • Autoplay & Autoplay Speed: Enable automatic transitions and configure the delay speed in milliseconds (default: 3000).
    • Transition Duration: Set the speed of the sliding animation (default: 1000).
    • Pause on Hover: Stop auto-scrolling when a user hovers their mouse over the feed.
    • Equalize Slides Height: Force all card heights to be identical, ensuring a uniform grid.
    • Linear Transition: Enable a continuous, smooth scrolling animation (ideal for infinite ticker effects).
  • Slider Navigation (Arrows and Dots):
    • Show Navigation Arrows: Toggle ON to display navigation arrows on the sides.
    • Arrows Position: Set the arrows to appear Inside or Outside the slide layout.
    • Show Control Dots: Toggle ON to display pagination dots. You can customize the dot style (solid, dynamic, etc.).

Design settings

Control the colors, fonts, borders, and overlays of the Instagram feed elements:

  • Overlay Styling: Customize the background overlay color, text color, icon color, and hover transition effects.
  • Image Styling: Configure custom margins, paddings, border radius (curved corners), image filters (grayscale, saturation), and card box-shadow.
  • Follow Button Design: Fully customize the look of the “Follow me” button, including font family, size, background color, borders, and hover states.
  • Arrows and Pagination Dots: Change the color, background, and sizing of the navigation arrows and active/inactive pagination dots.

Frequently Asked Questions

Do I need a Business/Creator Instagram account to use this module?

No. The module supports both Personal and Business/Creator Instagram accounts, as long as you provide a valid API Access Token.

Why are my new Instagram posts not showing up immediately on the site?

This is due to the caching mechanism. By default, the module caches your feed for 60 minutes to ensure fast website performance. You can reduce the Cache Duration in the Content settings to fetch posts more frequently.

Can I display likes and comments count on the slides?

Yes. When you turn on Enable Overlay under the Content settings, the post’s likes and comments count retrieved from the Instagram API will be displayed dynamically when users hover over the slide.

Was this article helpful?
0 out Of 5 Stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
5
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Table of Contents