The divi image masking module brings an amazing way to decorate images with a range of eye-catchy premade masking presets. All these preset are highly customizable according to the design needs. The design process of this module is divided into three categories based on the feature types.
+ Content Tab
+ Design Tab
+ Advanced Tab
Image Masking Module Content Tab
The content tab of the image masking module carries all the primary features like the image, mask settings, link, background & admin label. Under the content tab, you can apply and beautify an image with a stylish masking effect. So, let get to know all the features in detail demonstration.
The image feature of the module helps to import an image in the module along with Alt text facilities.
The mask setting brings 30+ premade covetable mask presets along with all the attributes to modify the mask size, position, and rotation for a standard look. Even more, you can activate the image force fullwidth attribute for better adjustment.
Under the link feature, you can easily take the audience to the desired page simply by providing a link on the image. Diviflash image mask module is a well-planned module with every customization setting that will be required while working.
The background setting of the divi image mask 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 of the divi image mask 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.
Image Masking Module Design Tab
The design tab contributes to taking the beauty of the image masking module to the next level. This tab consists of several advanced features that open the designer’s hands to go beyond limitations. So, let’s jump to the discussion of all these features with proper demonstration.
As a designer, you would love to control the alignment, width, and height of the divi image masking 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 & width of the module.
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.
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.
This Box shadow affects the entire divi image masking module and has six distinct shadow effects with other required features.
The filter is an awe-inspiring and most supportive feature among other Divi default features. Under this unique function, you will have numerous color effects for images. The filter setting is responsible for adding effects like hue, saturation, brightness, contrast, opacity, blur, and suchlike to the images. So, increase or decrease the value of these effects as you want them to your design.
The transform feature of the masking 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.
Animation effect setting exists in all the Divi default modules. It is also available in the divi masking module. It has seven different effects and other options to adjust the beauty of the animated section.
Image Masking Module Advanced Tab
Utilizing the content and design tab, you can bring your imaginary design into the real world. However, the advanced tab of the module opens the door to take your design beauty and comfort level to the pick. This tab presents many features like the CSS ID & Classes, Custom CSS, Visibility, transition, position, and scroll effect. Therefore, developers get the ground to play for further beauty of the module.
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.
There are three different custom CSS areas in the Diviflash Image Masking module, and here you can target and set your custom CSS code. A sign “?” in each CSS input box will tell you which class has been targeted.
The advanced setting’s visibility option allows designers to hide the Image Masking section for a particular device.
You have features like Transition duration, Delay, and Curve Speed for better customization under the transition setting.
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.
If you wish to give a scroll effect to your Image Masking 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.
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.