The Image Hotspot Gutenberg block by Getwid WordPress blocks allows you to place animated pointers with tooltips over images to provide more details about specific parts of the image.
You can add unlimited hotspots to activate tooltips, customize their style and behavior, change hotspot icons, etc.
See also: Image Hotspot widget for Elementor
Purpose of the Image Hotspot Gutenberg block
You can use this block to make images more interactive and digestible. Here are a few examples:
- Culinary recipes.
- Panorama images.
- Architectural design.
- Web design.
- Floor plans, etc.
Watch Image Hotspot Block video review
Image Hotspot Gutenberg block Features
To start working with the block, add an image, apply either a full or wide-width layout and drop points to the manually selected image areas.
You can go with a custom look for each specific pointer:
- In the “Content” tab, you can put a title and subtitle, optionally link a tooltip with the ability to open it in a new tab.
- The “Position” menu allows you to manually change the position of an item (pointer) by setting precise parameters or select a tooltip position from predefined ones (top, right, bottom, left). You can also set a maximum width for the popup. Moreover, it’s possible to simply drag and drop the hotspot icons to choose the preferable position.
- Use the built-in library of the Font Awesome icons to change a default icon and customize its colors.
To set the default behavior for tooltips and pointers, go to the main “Settings” menu from the block configuration panel. There are tons of things you can control:
- Customize the size of the image.
- The tooltips are activated when clicked or on hover.
- Set a preferable tooltip style (dark, light with border, Google, dark with transparency).
- Enable or disable tooltip arrows.
- Change size and spacing for hotspot icons.
- Select preferable icon colors.
- Apply the needed tooltip animation effect.
- Optionally make the hotspot icons dynamic by applying pulse animation, adding animation on appearance and on hover.
- You can use different colors for hotpot icons to distinguish semantic categories.
- Tooltips activated on hover are faster for website visitors to preview.
Download Getwid Base Gutenberg Theme for Getwid
If you are looking for a slick and stylish WordPress Gutenberg theme that works smoothly with the Getwid Blocks plugin, we recommend that you go with the official Getwid Base Starter theme. The theme comes with all block samples designed to suit its design out of the box.
Check out Getwid WordPress Blocks Demo
Download Getwid Gutenberg Blocks Free
Install Getwid Base Starter Theme for Gutenberg