The Divi floating multi-image module is a creative way to demonstrate your images over a distinct and smashing look. This module allows you to add multiple pictures as child items and decorate them accordingly with a floating effect. Features like image setting, sizing, positioning, shadow, border, and animation make the module unique. However, before getting into the deep of the module’s global features, let’s get to know the child item first.
Child Item
The child item written as Add New Item allows you to implement limitless images and embellish them individually. Under the child item, you will get a bunch of attractive features dedicated to various purposes. The listed features of the child item are organized into three categories as like the global features.
+ Content Tab
+ Design Tab
+ Advanced Tab
Content Tab
The content tab is considered a place where all the crucial features of the child item are integrated. Features like image, image sizing, position, and animation bring an organized view. In addition, a lot more features exist in the content tab to design without any disturbance.
Image
The child item’s image feature helps you upload an image and provide an alt-text for that image.
Image Sizing
You can play over the image maximum width & height under the image sizing feature.
Image position
The image position feature lets you move the picture vertically and horizontally to suit the design for maximum beauty.
Animation Setting
Under the animation settings, you have two distinct animation types with duration & delay adjustment facilities. Further, 28 gripping animation timing functions are available to enhance the item’s beauty.
Link
You can easily take the audience to another page by linking the child item. This module is a well-planned module with every customization setting that will be required while working.
Background
The background setting has multiple facilities 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 a child item.
Admin Label
Admin Label of the child item provides the opportunity to modify the item name as you wanted. So, it doesn’t have to be the item’s actual name that generally shows on the wireframe view.
Design Tab
The design tab takes the responsibility to amplify the visual beauty of the child item. It has various covetable features like the image shadow & border, filter, spacing, and more to bring uniqueness. Let’s discover each feature with a detailed demonstration.
Image Shadow
The image shadow feature implements a shadow effect to the image of the child item, and it consists of 7 distinct shadow effects with all the necessary settings.
Image Border
The border feature provides a border corner rounding effect to the image of the child item. 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 if it’s easier than you thought.
Spacing
Under the spacing feature, you get the privilege to provide a margin & padding around child items for a balanced gap.
Border
This border feature provides a border corner rounding effect to the container of the child item. Even more, you can design the border width, style, and color under it.
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 image of the child item. In addition, the filter setting is responsible for adding effects like hue, saturation, brightness, contrast, opacity, blur, and such. So, increase or decrease the value of these effects as you want them to your design.
Advanced Tab
All you seek to achieve is possible under the content & design tab. However, the advanced tab stands in your favor to take the child item beauty to the next level. Even developers can precisely step forward for further customizations and add scripts if required.
Custom CSS
The Custom CSS section has three distinct CSS implementing areas. You have access to all the areas to write down any CSS Code and target any particular area.
Visibility
The visibility option of the advanced tab offers designers to conceal the child item on particular devices.
Transitions
Under the transition setting, you have features like Transition duration, Delay, and Curve Speed for better customization.
Scroll Effects
If you want to provide a scroll effect to the child item, you have the opportunity with the scroll effect setting. Under this setting, you get a Sticky position, scroll transform effects, vertical motion, and motion effect trigger functions like any other divi module.
Global Feature Of the Floating Multi-Image Module
So, it’s time to find out the customizing procedure of the global features in a detailed demonstration. One thing about global features should be in your concern that they impact the entire module at once. Like any other divi module, the structure of the Divi floating multi-image module divided global features into three categories,
+ Content Option
+ Design Option
+ Advanced Option
Content Tab
The global content tab of the module impacts the entire module at once. You have image settings, link, background, and admin label features in the content tab to bring excellence to the module.
Image Setting
The image setting of the global content tab controls the entire container size. So, increase or decrease the container size as the design requires.
Link
You can easily take the audience to another page by linking the Divi floating multi-image module. This is a well-planned module with every customization setting that will be required while working.
Background
The background setting has multiple facilities 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 entire module.
Admin Label
Admin Label of the floating multi-image 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.
Design Tab
The design tab of the floating multi-image module has a couple of handy features like image shadow, border, sizing & spacing, which help to make the module unforgettable.
Image Shadow
The image shadow feature has seven different shadow effects that make the magnificent module impact the entire container. Also, it brings a couple of necessary settings to adjust the beauty.
Image border
The image border feature of the module provides a border corner rounding effect to all the child items at once. 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 if it’s easier than you thought.
Sizing
The sizing feature of the global design tab controls the entire container alignment, width, and height. Also, you can set a min or max height and width for the floating multi-image image module.
Spacing
The spacing feature provides you with the privilege to provide a margin & padding around the entire module for a balanced gap.
Advanced Tab
All you seek to achieve is possible under the content & design tab. However, the advanced tab stands in your favor to take the floating multi-image module’s beauty to the next level. Even developers can precisely step forward for further customizations and add scripts if required.
CSS ID & Classes
CSS ID: The only purpose of the CSS ID section is to identify the ingredient separately while linking, scripting, or to style the module.
CSS Class: Assign any 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
The Custom CSS section has three distinct CSS implementing areas. You have access to all the areas to write down any CSS Code and target any particular area.
Visibility
The visibility option of the advanced tab offers designers to conceal the module on particular devices.
Transitions
Under the transition setting, you have features like Transition duration, Delay, and Curve Speed for better customization.
Scroll Effects
If you want to provide a scroll effect to the module, you have the opportunity with the scroll effect setting. Under this setting, you get a Sticky position, scroll transform effects, vertical motion, and motion effect trigger functions like any other divi module.
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.
