Image Hotspot

Getwid Blocks: Image Hotspot Gutenberg Block

Home > Blog > Getwid Gutenberg Blocks > Getwid Blocks: Image Hotspot Gutenberg Block

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

image hotspot gutenberg block featured

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.
  • Maps.
  • 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.

placing image hotspot block markers

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.

hotspot content

  • 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.

hotspot position

  • Use the built-in library of the Font Awesome icons to change a default icon and customize its colors.

style hotspot image gutenberg block

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.

image hotspot settings

Design tips

  • 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.

Useful links:

Check out Getwid WordPress Blocks Demo

Download Getwid Gutenberg Blocks Free

Install Getwid Base Starter Theme for Gutenberg

Getwid Video Tutorials

Was this article helpful?

Yes No

You have already left your review.

6 Replies to “Getwid Blocks: Image Hotspot Gutenberg Block”

  1. Hello guys,

    Thanks for the great tool. One question: My icons are on mobile screens more to the right on the image then on desktop version. Is this known, or do you know how i can fix this?

    1. Hi Karim, The position of the hotspots should be the same on all devices. You may contact our support team providing an example. Thanks.

  2. After installing the newest update to Getwid, I can no longer modify specific hotspots on the same image, including using different icons and modifying the content, once the hotspot has been created. Luckily I had backed up my site prior to updating, so was able to go back to the previous version.
    Please fix.

    1. Pamela, a huge thank you for your feedback! We have been already working on this issue. We’ll try to fix it asap.

    2. Pamela, we’ve tried to figure out the issues you had experienced while editing. The interface was changed and now in order to modify the specific hotspot, you should select a point, click a pencil icon in the block toolbar and there will be three tabs with the settings. Please, make sure you followed the same sequence.

    3. I had a similar image with image hotspots. Once I created the block and made it be a reusable block, it was no longer editable. I had to remove the block from Reusable Blocks and then make the edit to all the pages where I had installed that dynamic block.

Leave a Reply

Your email address will not be published. Required fields are marked *