Getting Started
The Divi Flash plugin always stands beside the designers with the most effortless customization facilities for the Divi theme. Recently, it has introduced the Divi Before and After Slider Module to reveal two images at the same place with an interactive slider. The Diviflash before-after image module is discovered along with various crucial and handy features like divider vertical & horizontal mode, slider customization, and before image filter setting. Unlike any other Divi modules, the Divi Flash before after image features are split into three categories,
+ Content Option
+ Design Option
+ Advanced Option
Divi Before After Image Module Content Tab
The Content setting of the Diviflash before after image module is an aggregation of the prime features and counted as the most attractive features are the before-after image and setting of slider customization. However, a couple of other features are firmly noticeable in the content tab. No worries, today we will have a demonstration below of all the features in detail.
Before-after Image
The Before-after Images under the content tab is the place for uploading before and after images. Moreover, adding an image alt text is even easier under this attribute.
Setting
All you need to decorate the before-after image slider is available under the content tab’s setting option.
Control starting point
Under the Control starting point attribute, you have superb power to define the before-after image slider’s starting spot. So, make a spot for the slider that you ever wanted.
Vertical mode
The before-after image module comes with a horizontal slider in default. But turning on the vertical mode setting changes the slider mode in the vertical direction instantly. We are aware that the slider direction plays a vital role in some cases, so you get it here.
Slider on hover
You may want to make your visitor’s journey a bit easier by applying the hover effect over the slider. No worries, activating the Slider on Hover feature forces the image slider to move along with the mouse cursor around the clock. Also, you can modify the slider color here.
Slider Shadow & Enable circle
Activating the slider shadow & enable circle mode provides a shadow & circle effect to the image slider. You can provide a blur effect to the slider circle for an interesting look.
Smoothing
The Smoothing function allows you to determine the value of the smoothing amount. Increasing the smoothing amount amplifies the smoothness of slider movement, and decreasing the value occurs the opposite.
Show label
The Show label feature represents the before & after label text. Under this feature, you name the label as you want by providing a custom text. This attribute turns a couple of more options like the label show on hover. Also, the label’s position can be controlled by turning ON the Use horizontal/vertical(in vertical mode) position option.
Background
The Diviflash Before-after image module’s 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 Before-after image 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 Before-After Image Module Design Tab
The Design Tab of the Before-after image module helps you decorate every single element with an exclusive look. The design tab consists of various advanced and incredibly supportive designing features. Such as before & after label style, before image filters, sizing, and spacing features are remarkably noticeable. Sounds like an extremely complicated process, right? But it’s super easy to conduct; follow the instructions explained below.
Before Label Style
The Before Label Style is an integration of all the features required to design the before label. Under this setting, you can decorate the before-label background color, font-weight & style, text color & size, text line-spacing & height. Moreover, within this feature, the border corner can be rounded, and the border color, weight & style can be changed along with different box shadow effects.
After Label Style
The After Label Style allows you to design the after label with a fantastic look. Each feature that you get in the before-label style is also available under the after-label style setting.
Before Image Filter
The Before Image Filter functionality standing beside designers to apply several effects on the before image. For instance, the hue, saturation, brightness, contrast, opacity, blur, and suchlike. The most exciting attribute you will discover that it only applies to the before image whereas the after image will remain as before. So, you can play with the before image separately.
Sizing
As a designer, you would love to control the alignment, width, and height of a particular before-after image 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 before-after image module. If you go further down to this setting, you will discover two different padding and margin operational systems for before and after label elements. For instance, you can implement padding and margin over the before & after text individually. Besides that, the general Divi padding & margin option is also available in this feature.
Border
The Border feature of the Diviflash before-after image module can give you a border corner rounding effect for the whole module. Also, you can customize the design by changing the border width, style, and color with it.
Box Shadow
The Box shadow affects the whole Diviflash before-after image module, and it has six distinct shadow effect styles. Selecting each effect will provide a few other options for adjusting the shadow position, blur, and spread strength according to the designer’s requirement.
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 Diviflash before-after image module. The filter setting is responsible for adding effects like hue, saturation, brightness, contrast, opacity, blur, and suchlike to your module. So, increase or decrease the value of these effects as you want them to your design. This will affect the whole module.
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 Before-After Image 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 before-after image Module Advanced tab intends to quench the designer’s thirst for having deep control over the module. Designers can precisely play with each Divi before-after image 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 custom CSS areas in the Diviflash before-after image 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 before-after image 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 before-after image 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:
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.
