Image Hotspot

Once WPMozo Widgets is activated it adds a number of widgets to the Elementor builder. To insert the widget, use the following steps.

Create/edit a page/post that uses Elementor builder.
Create/edit container.
Search widget Image Hotspot under WPMozo.

Content

The Image Hotspot Widget allows you to create interactive images with clickable hotspots. These hotspots can be used to display additional information.

Hotspot Marker

Hotspot Marker Item
This is where you add individual hotspot markers on your image. You can add multiple items by clicking the “Add Item” button. Each item represents a clickable point on the image.To create a new marker, click on “Add Item”, and customize its position, content, and style in subsequent settings.

Hotspot Marker Type

Marker Type:

Defines the type of marker used to indicate the hotspot on the image.
You can choose from the following options:
- Icon: Select a pre-defined icon to represent the hotspot.
- Text: Add a text label as the hotspot marker.
- Image: Upload an image to use as the marker.

Marker Icon

When the Icon marker type is selected, this setting allows you to choose the specific icon to display. You can browse a selection of icons and pick one that best represents your hotspot.

Marker Text (Visible when Text is selected as Marker Type)

Allows you to enter the text that will be displayed as the hotspot marker. This text will appear directly on the image and can be customized with different fonts, sizes, and styles (in the Style tab).

Marker Image (Visible when Image is selected as Marker Type)

Enables you to upload a custom image to serve as the hotspot marker. This can be any image that best suits the design of your website or represents the specific hotspot area.

Marker Settings

Marker Position Top: Adjust the top position of the marker on the image using the slider or entering a specific value.

Marker Position Left: Adjust the left position of the marker on the image. You can drag the slider or type in the exact value for precision.

Marker Shape: Choose the shape of the marker from the dropdown options:

Square: Displays the marker with a square shape.
Circle: Displays the marker with a circular shape.
None: Removes any shape, leaving the marker without a background.

Marker Styling

Icon Color: Allows you to select a color for the marker’s icon. Clicking the color box opens the color picker to customize.

Icon Font Size: Adjust the size of the marker’s icon using the slider or manually inputting a number.

Spacing

Padding: Customize the padding around the marker (Top, Right, Bottom, Left). You can input values or link them to apply uniform padding.

Box Shadow

Box Shadow: Apply shadow effects to the marker, such as color, position, blur, and spread. This adds depth to the marker’s appearance.

Filters

CSS Filters: Apply CSS filters such as blur, brightness, contrast, or grayscale to modify the marker’s visual appearance.

Tooltip Content

Tooltip Content Type: Choose the type of content you want to display inside the tooltip. You can select between:

Text
Template

Tooltip Text: This is where you can input the text that will appear inside the tooltip when users hover over the marker. You can format the text using the editor options, such as adding bold, italics, or links.

Select Template: If you choose the “Template” option for Tooltip Content, this dropdown lets you select which template to use from the available options.

Hotspot Content

Hotspot Image
This setting allows you to upload an image that will appear when someone interacts with the hotspot marker. The image will be displayed in the content section of the hotspot.

Hotspot Image Alt Text
In this field, you can provide a brief description (alternative text) for the hotspot image.