The image hotspot module for divi brings some interactive ways to add countless spots containing text, images, or icons on the background image. It is a feature-enriched module including Child Items that bring comprehensive design flexibilities. All the features are divided into three categories,Â
+ Content Tab
+ Design Tab
+ Advanced Tab
Child Item
Child item mentioned as Add New Item, which helps to add countless spots on the module. So, clicking on the Add New Item will generate a child item, which is a Spot.
Child item has many features divided into three categories; Content, Design, and Advanced tabs.
So, before diving deep into the global feature, let’s know the child item first.
Child Item Content Tab
The Child item content tab takes the first initiative to create an incredible image hotspot. This tab brings features like spot content, setting, tooltip content, and more to adorn the child item.
- Spot Content
The spot content feature lets you define the spot type to add to the item. And you have three alternatives, Icon or Image, Text, and Blank, to choose from.
- Spot Settings
You can change the spot item position by dragging to the left & top side of the module under the spot setting. Also, this feature allows fixing the variable width of the spot for better illustration. Finally, you get 5 different stylish animations with color effects to apply over the spot item.
- Tooltip Content
The tooltip content feature helps you to add text or shortcode for the specific spot item to be viewed over hovering.
- Link
The link feature takes your audience to another page while clicking the spot item. In addition, you can define whether the link will be opened in the same or a new window.
- Background
Background setting has multiple facilities to implement, such as background color, gradient color, image, and video features. And on top of these features, there are a few settings to make each adjustment as you desire.
Note: this background will apply to a particular spot.
- Admin Label
Admin Label of the item allows you to modify the spot name as you want. So, it doesn’t have to be the child item’s actual name that generally shows on the wireframe view.
Child Item Design Tab
The design tab style each element applied before under the content tab. Features like the spot text & icon give you more convenience. However, a lot more design features are included in this tab. Let’s find them with detailed explanations.
- Spot Text
The spot text feature changes the spot item text font, weight, style, alignment, color, and size. Also, it defines the letter-spacing and line-height of the spot text.
Note: this feature works when you select text as the spot type under the spot content feature.
- Spot Icon/Image
The Spot Icon/Image feature defines the background color, icon color & size with a gradient effect. Moreover, you have the facility to add a border with corner rounding and box-shadow effects.
Note: this feature works when you select icon as the spot type under the spot content feature.
- Spacing
The spacing feature provides padding around the spot item. So, you get proper placement for the spot item.
- Border
The Border feature of the child item provides a border corner rounding effect for the spot container. Also, you can customize it by changing the border width, style, and color.
- Box-Shadow
This Box shadow affects the entire child item. This feature consists of 7 distinct shadow effects with all the necessary settings.
Child Item Advanced Tab
The child item advanced tab brings a bit more freedom for developers to play with the spot items. This tab has several features like Custom CSS, condition, visibility, position, scroll effects, and more to style items with an innovative look.
Note Down: All the features and effects you get here apply individually to each spot item of the Image Hotspots module.
Image Hotspots Global Feature
The global feature impacts on entire module, including child items at the same time. However, unlike the child items, the global features are categorized into three different classifications,
+ Content Tab
+ Design Tab
+ Advanced Tab
Global Content Tab
The global content tab brings several valuable features like the main image, tooltip setting, and more to provide an initial look.
- Main Image
The main image is the featured or background image where you add spots for highlighting several key points. Even more, you can give an Alter text for the image.
- Tooltip Settings
The tooltip setting brings all the tooltip options to one place available on the module.
- Tooltip Enable, Arrow & Placement
Under this setting, you can enable the Tooltip for each spot item at a time. Also, you get the freedom to add an arrow on the Tooltip pointing to the spot item. Further, the placement option allows you to place the Tooltip in 12 different positions.
- Animation & Trigger
6 stylish animation effects are available in the module. Besides that, the trigger option defines the tooltip visibility condition for hovering and clicking mode.
- Hover Over Tooltip
Turning on the Hover Over Tooltip option let you take action inside the tooltip container. Also, you can define the size of the invisible border around the Tooltip that hides the Tooltip when the cursor move-out from that border. Further, set a tooltip visibility time limit while the cursor is left from the spot area.
- Follow Cursor
Activating the Follow Cursor option forces the Tooltip to follow the cursor movement.
- Tooltip Distance Enable
Tooltip Distance Enable gives the Tooltip a suitable placement from the spots. You get the opportunity to place the arrow wherever you want on the tooltip fringe.
- Background
The background features of the Image Hotspot module have multiple options to apply for a better layout. Such as background color, gradient color, image, and video. And on top of these features, there are some settings to make each adjustment as you desire.
- Admin Label
Admin Label 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.
Global Design Tab
The global design tab has many exclusive features dedicated to adorning the module with an alluring look. So, let’s talk no more and find all the features with a detailed understanding.
- Module Alignment
The Module alignment lets you align the entire module with just one click.
- Main Image Style
The Main image style feature is responsible for decorating the featured image with a corner rounding effect. Moreover, you can add a stylish border with box-shadow effects under this feature.
- Spot
The Spot feature of the design tab changes the spot background, font style, weight, alignment, and color. Also, the spot text size, letter spacing, and line-height can be modified with this feature. Nevertheless, you can add and style the border with corner rounding & box-shadow effect.
- Spot Icon/Image
The Spot Icon/Image feature defines the background color, spot icon color & size of the module. Moreover, you have the facility to add a stylish border with corner rounding and box-shadow effects.
- Tooltip Text
Under the Tooltip feature, you can change the tooltip text font, weight, style, alignment, color, size, letter spacing, and line-height.
- Tooltip Heading Text
All the customization features and freedom you get in the Tooltip text are also available for the Tooltip heading text feature.
- Tooltip
The Tooltip feature implements a background color for the tooltip container. Also, the arrow color gets changed under this feature. Moreover, you can add a stylish border around the tooltip container with box-shadow & corner rounding effects.
- Sizing
As a designer, you would love to control the module’s alignment, width, and height, right? Here, the sizing feature stands in your favor to increase or decrease the module width and height. Of course, you can set a min or max height & width.
- Spacing
The spacing feature allows you to apply a wrapper margin & padding around the entire container. Also, you can play with Spots & Tooltips by giving compatible padding around them. Nevertheless, you get the general margin & padding here.
- Border
The Border feature of the module provides a border corner rounding effect to the container. Also, you can customize the design by changing the border width, style, and color under it.
- Box-Shadow
This Box shadow affects the entire module, and this feature consists of 7 distinct shadow styles with all the necessary settings.
- Filters
The Filters bring numerous color effects to the image hotspots module. In addition, 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.
- Transform
The transform feature provides 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
Animation feature exists in all the Divi default modules. It is also available in the divi Image Hotspots module. It has seven different effects and other options to adjust the beauty of the animated section.
Global Advanced Tab
the advanced tab has 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.
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
There are three custom CSS areas in the 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.
Condition
The conditions feature allows you to hide or show any module based on post info, location, user, interaction, and device.
Visibility
The advanced setting’s visibility option allows designers to hide the Image Hotspots 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.
Scroll Effects
If you wish to give a scroll effect to your Image hotspots 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.
NOTE
Mobile: Any setting with 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.
