The DiviFlash Image Hotspot module allows you to create interactive images with clickable hotspots that reveal additional information.
Activation Required: This module is disabled by default. To use it, you need to enable it manually. Refer to our guide for step-by-step instructions.
Let’s see the settings in brief and how to make better use of it —
Content Tab
This tab contains the essential settings to add and configure image hotspots.
Add New Item
Click the + Add New Item button to create a new hotspot. This opens the Image Hotspot Item Settings, where you can add content and style each hotspot individually. To learn more about adding and customizing individual image hotspot items, click here.
Main Image
Upload the main image and add its alt text.
Tooltip Settings
- Tooltip: Enable this option to use tooltips for the image hotspots.
- Arrow: Enable this option to use arrows in the tooltips.
- Placement: Choose the placement of the tooltips relative to the hotspots.
- Animation: Choose a reveal and closing animation for the tooltip.
- Trigger: Choose what action will trigger the tooltips.
- Hover Over Tooltip: Enable this option to customize the hover area for tooltips.
- Tooltip Hover Area: Adjust the size of the invisible border around the tooltip that will prevent it from hiding if the cursor leaves it.
- Tooltip Content Hide Delay: Sets the delay before the tooltip content is hidden when the cursor moves away.
- Follow Cursor: Enable the tooltip to follow the cursor.
- Max Width: Set a maximum width limit for the tooltips.
- Tooltip Distance: Enable this to customize the tooltips and their arrow distance from the hotspots.
Background: Add a background color, gradient, image, video, pattern, or mask to the module.
Element Label: Rename the module to organize it more easily in the Divi Builder. (Only you can see this label.)
Design Tab
This tab lets you style and customize the appearance of the module.
Module Alignment: Change the horizontal placement of the module respective to its container.
Main Image Style: Border options for the main image.
Spot: Background, typography, and border options for the hotspots.
Spot Icon/Image: Color, size, and border options for the spot icons or images.
Tooltip Text: Typography options for the tooltip body content.
Tooltip Heading Text: Typography options for the tooltip headings.
Tooltip: Color and border options for the tooltip.
Spacing: Adjust the width, height, and alignment of the module.
Sizing: Add custom margin and padding to the module’s container.
Border: Customize the border style, width, and color. And style each border separately or apply the same style to all sides.
Box Shadow: Add shadow effects to the module.
Filters: Apply color filters to enhance the appearance.
Transform: Scale, rotate, move, or skew the module.
Animation: Apply reveal animation effects and customize delay, duration, repeat settings, and animation type.
Advanced Tab
This tab provides additional settings for advanced users who want greater control over the module with custom code, conditions, and more.
Image Hotspot Item Settings
Each hotspot acts as a child of the main module, and item-level settings override the module-level settings.
Content Tab
Spot Content
Spot Type: Choose the content type of the hotspot. You can keep it blank, use text, icon, or image as icon.
Spot Settings
- Left Position: Adjust the horizontal position of the hotspot.
- Top Position: Adjust the vertical position of the hotspot.
- Variable Width: Enable this option to customize the width of the hotspot.
- Max Spot Width: Set a maximum width for the hotspot.
- Spot Animation: Enable this option to apply an animation effect and customize the color of the effect.
Tooltip Content: Add the content of the tooltip.
Spot Background: Add a background color, gradient, or an image to the background of the hotspot.
Link: Comes by default with Divi. No real use case.
Element Label: Change the module name or label if required which will only be visible to you.
Design Tab
Spot Text: Typography options for the text of the hotspot.
Spot Icon/Image: Color, size, and border options for the spot icon or image.
Spacing: Adjust margins and padding for the hotspot container.
Border: Customize hotspot borders with radius, style, width, and color.
Box Shadow: Add shadow effects to the hotspot.
Transform: Adjust scale, position, rotation, and size for the hotspot.
Advanced Tab
This tab provides additional settings for advanced users who want greater control over each specific image hotspot option.
Need Help?
If you have any questions or need assistance, contact our support team: [email protected]