image hot spot

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.

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.

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

Leave a Reply

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