Divi instagram gallery module is a fantastic way to pleasantly represent Instagram post images, videos, captions, & user info on the website. The Instagram gallery module contains many advanced features like Instagram setting, gallery setting, hover setting, font style, profile picture, spacing, and more. However, these features and the entire design process is divided into three categories,
+ Content Tab
+ Design Tab
+ Advanced Tab
Divi Instagram Gallery Module Content Tab
The content tab of the Instagram gallery module has a significant role in executing the initial process. This tab brings all prominent components like a user token, gallery layout types, author info, border animation, overlay, and more to the gallery. All these features are easy to customize & responsive for different devices. So, let’s drive into the content tab to learn how to get the best out of these features.
Instagram Setting
The Instagram setting is the prime feature of the content tab that brings a couple of attributes like an account access token, client ID & the secret to connecting Instagram account. Here you can also select to show images only, video autoplay. In addition, 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.
Gallery Setting
The gallery setting is responsible for taking the beauty of the Instagram galley to the next level. This feature allows you to display up to 8 images in a single row with a perfect space between them. Furthermore, the layout mode attribute of the gallery setting lets you pick one of the grid & masonry gallery layouts. Also, a load more button can be applied with the facility to determine the number of images for the initial load & secondary load. Load More Button text option facilitates you to use the custom text on the button. Nevertheless, you can use the post link to take the visitors to the Instagram account directly.
Hover Setting
The hover setting of the content tab is imported to provide some exclusive hover effects like overlay, border animation, image scale, icon, & post caption. The overlay attribute of this feature helps to select primary & secondary colors with gradient direction controlling option. Moreover, you can reveal the border with distinctive color, width & animation effects over hover mode. Activating the Use Icon attribute brings the Instagram icon to be displayed on the container over hovering. Nevertheless, turning on the Show Caption can present the post caption with content positioning, spacing & stylish revealing animation effects. You can also show the post caption always on the Instagram gallery.
Link
A designer can easily take the audience to another page by providing a link on the Divi Instagram gallery module. Diviflash Instagram gallery module is a well-planned module with every customization setting that will be required while working.
Background
The Divi Instagram gallery module background setting has multiple facilities for a better layout, such as background color, gradient, image, and video features. And on top of these features, there are some settings to make each adjustment as you desired. Note, this background will apply to the whole module.
Admin Label
Admin Label of Divi Instagram gallery 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 Gallery Module Design Tab
The design tab of the Divi Instagram gallery module is deployed to adorn each ingredient placed before. A vast number of advanced & innovative features are included under the design tab. Font style, user info, profile picture, image, hover, load more button, and spacing are the most gripping features of this tab. However, a few more features in the design tab give you better control over the module.
Font Style
The font style feature is divided into three parts, the caption, user name, and post date. The caption option allows you to change the font tag, style, width, color, text size, letter spacing & line height in a smooth way. Thus, you have the exact attributes except the tagging to customize the user name & post date.
User Info
Under the user info feature, you can decorate the user profile picture & icon with a covetable look. This feature allows you to apply a user info background color, width and border width, style & color with corner rounding & box-shadow effects. Moreover, designers can modify user profile picture width and icon alignment, position, color & size.
Profile Picture
The profile picture feature produces a stylish border effect around the user profile image. In addition, this feature can implement a border corner rounding and six different box-shadow effects. Further, the border color, width & style get modified under this section.
Image
The list of functions you get in the profile picture setting, also available for image setting. However, on top of the functions, the image feature helps apply hue, saturation, brightness, contrast, opacity, blur, and suchlike to the images. So, increase or decrease the value of these effects as you desire them in designs.
Hover
The hover feature of the divi Instagram gallery module is responsible for adjusting the icon size & color that appears while hovering.
Load More Button
The load more button is devoted to altering the button alignment, background color, font style, weight, text color, size, line spacing & line-height. Furthermore, the attribute can fix the border width, style & color with a stylish corner rounding and box-shadow effect. Nevertheless, the color of the loading icon can be modified.
Sizing
As a designer, you would love to control the alignment, width, and height of the divi Instagram image gallery module. Here, the sizing feature stands in your favor to increase or decrease your container’s width and height. You also can set a min or max height and width for the container.
Spacing
The spacing is a significant feature of the Divi Instagram image gallery module. Going further down to this feature, you will see several different elements of padding and margin operational processes. The spacing feature implements padding for the user info & caption. On the other hand, it provides a compatible margin between the user name, post date & icon. However, this feature gives both the padding & margin around the profile picture & load more buttons. Besides that, the general Divi padding & margin option is also available here.
Filter
The filter feature is awe-inspiring and supportive, among other Divi default features. Under this unique function, you will achieve numerous color effects for the entire Divi Instagram gallery module. In addition, the filter setting is responsible for adding effects like hue, saturation, brightness, contrast, opacity, blur, and suchlike to the image gallery. So, increase or decrease the value of these effects as you want them to your design.
Animation
Animation effect setting exists in all the Divi default modules. It has seven different effects and other options to adjust the beauty of the animated section.
Divi Instagram Gallery Module Advanced Tab
All kinds of exclusive designs you want to create are possible under the content & design tab. Therefore, Utilize these tabs to take the convenience as much as you can. However, the advanced tab can quench the designer’s thirst for controlling the depth of the module. The advanced tab lets developers play precisely with all the ingredients by implementing CSS ID & Classes and other Custom CSS code. Furthermore, the visibility, transitions, position, and scroll effects settings are included to work fluently.
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 Diviflash image gallery 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 image gallery section 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 Instagram gallery 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.
