Presenting Instagram post images, videos, captions & icons elegantly on the website is became more effortless than ever. Using the Divi instagram carousel module can represent the Instagram posts under a gorgeous carousel view. This module consists of numerous latest drag & drop features like carousel setting, hover setting, image setting, content area, and many more. However, these features and the entire design process is divided into three categories,
+ Content Tab
+ Design Tab
+ Advanced Tab
Divi Instagram Carousel Module Content Tab
The content tab is considered the most prominent tab that contributes to building the framework of the module. This tab allows you to connect an Instagram account with the website. Moreover, a couple of advanced carousel features and others are included inside the content tab. All these features are easy to customize & responsive for different devices. So, let’s get into the deep of the content tab to learn all the features in detail.
Instagram Setting
The Instagram setting is the prime feature of the content tab that brings a couple of attributes to input account access token, client ID & the secret to connecting Instagram account. Here you can also select to show images only, video autoplay. You have another option to choose data cache time and time type. Here is our guide on how to get an Instagram access token for Divi.
Carousel Setting
The Carousel setting is a crucial feature of the Divi Instagram carousel module. This feature is devoted to amplifying the beauty of the carousel section. Several advanced functionalities like carousel type, arrow, dots, centered slides, and more are included under this feature. So, let’s jump to know how these features work?
Carousel Type
The Carousel Type feature of the carousel setting lets you pick the most suitable carousel for the design. You have four options for selecting the carousel type; the Slide or coverflow carousel furthermore the cube or flip effect.
Variable Width
Activating the variable width attribute allows you to adjust an equal width for all the images. Also, this feature brings a feature called Max-image Height that controls the maximum height of images. Be aware that this feature is available only for the Slide carousel.
Max Slide Desktop, Tablet & Mobile
The Max Slide feature for the Desktop, Tablet & Mobile is the precious beauty of this module. Creating a different viewport for these three different devices is just a matter of a click under the max slide attribute, as you are aware that the mobile and tablet screens are smaller than the desktop. Here, you can easily determine the number of image slides displayed on the screen of several devices. So, this feature is proven as super supportive in such circumstances. In other words, you can define these features as the responsiveness power of the Divi Instagram image carousel module. Remember turning on the variable width takes away the Max Slide Desktop, Tablet & Mobile features.
Spacing
You may already get the answer to why the Spacing feature is used for? Yes, you guessed it, this feature lets you set a perfect distance between the carousel items. This property is measured in pixels. Note: this feature is only available for the slide & Coverflow image carousel.
Speed
Speed is a feature used for determining the time it takes for an item to appear in the middle of the carousel slides while clicking the arrow navigation. This property is measured in milliseconds.
Centered Slides & Loop Effect
Centered slides help you start showing items from the center of the Instagram carousel slides. In contrast, the Loop effect allows you to create an endless spherical image exhibition of the carousel.
Autoplay & Push On Hover
The Instagram Carousel Autoplay feature is responsible for inventing an auto slider for carousel slides. Under this feature, you can specify the speed for the sliders to slide automatically. Also, you are allowed to activate the feature called pause on hover. This feature stops the slider autoplay while hovering.
Arrow navigation
Activating the Arrow Navigation feature of the carousel setting produces the arrow sliders on the left & right sides of the Instagram carousel module. And this feature is available for all carousel types.
Dots navigation
The Dots Navigation feature creates a dot slider for each item at the bottom of the module. You can customize this one under the design tab.
Use Instagram Post Link
Activating the Use Instagram Post Link feature will take the visitor directly to that Instagram post over clicking. You are free here to define whether the link will open in a new tab or current page.
Advanced Carousel Setting
The Advanced Carousel setting integrates a bunch of pro features in the Divi Instagram carousel module. In addition, a couple of super supportive carousel attributes are included in this setting. Remember, this feature is only available for the Coverflow carousel.
Enable Slide Shadow
The enable slide shadow is an attractive method to create a shadow effect to the Coverflow image carousel slider. This feature consists of two different coloring methods, such as shadow color dark & light.
Slide Rotate in Degree
Often designers seek to implement a compatible rotate effect on the carousel slider. In such cases, the Slide Rotate feature will be worthy enough to meet designers’ requirements. Therefore, the Slide Rotate property is measured by degree.
Stretch Space Between Slide
You might already understand what and how this feature of advanced settings works? Yes, the name of this feature represents its task. So, the Stretch Space Between Slides gives you an appropriate distance among the carousel sliders.
Stredepth Offset
The Stredepth Offset feature is used for defining a compatible depth of the Coverflow carousel effect. Unless you try and see the difference while changing the value of this feature, it might be hard to understand.
Effect Multiplier
Here we come to an exciting feature of the advanced carousel setting, the Effect Multiplier. This feature’s responsibility is to multiply the value of all the attributes included in the advanced carousel setting. Let’s make it more transparent; if you set the value two here, it will double the normal values of all the features. Highly recommend playing with it for better understanding.
Please note that every feature under this setting is related and requires a proper combination of values in all attributes.
Content Area Background
Often designers look for the unique and distinctive look of the Instagram content. Therefore, the content area background can bring an icon & caption over the hover mode with some gripping animation effects. Also, you can activate the Always Show Caption mode to present the image caption round the clock. Finally, you can set a background color for the caption.
Background
The background setting of the content tab has multiple facilities to implement for a better layout. Such as background color, gradient color, image, and video features. And on top of these features, there are some settings to make each adjustment as you desire.
Admin Label
Admin Label of Divi Instagram carousel module provides the opportunity to modify the module name as you want. So, it doesn’t have to be the module’s actual name that generally shows on the wireframe view.
Divi Instagram Carousel Module Design Tab
The Design tab of the module is dedicated to adorning all the elements deployed in the content tab. This tab has a range of decorative features, including the overlay, image setting, caption, hover, arrows, dots, custom spacing, and so on. A detailed demonstration of these features work procedures has given below.
Overlay
The overlay feature of the design tab helps to apply an overlay color to the container. Even, you can implement gradient primary & secondary colors with direction, start & end positioning controlling options.
Image Setting
The image setting is responsible for fixing a compatible image max-width & alignment. In addition, you activate the equal height option for the image container and force full width to create a clean edge design.
Hover
You can apply various image scale effects under the hover feature with the value controlling option. Moreover, this feature helps to hide the overflow portion of the Instagram carousel module.
Caption
The Caption feature of the Instagram carousel module helps designers decorate the caption of all the carousel sliders. You can modify the caption font-weight & style, caption text alignment, color & size. Even more, the caption’s letter-spacing & line-height can be defined under this caption attribute.
Arrow
The Arrow feature allows designers to give the arrow icon a stylish look by embellishing each ingredient bit by bit.
Arrow Icon
Under Arrow Settings, you will have the opportunity to select your preferred icon for the arrow previous and next icons with sizing facility.
Arrow Icon Color & Background
The Arrow icon color attribute is imported to change the arrow color. Meanwhile, the background feature is to modify the arrow background color.
Arrow Position, Alignment & Opacity
The Arrow feature of the Instagram carousel has a different attribute to adjust the arrow position, alignment & opacity level.
Arrow Margin & Padding
The arrow is considered a self-sufficient feature when it comes to the embellishment of an arrow icon. This feature provides two different margin & padding facilities for the previous and next Arrow icon.
Box-shadow
The arrow feature has six distinct shadow effects along with all other essential features to amplify its beauty.
Dots
The Dots feature in the design tab embellishes the dots icon by placing the alignment & various colors effect. Also, you can change the color of the active dot icon by the Active dot color feature.
Custom Spacing
The custom spacing system has been broken down into two categories, the wrapper & content spacing options.
Wrapper
The wrapper spacing system has the opportunity to provide wrapper margin & padding around the item. However, you also have the regular wrapper margin & padding that hit the entire module.
Content
On the other hand, the Content spacing allows you to put margin and padding all over the image caption.
Sizing
As a designer, you would love to control the Instagram carousel module’s alignment, width, and height. Here, the sizing feature stands in your favor to increase or decrease your container’s width and height. Even you can set a min or max-height & width of the carousel.
Spacing
Divi makes the spacing setting a default feature for the whole module. Therefore, you will find two common margins and padding settings that work the same for all Divi modules in this regard.
Border
The Border feature of the module can provide you with a border corner rounding effect for the container. Also, you can customize the design by changing the border width, style, and color under it. However, don’t feel confused by just reading; try once and see it’s easier than you thought.
Box-Shadow
This Box shadow affects the entire Divi Instagram Carousel module and has six distinct shadow effects with other required features.
Transform
The transform feature of the Instagram carousel provides you with five different types of transform facilities. For instance, transform scale, translate, rotate, skew, and origin options. Implementing these functions on the specific item will give better control over the module. This transform applies to all individual items.
Animation
Animation effect setting exists in all the Divi default modules. It is also available in the Divi Instagram carousel module. It has seven different effects and other options to adjust the beauty of the animated section.
Divi Instagram Carousel Module Advanced Tab
The content & design tab are capable enough to create an Instagram carousel module that entices visitors. However, the advanced tab of the module brings a lot of advanced facilities for developers & designers. Such as CSS ID & Classes, Custom CSS, Visibility, Transitions, Position, and Scroll effects settings are included to work fluently. The advanced tab can quench the developer’s thirst for controlling the module profoundly.
CSS ID & Classes
CSS ID: The only purpose of the CSS ID section is to identify the ingredient separately while linking, scripting, or style the module.
CSS Class: Assign any number of CSS classes to the element, separated by spaces, which can be used to assign custom CSS style from within your child’s theme or from Divi’s custom CSS inputs.
Custom CSS
There are three different custom CSS areas in the Divi Instagram carousel module you can target and set your custom CSS code there. A sign “?” in each CSS input box will tell you which class has been targeted.
Visibility
The advanced setting’s visibility option allows designers to hide the Divi Instagram Carousel module for a particular device.
Transitions
You have features like Transition duration, Delay, and Curve Speed for better customization under the transition setting.
Position
Here you have complete control over the relative, absolute, and fixed positions. This option is also available in every Divi module and works almost the same for all.
Scroll Effects
If you wish to give a scroll effect to your Divi Instagram carousel module, here you have the opportunity to achieve it with the scroll effect setting. Under this setting, you get a Sticky position, scroll transform effects, enable vertical motion, and motion effect trigger functions.
NOTE:
Mobile: Any setting that has a mobile icon will allow you to customize according to devices. You can select different settings for desktop, tablet & Mobile.
Mouse: A mouse pointer in the setting will allow you to set a hover effect on this element.
