Getting started
Divi hover box module is a unique design discovered by the Diviflash for Divi lovers. This Divi module’s most exciting and supportive features are the hover effect and change builder view setting. Besides that, various impressive and time-saving customization features available in this module, such as vertical alignment, custom spacing, title & subtitle, and so on. Unlike any other Divi modules, the Diviflash Hover Box features are split into 3 categories,
- Content Option
- Design Option
- Advanced Option
Divi Hover Box Module Content Option
The Diviflash Hover Box content setting is combined with several different features required for a better design. You will discover some customization functions under the content setting, like change builder view, content, button, hover setting, etc. However, through this documentation, you get an overall idea about the hover box content setting.
Change Builder View
Change Builder View is a feature that was invented especially to surge the designer’s comfort level while working on hover mode. Activating the change builder view mode will help designers to stick with the view that comes on hovering. As a consequence, they have a facility of live observation about the outcome.
Content
Content is an essential feature for every module, so be it for the Divi hover box. But here at the hover box module, diviflash made an exciting difference. This module’s content feature allows you to provide a title, subtitle, and content text all in one place.
Button
The button option is situated within the diviflash hover box module as the Divi default module provides. Under this attribute, you can add a button text and URL. Also, you can determine whether the Url will open in a new or same window over the click.
Hover Setting
The hover setting of the diviflash hover box module stands with several distinct, fascinating hover effects. Under this setting, you have super control over each element individually to determine the visibility while hovering.
- Hover Effect on Title Or Subtitle
Activating the Title Or Subtitle on Hover options will display the title or subtitle while hovering over a container. And you have the full authority to fix a particular element that will be portrayed on hover mode.
- Content on Hover
Content on hover works as the title on hover option. Here, a designer has the opportunity to determine whether content should be visible or not on hover mode.
- Button on Hover
The Button on Hover option allows you to show the button on hover mode.
- Background scale on hover
The background scale on hover is an impressive feature that slightly increases the background image over hovering mode.
- Hover Effect Over Animation Direction
All the hover effects also come with these little tweets. You can choose one animation direction from the list of nine. You can control the animation effect in this setting, whether it comes from the left, right, top, or bottom side while hovering. So, think from the designing perspective and set your appropriate animation direction.
Background
The Divi hover box’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.
Link
A designer can easily take the audience to another page simply by providing a hover box link. Diviflash hover box is a well-planned module with every customization setting that will be required while working.
Admin Label
Admin Label of Divi hover box 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 Hover Box Module Design Option
Diviflash hover box module’s design option is an imperative setting that mainly focuses on decorating the container. This hover box module setting is super handy to work with each element distinctly of a particular design. Design setting has features like text, vertical-align, title, subtitle, content, button, custom spacing, filter, animation, and suchlike. Now let’s jump to a deep discussion of all the functions.
Text
Text setting makes your works too easy to design any text on the hover box module. It has text alignment and text-shadow functions that make your hand more flexible to invent an exclusive text style. Also, you can put color, blur strength, and length value to text-shadow.
Vertical Align
Vertical alignment allows designers to define the content position over the background. Implementing this feature will provide you with the opportunity to fix the content at a point like top, bottom, and center.
Title
The title setting of the Divi hover box module modifies every segment of the content title. For instance, giving a title background along with different colors, changing font style, alignment, color, size, weight, and more are the primary specialty of the title design setting.
Subtitle
Every designing possibility you have in the hover box title feature, you get it all along in the subtitle feature.
Content
Each designing possibility you have in the hover box title feature, you get it all along in the content feature. In short, the content setting will provide every required effect for the content text.
Button
Button options for this module help you fix a proper button alignment, button background color, image, and color gradient. Along with that, button font and text-decoration are also possible under the Button setting. Moreover, you get various common facilities from other settings, such as button corner rounding, border decoration, and shadow embellishment functions.
Custom Spacing
The custom spacing is considered a prominent feature of the Diviflash hover box module. If you go further down to this setting, you will discover two different categories of customization features; demonstrated below.
- Wrapper spacing
The module or element of the module (Button) is wrapped in a container. You can give margin and padding on all four sides.
Wrapper spacing helps designers to put margins and padding over the button. And remember each ingredient within the button will move at the same time.
- Content spacing
On the other hand, the Content spacing allows designers to put margin and padding in all the directions for the title, subtitle, content text, and button separately.
Sizing
As a designer, you would love to control the alignment, width, and height of a particular hover box. 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 of the hover box.
Spacing
Divi makes the spacing setting a default feature for the whole module. In this function, you will find two common margins and padding settings also given at the bottom of the custom Spacing setting.
Border
The Border feature of the Diviflas hover box module can provide you 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.
Box Shadow
This Box shadow affects the entire Divi hover box module and has six distinct shadow effect styles.
Filter
The filter feature is very impressive and supportive, among other Divi default features. Under this unique function, you will achieve numerous types of hover effects. The filter setting is responsible for adding effects like hue, saturation, brightness, contrast, opacity, blur, and suchlike to your hover box. So, increase or decrease the value of these effects as you want them to your design.
Transform
The transform feature of the Divi hover box module provides you five different types of transform facilities. For instance, transform scale, translate, rotate, skew, and origin options. Implementing these functions on your hover box will give 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 Hover Box 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 hover box Module Advanced tab intends to quench the designer’s thirst to control the module. Designers can precisely play with each element of the hover box module 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 to 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
The Custom CSS section has three different CSS implementing areas in the hover box module. You are permitted all the sections to write down any CSS Code and to target any particular section. Also, you have those places mentioned as Before, Main Element, and After sections.
Visibility
The advanced setting’s visibility option allows designers to hide the hover box 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 position. This option is also available in every Divi module and works almost the same for all.
Scroll Effects
If you desire to give a scroll effect to your hover box module, here you have the facility to do 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.
