Advanced Image Gallery Overview

Getting started

Advanced Divi Image Gallery Module is an extraordinary way of designing prospects discovered by the Diviflash for the Divi Nation. This module’s most advanced and impressive features are the Grid & Masonry Gallery Layout, Hover, and Gallery settings. Moreover, plenty of unique and time-saving features exist in this module, such as filter navigation, lightbox, load more button, active filter button, spacing, and so on. Unlike any other Divi modules, the Diviflash Advanced Image Gallery features are split into three categories,

  1. Content Option
  2. Design Option
  3. Advanced Option

Divi Advanced Image Gallery Module Content Tab

The Content setting of the diviflash advanced image gallery module is an integration of various sophisticated features. And the most exclusive listed features are the Gallery and hover settings. Even though few other functions are included under the content tab, these are firmly noticeable. No worries, today we will have a demonstration below of all the features in detail.

Add New Item

The Add New Item is associated with the filter navigation feature that is included under the gallery setting of the diviflash advanced image gallery module. Using one item is the best practice if there is no need for filter navigation. But when there is a consideration of demonstrating various image galleries at the same place, this feature stands as the most valuable way.

Gallery Settings

The gallery setting of the Divi image gallery module is an extraordinary feature given in the content tab. This attribute brought several mesmerizing functionalities like image size & row, layout mode, space between images, filter navigation, load more button, use the custom link, and lightbox.

  • Image Size, Row, Layout, & Space

The gallery setting has multiple options to enhance the beauty of image presentation. Under this attribute, you can adjust the image size according to the requirements. Also, you have the flexibility to fix up to 8 images in a single row and what should be the space between them. The image gallery setting has grid and masonry image layout styles, and only one can be implemented at a time. 

  • Filter Navigation & Load more button

Filter Navigation & Load more button are opposite each other. Only one of these features can be applied in the Divi advanced image gallery module at a time. The Filter Navigation is discovered in the Items section previously. Here turning on the filter navigation functionality shows a distinct category of images separately among multiple image gallery categories. So, here you can filter the image gallery by the filter button.

On the other hand, the load more button makes a frequent image visualizing system. Clicking the load more button brings up more images on the viewport, and the number of images that come can be defined. Even you can go for an alternative button name instead of load more.            

  • 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 Settings

Hover setting is also an imperative feature in the Divi Advanced Image Gallery Module. It has various customization opportunities, such as overlay, border animation, content space & position, image scale options, and show caption & description.

  • Overlay

The overlay of the hover setting is mainly responsible for deploying the color gradient while hovering over images. You get two distinct color effects while activating the Overlay Mode and even have the chance to fix the gradient direction.  

  • Border Animation 

Turning on the border animation brings a couple of attributes that make your border design remarkably easier than ever before. You can denote border color, width, and space by implementing this functionality. Moreover, 19 different types of border animation effects can be applied under this particular effect.        

  • Content Space and Position

Diviflash advanced image gallery module has Content space and position attributes in the hover setting. It’s created with having the control to adjust the position and space between the content text & title. Remember, the content space & position works only to activate the caption & description features.    

  • Image Scale Type

Image Scale Type is an animation effect that works on images while hovering. It has various animation effects like Zoom in & out, Pan up, down, left & right, Rotate left & right, and Blur.     

  • Show Caption & Description

Kicking off the Show Caption function displays the image caption while hovering. Along with that, you also get a list of animation effects to add to your caption. Finally, if you consider showing the caption for round the clock, simply turn on the Always Show Description option. On the other hand, the Show Description option has all the attributes you get in the Show Caption option.

Link

A designer can easily take the audience to another page by providing a link on the Advanced Image Gallery Module. Diviflash Image Gallery is a well-planned module with every customization setting that will be required while working.

Background

The Divi Advanced Image Galleries background setting 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 desired. Note, this background will apply to the whole module.

Admin Label

Admin Label of Divi Advanced Image 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 Advanced Image Gallery Module Design Tab

The Design Tab of the diviflash advanced image gallery module is a place from where you can decorate every single element with an exclusive look. The design tab consists of having several advanced and super supportive designing features. Such as font style for title and description, image filters, filter navigation button, active filter navigation button, load more button, border, and spacing are the most extraordinary features. Sounds like a massive functionality process? Yes, but super easy to conduct; follow the instructions explained below.

Font Style

The font style has two different categories of designing prospects, such as caption and description. Applying this feature allows you to embellish the typography of caption and description sections.

  • Caption
    Under the caption section, you can change the caption tag, font, font-weight, and font-style. Also, for the title text, it has the opportunity to beautify the text color, size, line spacing, and line-height.
  • Description
    All the customization functionalities that exist in the caption section remain for the description section as well.

Image 

The image setting of the Diviflash advanced image gallery module is one of the core features among other Divi gallery modules. Under this feature, you have numerous color effects for the content images and box-shadow effects. The image setting is a superb way to add effects like hue, saturation, brightness, contrast, opacity, blur, and suchlike to your content images. So, adjust the value of these effects and apply the image color that you ever wished for. Note, this filter effect will work only for the images, and the caption, description & border style will remain as default.

Filter Button

As you have already fixed a couple of filter buttons based on image galleries, now make these buttons highly fashionable to you. And here, the filter button attributes help for better decoration. You can define the button alignment, background, background-color, button font style & weight under this feature. Also, the text alignment, color, size, line spacing, and line-height of the filter button can be altered over numerous designs. And top of all these benefits, the incredible advantage of this feature is that you can modify the border style, width, and color with the shadow effects.

Active Filter Button

The Active filter button focuses on giving an exceptional visualization while clicking a specific filter button. And this feature has a number of effects that design a button with an incredible look. The active filter button allows you to beautify the button background, font-weight & style, text alignment, color & size, and button letter spacing & line-height. Even more, you can embellish the border with various colors, widths, and shadow effects.

Load More Button

Having all the designing features included under the Active filter button yet, the Load More Button has added an Icon facility. Also, you can adjust the look of the icon by changing its color and size.

Border

The border section of the Divi gallery module design tab has two distinct categories of border design features. The first one is the Filter container border, and the second one is the Image border. It’s easy to implement a compatible filter container border width, color, and style under the border setting. Also, you can round the filter container border from different angles. For every customization that the filter border container has, the image border also stands with the same attributes.

Sizing

As a designer, you would love to control the alignment, width, and height of a particular advanced image gallery module. 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 is considered a prominent feature of the Diviflash image gallery module. If you go further down to this setting, you will discover various padding and margin operational systems for several design elements. For instance, you can implement padding and margin between the caption, description, filter button container, filter button, and load more button. Besides that, the general Divi padding & margin option is also available in this feature.

Filters

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 gallery module. The filter setting is responsible for adding effects like hue, saturation, brightness, contrast, opacity, blur, and suchlike to your advanced 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 Image Gallery Module Advanced Option

All you want to achieve is possible under the Content and Design tab, so take the convenience as much as you can. However, Divi Advanced image 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 here 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. In each CSS input box, there is a sign “?” that will tell you which class has been targeted.

Visibility

The advanced setting’s visibility option allows designers to hide the advanced 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 advanced image gallery module, here you have the opportunity to achieve it with the scroll effect setting. Under this setting, you get Sticky position, scroll transform effects, enable vertical motion, and motion effect trigger functions.

NOTE:

Any setting that has a mobile icon will allow you to customize according to devices. You can select different settings for desktop, tablet & Mobile.

A mouse pointer in the setting will allow you to set a hover effect on this element.

Submit a Comment

Your email address will not be published.