The Instagram Feed module pulls your Instagram posts directly onto your Divi page, so visitors can see your latest content without leaving your site. It's built for designers, agencies, and site owners who want a live social feed that stays on-brand with the rest of their layout.
Add the Instagram Feed module
When you load the Visual Builder, Divi automatically adds a Section.
Click the Green Plus icon
to insert a Row.Click the Gray Plus icon
inside the Row, which will show the list of all available Divi modules.Find the Instagram module and click on it to load it. Alternatively, you can use the Search option to find it.
Connect your Instagram account
Before the feed can show anything, you need to tell the module which Instagram account to pull from. Two Content tab groups handle this:
Account - Connect the Instagram account whose posts you want to display.
Feed - Control how many Instagram posts the module will display.
Open the module's settings.
Go to the Content tab → Account.
Click the Add button.
Give your account a name - this can be anything you want.
Paste the Instagram Access token.
Click the Submit button.
Instagram Feed Module Settings Breakdown
Once you've added the Instagram Feed module, the module settings automatically pop up. This is where this module's content and design styles are configured. These settings are organized into three groups via the tabs at the top of the module:
The Content tab
The Content tab is where you connect your account, control the feed, and set the module's link, button, background, and metadata.
Account - Connect the Instagram account whose posts you want to display.
Feed - Choose how many Instagram posts the module displays.
Link - Make the entire Instagram Feed module clickable, creating a seamless way to direct users to another page, section, or external site.
Button - Choose to display the Follow Us on Instagram button and the button's text.
Elements - Choose which other module should be nested inside the Instagram Feed module.
Background - Choose the Instagram Feed module's background styles.
Meta - Choose the Instagram Feed module's Label text and force its Visibility inside the Visual Builder.
The Design tab
All of the Instagram Feed module's design styles live here.
Layout - Choose between the Block and Flexbox layout.
Image - Choose the desing styles applied to each image in the feed.
Button - Choose the Follow us button's desing styles.
Feed - Choose the feed's desing styles, including the layout, background, sizing, spacing, and more.
Item - Choose the feed's individual item (images) such as background, sizing, spacing, and more.
Sizing - Choose the Instagram Feed module's sizing.
Spacing - Choose the Instagram Feed module's spacing.
Border - Choose the Instagram Feed module's border styles.
Box Shadow - Choose the Instagram Feed module's Box Shadow styles.
Filters - Choose the Instagram Feed module's filters, such as hue shifts, saturation changes, and blending modes.
Transform - Choose the Instagram Feed module's advanced design effects, such as scaling, rotating, skewing, and translating.
Animation - Choose the Instagram Feed module's animation styles.
The Advanced tab
The Advanced tab provides tools for experienced designers, including CSS IDs and classes, visibility, transitions, position, and scroll effects.
Attributes - Assign a CSS ID, reusable CSS classes, or custom HTML attributes to the element.
CSS - Add custom CSS to fine-tune the Instagram Feed module.
HTML - Choose the semantic HTML tag for the Instagram Feed module.
Conditions - Display the Instagram Feed module dynamically based on rules you set, so the right content reaches the right audience.
Interactions: Create custom interactions, such as showing or hiding the Icon List module, and many more.
Visibility - Choose the Instagram Feed module's visibility across different devices.
Transitions - Choose how long the Instagram Feed module's animations take.
Position - Control the placement of the Instagram Feed module precisely.
Scroll Effects - Control how the Instagram Feed module behaves and transforms during scrolling.
What's the next step?
Save your changes and exit the Visual Builder
To save the page design, you can type CMD + S on a Mac or CTRL + S on a PC.
You can also:
Click on the Save button.
Click on the Exit button.
