Getting Started
An alluring image leaves an impression that thousands of words can’t achieve. So, we can’t even think of walking in the web design industry without an image gallery module. However, the Divi justified image gallery module is a fantastic combination of designing prospects discovered by the Diviflash for the Divi Nation. This module contains several advanced features that made it stand out in the battle of thousands of image galleries. Included features the row max-height, image filter, spacing, hover & gallery setting, font style, load more button, border, lightbox, and plenty more. Unlike any other Divi modules, the Diviflash Justified Gallery features are split into three categories,
+ Content Option
+ Design Option
+ Advanced Option
Divi Justified Gallery Module Content Tab
The Content tab of the Diviflash justified gallery module is an integration of several sophisticated features. The Gallery & Hover Settings are the most exclusive feature of the Content tab. Even though few other functions are covered under the content tab, these are incredibly striking. Don’t worry about the design method; today, we will explain below in detail all the features.
Gallery
The gallery image of the content tab is considered the primary feature for the justified gallery module. This feature helps designers to add countless images to the module. If you seek to provide the caption & description and a custom link for an image, please go to the WordPress default media library.
Gallery Setting
The gallery setting of the justified gallery content tab carries a couple of extraordinary features like image size, row max-height, space between, load more button, and use custom link & lightbox.
- Image Size
The image size option in the gallery setting is responsible for marking the size of the gallery images between medium, large and original size.
- Row Max-Height
The row-max of the gallery setting is one of the most lucrative features in the Diviflash justified image gallery. This feature helps to increase or decrease the maximum height of the image row, and the width automatically gets a regular value. As a consequence, your Divi image gallery and row size expand simultaneously. So, images of different sizes do not affect the gallery for its viewport.
- Space Between
You may already get the answer to why the space Between feature is used for? Yes, you guessed it, this feature lets you set a perfect distance between the gallery images.
- Load More Button
The Load More button is located here for you to display justified gallery images continuously. So, make an impressive load more buttons and force viewers to click an instance for more images.
- Use Custom Link & Light-Box
Another conflict of the gallery setting arrives between the Use Custom link and Lightbox features. One of these functionalities goes away if you select one, so consider choosing one. The Use Custom link helps you to drive the visitors to another webpage as your desire. However, you have to add a custom URL in the WordPress default media library for this accomplishment. On the other hand, the lightbox allows you to enlarge an image over clicking and bring up an arrow to click for the next image exhibition. Moreover, this feature can show a download button and content for a specific image over the slider view.
Hover Setting
The hover setting of the Diviflash justified gallery is an impressive and precious feature that throws various hover effects to the module. This particular setting helps designers to implement overlay with two different colors upon 0-360 deg gradient direction. Also, activating the border animation gives authority to select the border animation style, color, width & space. Even, you can control the content space and visibility of caption & description under the hover setting. However, you get the fortune to activate the always show caption & description feature. Finally, if you want to change the position of the content and the style of publishing the content, here are a few options for you to achieve. So, play with each opportunity and surge your expertise level to the next step.
Link
A designer can easily take the audience to another page by linking the justified Gallery Module. Diviflash justified gallery is a well-planned module with every customization setting that will be required while working.
Background
The background setting of the Divi justified Gallery 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. Note, this background will apply to the whole module.
Admin
Admin Label of Divi Justified Gallery Module provides the opportunity to modify the module name as you wanted. So, it doesn’t have to be the module’s actual name that generally shows on the wireframe view.
Divi Justified Gallery Module Design Tab
The design tab of the Diviflash justified gallery lets you embellish every single ingredient with a fantastic look. The design tab consists of several advanced and super supportive design features. Such as font style for caption & description, image filters, load more buttons, border, and spacing. Sounds like a massive functionality process? Yes, but super easy to conduct; follow the instructions explained below.
Font Style
Font style stands with two different customizing features, caption & description.
- Caption
The caption feature of the font style setting is responsible for all kinds of embellishment for the caption font. For example, you can define the caption tag, font style & weight, caption text color & size under this feature. Moreover, the caption letter-spacing & line-height can be determined from the caption feature.
- Description
Every customizing opportunity you have in the caption setting is also included under the description feature.
Image Filter
The image filter feature is a unique discovery of the Diviflash in changing the gallery image hue, saturation, brightness, contrast, opacity, opacity, and suchlike. So, increase or decrease the value of the effects as you like them in your design. Remember, this image filter effect only applies to the images of the justified gallery module.
Load More Button
The load more button feature is designed with the broad intention to embellish every ingredient of the load more button. This well-planed feature is responsible for setting the button alignment, font style, weight & background color, and loading icon color. Also, the button text alignment, color, size, letter-spacing & line-height are getting controlled by the load more button feature. Along with these functionalities, it has the proper intention to modify the border style, width, & color with corner rounding & box-shadow effects. Nevertheless, you can select an icon for the load more button and adjust the icon’s size according to the requirement.
Border
The Border feature of the Diviflas justified gallery 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.
Sizing
As a designer, you would love to control a particular justified gallery 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 and width for the container.
Spacing
The spacing feature is regarded as the unique feature to maintain proper distance between module ingredients. Under this feature, you are permitted to provide padding upon the caption & description. Even you are allowed to implement padding and margin for the load more button. The Diviflash has given the Divi default padding and margin facilities that apply to the entire container.
Filter
The filter feature is an awe-inspiring and super decorative feature, among other Divi default features. Under this unique function, you will achieve numerous color effects for the entire Divi justified gallery module. The filter setting is responsible for adding effects like hue, saturation, brightness, contrast, opacity, blur, and suchlike to your justified gallery. So, increase or decrease the value of these effects as you want them to your design. Remember, this default filter effect works for the entire container.
Transform
The transform feature of the Divi justified gallery module provides you with five different types of transform facilities. For instance, transform scale, translate, rotate, skew, and origin options. Implementing these functions on your image accordion will give you better control over the section.
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 Justified Gallery Module Advanced Option
All you want to achieve is possible under the Content and Design tab, so take the convenience as much as possible. However, the Divi Justified Gallery Module Advanced tab intends to quench the designer’s thirst to control the module. Designers can precisely play with each Divi gallery module element by implementing CSS ID & Classes and other Custom CSS code. Further, 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 styling 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 custom CSS areas in the Diviflash justified gallery module; you can target and set your custom CSS code there. In addition, there is a sign “?” in each CSS input box that will tell you which class has been targeted.
Visibility
The advanced setting’s visibility option allows designers to hide the Justified 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 justified 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.
