The Hotspots widget adds unlimited markers with tooltips on your image. This multipurpose tool can be useful in different cases like markers of the offices location with information about them, courses program steps, project goals, achievements, any item description shown in the picture, or for other your ideas.
For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org
Open or create a page using Elementor and drag the widget to a page using the Element editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:
Content tab
On the Content tab of the hotspots widget, you can manage the basic settings of the form such as image, hotspot, tooltip.
Image
- Choose Image – choose an image-background of your hotspots from the media library or upload your own.
- Image Size – select one of the preset image sizes and set a custom one.
Hotspot
The block allows adding, removing, or duplicating items of hotspots.
To add a new element, click “Add Item” and fill all the necessary fields for the hotspot and tooltip.
- Hotspot title – a text field to enter the hotspot name.
- Type – select one of the predefined hotspot types: Icon(select from the library or upload your own) or Text(enter your text).
- Offset top – specify the hotspot offset along the axis Y in the different unit(px,%) for all devices.
- Offset left – specify the hotspot offset along the axis X in the different unit(px,%) for all devices.
- Enable link – the toggle to enable/disable a custom link for a hotspot.
- Glow effect – the toggle to enable/disable the glow effect.
- Tooltip Width – specify the width of the current element using the slider in different units(px, %) for all devices.
- Tooltip Height – specify the height of the current element using the slider in different units(px, %) for all devices.
- Enable tooltip – the toggle to enable/disable the tooltip for the current hotspot. When the option is enabled the following settings are available.
- Position – select one of the preset tooltip position in relation to the hotspot: Top, Bottom, Left, Right. You can select Custom and manage the position via offset options.
- Tooltip spacing – specify the space between a tooltip and a hotspot using the slider.
- Tooltip content – select the type of content you want to use in the tooltip: WooCommerce Product, Post/Page, Custom(fields for your own text). Each of these types has additional options for more detailed customization.
- Content align – manage the content alignment (left, center, right).
- Tooltip arrow – the toggle to enable/disable the tooltip arrow. When the option is enabled, you can select the arrow position.
Tooltip
- Tooltip open – select the action for tooltip opening: Hover, Click.
- Animation – select one of the available tooltip animations: Grow, Shrink, Slide up, Slide down, Swing, Fade. You can adjust Easing, Delay, and Duration for any type. Сhoose None to disable the animation.
Style tab
On the Hotspots widget styles tab, you can configure everything related to the visual style of elements: colors, typography, backgrounds, borders, and more.
Image/Product image
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktop, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
NORMAL/HOVER
The image style settings for different states.
- CSS Filters – the option allows you to add various CSS filters for the image box as Blur, Brightness, Contrast, Saturation, Hue.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Tooltip/Price
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktop, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
NORMAL/HOVER
The tooltip style settings for different states.
- Color – specify the text color and opacity using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
HotSpot
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktop, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Icon offset top – specify the icon offset along the axis Y in the different unit(px,%).
- Icon offset left – specify the icon offset along the axis X in the different unit(px,%).
- Height – specify the height of the current element using the slider in different units(px, %)
- Width – specify the width of the current element using the slider in different units(px, %)
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
NORMAL/HOVER
The hotspots style settings for different states.
- Color – specify the text color and opacity using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Tooltip arrow
- Arrow size – specify the arrow size for different devices using the slider.
- Arrow Color – specify the arrow color using the slider.
Advanced Tab
The advanced tab allows you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.
Save changes
Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.
