Instagram Feed Carousel Overview

The DiviFlash Instagram Feed Carousel Module for Divi is designed to integrate your Instagram feed into your website, showcasing your latest posts in a visually appealing carousel format.

Content

Instagram Settings

1. Access Token: Input the access token you have generated here to import your Instagram feed to the module. If you do not have an access token, you cannot use the Instagram Feed Carousel module. 

To learn how to get the Instagram access token, click here.

2. Number of Items: Define the number of Instagram posts you want to display.
3. Post Only Images: Toggle on to display posts that only contain images.
4. Video Autoplay: Toggle on to automatically play the videos in the feed.
5. Data Cache Time: Specify the interval at which the Instagram feed is automatically refreshed to display the latest content.
6. Data Cache Time Type: Specifies the unit of measurement (e.g. minutes, hours, days) used to determine the frequency of Instagram feed refreshes.

Carousel Settings

1. Carousel Type: Choose the type of the carousel you want to use. You have four options to choose from: Slide, Cube Coverflow, and Flip. 

If you choose “Slide” or “Coverflow”-

• Variable Width: Enable to use the original width of the Instagram posts. Not available for “Coverflow.”
• Max Image Height: Set a maximum height limit for the Instagram feed images. Only available if you enable “Variable Width.”
• Max Slide Desktop: Choose the number of posts you want to display on desktop devices.
• Max Slide Tablet: Choose the number of posts you want to display on tablets.
• Max Slide Mobile: Choose the number of posts you want to display on mobile devices.
• Spacing: Adjust the space between the Instagram posts.
• Speed: Define the slide speed for the Instagram posts.

If you choose “Cube” or “Flip”-

• Speed: Define the speed at which the Instagram post images will rotate.

2. Centered Slides: The first slide will be placed at the center when this option is toggled on.
3. Loop: Enable this option to add a loop effect to the Instagram feed carousel.
4. Autoplay: Enable this option to have the posts rotate automatically. 
5. Autoplay Speed: Define the speed of the autoplay effect. Only available when autoplay is enabled.
6. Pause on Hover: When enabled, the auto-playing slide will pause when hovered. Only available when autoplay is enabled.
7. Arrow Navigation: Turn on to enable arrows to navigate the posts.
8. Dot Navigation: Turn on to enable dots to navigate the posts. Not available if you choose “Cube” or “Flip” as the carousel type.
9. Use Instagram Post Link: Activate this setting to link each post slider to its original Instagram post.
10. Link Target: Choose whether to open linked Instagram posts in the same tab or a new tab. 

Advanced Carousel Settings

If you select “Coverflow” as the “Carousel Type,” you’ll gain access to a set of advanced carousel customization settings.

1. Enables Slides Shadows: Turn on to add a shadow effect to the post sliders.
2. Slide Rotate in Degrees: Adjust the angle of the carousel items.
3. Stretch Space Between the Slides: Adjust the gap between the slides.
4. Depth Offset: Adjust the depth of the carousel items.
5. Effect Multiplier: Determines how many times the carousel items will slide or rotate.
6. Shadow Color Dark: Choose the darker shade for the shadow effect.
7. Shadow Color Light: Choose the lighter shade for the shadow effect.

Note: The shadow color options are only available if the “Enables Slides Shadows” option is enabled.

Content Area

1. Enable Hover Icon: Toggle on to display an icon over the posts on hover.
2. Always Show Icon: Enable to always show an icon over the post images. 
3. Vertical Align: Change the vertical position of the icon relative to the post.
4. Icon Animation Direction: Specify the direction in which the icon will animate.

Note: The icon-related options here will only be available if “Enable Hover Icon” is enabled.

5. Always Show Caption: Enable to always display the post caption.
6. Vertical Align: Change the vertical position of the caption relative to the post. Only available if “Always Show Caption” is enabled.
7. Enable Caption on Hover: Toggle on to display the caption only on hover.
8. Vertical Align: Change the vertical position of the caption relative to the post.
9. Animation Direction: Specify the direction in which the caption will animate.

Note: The caption-related options here will only be available if “Enable Caption on Hover” is enabled.

Caption Background

Add a color, gradient, or an image to the post caption background.

Background

Add a background color, gradient, image, and more to the Instagram feed carousel.

Admin Label

Change the module name or label if required which will only be visible to you.

Design

Overlay

Add a color or a gradient over the Instagram posts.

Image Settings

1. Image Max Width: Limit the maximum width of the post images.
2. Vertical Alignment: Change the vertical position of the images relative to the image containers.
3. Equal Height Image Container: Activate this setting to ensure all image containers have the same height.
4. Force Full Width: Toggle on to make the post images full width.

Hover

1. Image Scale on Hover: Toggle on to make the post images zoom in on hover.
2. Image Scale Value on Hover: Define how much the image will enlarge when hovered.
3. Overflow Hidden: Toggle on to prevent the images from overflowing out of the container.

Caption

This section offers typography options for Instagram post captions.

Arrows

Keep the arrow navigation on to use those design options described below-

1. Arrow Prev Icon: Toggle on to use a custom icon for the “previous” button.
2. Icon Size: Adjust the size of the previous icon.
3. Arrow Next Icon: Toggle on to use a custom icon for the “next” button.
4. Icon Size: Adjust the size of the next icon.

Note: The icon size options are only available when the corresponding icons are enabled.

5. Arrow Color: Change the color of the previous and the next icons.
6. Arrow Background: Change the background color of the previous and the next icons.
7. Arrow Position: Change the vertical position of the arrow buttons relative to the post sliders.
8. Arrow Alignment: Change the horizontal position of the arrow buttons. 

Note: When selecting any alignment option other than justified, the arrows will come together, while choosing justified will maintain their separation, with one arrow on each side of the carousel.

9. Opacity: Adjust the transparency of the arrow buttons.
10. Disabled Arrow Opacity: Adjust the transparency of the disabled arrow at the end of the slide.

Note: The navigation arrows will be disabled when you reach the end of the carousel if the loop effect is not active.

11. Spacing: Add custom margin and padding to the arrow buttons.
12. .Box Shadow: Add a shadow effect to the arrows.

Dots

1. Alignment: Change the horizontal position of the dots relative to the post sliders.
2. Dots Color: Pick a color for the dots.
3. Active Dots: Pick a separate color for the active dot.

Custom Spacing

Add custom margin and padding to each item of the Instagram feed carousel. 

Sizing 

Adjust the width, height, and alignment of the entire module.

Spacing

Add custom margins and padding to the whole module.

Border

Border customization options for all the post sliders. You have the option to style each border individually or all the borders together.

Box Shadow 

Apply a box shadow effect to the carousel.

Transform

Change the scale, placement, size, angle, etc. of the module.

Animation

Apply a reveal animation effect to the logo carousel and customize the delay, duration, repeat, etc. of the animation. 

Advanced

The default tab for all Divi modules is used to add custom CSS code, conditions, visibilities, etc.

Do You Still Have Questions?

If you still have questions, then contact our support team at support@diviflash.com