Elementor Image Hotspot Widget

Key Features of the Elementor Image Hotspot Widget

• Interactive Hotspots: Place clickable hotspots over any image to reveal extra information.
• Multiple Media Options: Choose from icons, images, or even custom media to represent each hotspot.
• Tooltip Functionality: Show a tooltip with additional text when users hover over a hotspot.
• Customizable Styles: Full control over the design of the image, hotspots, and tooltips.
• Responsive Design: The widget adapts perfectly to different screen sizes, ensuring usability across devices.

What’s Needed?

To use the Elementor Image Hotspot Widget, you will need:

• Elementor Free Version: The core page builder plugin for WordPress.
• Vertex Addons for Elementor: The plugin that provides the Image Hotspot Widget.

Install and Activate the Elementor Image Hotspot Widget

To activate the Elementor Image Hotspot Widget, please refer to our Widget Activation Guide.

How to Configure the Elementor Image Hotspot Widget in Elementor

Let’s walk through the steps to configure the Elementor Image Hotspot Widget in Elementor, from setting up the content to fine-tuning the design.

Step 1: Add the Widget

First, drag and drop the Image Hotspot Widget from the Elementor panel to your desired section on the page.

Content Tab Configuration

In the Content tab, you will set up the main elements of the widget, such as the image and the hotspots:

1. Image:
   • Click on the “Choose Image” button to upload or select the image you want to use. This image will serve as the background for the hotspots.
2. Image Resolution:
   • This option allows you to control the resolution or quality of the image. Choose the appropriate setting based on your image’s intended use.
3. Hotspots:
   • Under this section, you’ll manage each hotspot you want to add to your image. Hotspots can be used to highlight specific parts of the image and provide more information.
   Items for Each Hotspot:
   • Media Type: You can choose between no media, an icon, or an image for each hotspot. Select the type that best suits your content.
   • Offset: Adjust the position of each hotspot on the image. You can move it horizontally or vertically to place it exactly where needed.
   • Show Tooltip: Enable or disable the tooltip feature. The tooltip will display additional text when the user hovers over the hotspot.
   • Tooltip Text: If the tooltip is enabled, input the text that will appear when the user hovers over the hotspot.

Style Tab Configuration

Now that you’ve set up your content, head to the Style tab to customize the appearance of your image, hotspots, and tooltips.

Image Style:

• Alignment: Choose the alignment for the image (left, center, or right).
• Height: Set the height of the image.
• Width: Adjust the width of the image to fit the layout.
• Object Fit: Choose how the image should fit within its container (e.g., cover, contain).
• Padding: Adjust the padding around the image to control spacing.
• Border Type: Select the type of border (if any) for the image.
• Border Radius: Round the corners of the image for a softer appearance.
• Box Shadow: Add a shadow effect to the image to make it stand out.

Spot Style:

• Media Size: Adjust the size of the icon or image used for the hotspot.
• Background Size: Control the size of the background for the hotspot icon or image.

Normal State:

• Background Color: Choose a background color for the hotspot in its normal state.
• Text Color: Set the color of the text in the tooltip (if enabled) in its normal state.
• Border Type: Choose a border type for the hotspot in its normal state.
• Border Radius: Adjust the corner radius of the hotspot’s border for rounded edges.
• Box Shadow: Apply a shadow to the hotspot for depth.

Hover State:

• Background Color: Define the background color for the hotspot when hovered over.
• Text Color: Choose the text color when the hotspot is hovered.
• Border Color: Change the border color when the hotspot is hovered.
• Border Type: Select a border type for the hover state.
• Border Radius: Adjust the radius of the hotspot’s border on hover.
• Box Shadow: Apply a hover effect shadow to make the hotspot stand out.

Tooltip Style:

• Background Color: Choose a background color for the tooltip.
• Text Color: Set the color of the text inside the tooltip.
• Typography: Customize the font, size, and weight of the tooltip text.
• Alignment: Adjust the tooltip’s text alignment (left, center, or right).
• Width: Control the width of the tooltip.
• Padding: Adjust the padding inside the tooltip for better text spacing.
• Border Radius: Round the corners of the tooltip box for a softer look.
• Box Shadow: Add a shadow to the tooltip to make it more prominent.

Advanced Tab Configuration

The Advanced tab includes common advanced options for all widgets, allowing for more detailed customization:

• Margin: Adjust the outer spacing of the widget relative to other elements on the page.
• Padding: Set the inner spacing to control the area around the widget’s content.
• Custom CSS: If you need more advanced design options, you can apply custom CSS for full personalization of the widget.

Final Outcome

Once you’ve configured your widget, you will have a fully interactive image with hotspots. Each hotspot can contain unique icons, images, and tooltips, offering a dynamic and engaging user experience.