{"id":20752,"date":"2025-12-17T12:46:15","date_gmt":"2025-12-17T12:46:15","guid":{"rendered":"https:\/\/essential-blocks.com\/?post_type=docs&p=20752"},"modified":"2025-12-17T12:46:18","modified_gmt":"2025-12-17T12:46:18","password":"","slug":"eb-image-hotspots","status":"publish","type":"docs","link":"https:\/\/essential-blocks.com\/docs\/eb-image-hotspots\/","title":{"rendered":"EB Image Hotspots"},"content":{"rendered":"\n

EB Image Hotspots<\/strong><\/a> helps you easily highlight images with interactive hotspots, including custom tooltips, pins, and more, to showcase details, pricing, tags, or links. You can set custom tooltip content, adjust positions, add animations, and more to make your image hotspots engaging for your site visitors.\u00a0<\/p>\n\n\n\n

Follow the step\u2011by\u2011step guidelines below to configure and style your EB Image Hotspots.<\/p>\n\n\n\n

How To Activate The EB Image Hotspots Block?<\/strong><\/h2>\n\n\n\n

To activate the Image hotspot, navigate to Essential Blocks \u2192 Blocks<\/strong>. Then, from the Creative Blocks<\/strong> section, toggle to enable the block as shown below.<\/p>\n\n\n\n

\"How
<\/figcaption><\/figure>\n\n\n\n

Note:<\/em><\/strong> Image hotspot is a freemium block. <\/em>Install and activate the Essential Blocks PRO<\/em><\/strong><\/a> plugin on your website along with the free version.<\/em><\/p>\n\n\n\n

How To Configure Image Hotspot In Gutenberg?<\/strong><\/h2>\n\n\n\n

Open the page or post where you want to display your image hotspot, then add the EB Image Hotspots block to that section. Search for the \u2018Image Hotspot\u2019<\/strong> block and insert it into the desired section. <\/p>\n\n\n\n

After that, tap \u2018Add Hotspot\u2019<\/strong>, which will place a hotspot at the position you selected.<\/p>\n\n\n\n

\"How
<\/figcaption><\/figure>\n\n\n\n

General<\/strong><\/h3>\n\n\n\n

Once you\u2019ve added your image hotspot, navigate to the Block\u2192 General tab<\/strong>. Under this tab, you can customize your image hotspot. Use the different tab to configure the image hotspot. Below are the available settings:<\/p>\n\n\n\n

\"Image
<\/figcaption><\/figure>\n\n\n\n

Image<\/strong><\/h4>\n\n\n\n

You can add your preferred image by clicking the Replace<\/strong> button shown below. Besides, you can adjust the added image from the image settings. Here you can choose the styles of the image and sizes and adjust more settings according to your preferences.\u00a0<\/p>\n\n\n\n

\"adjust
<\/figcaption><\/figure>\n\n\n\n

You can also add multiple hotspots using the Image Hotspots block, allowing you to highlight several key areas of an image.<\/p>\n\n\n\n

Hotspots<\/strong><\/h4>\n\n\n\n

You can add multiple hotspots using the \u2018Add Hotspot\u2019<\/strong> button. And each new hotspot section comes with three separate tabs displaying \u2018Content\u2019<\/strong>, \u2018Position\u2019<\/strong>, and \u2018Tooltip\u2019<\/strong>. <\/p>\n\n\n\n

\"Image
<\/figcaption><\/figure>\n\n\n\n

In the \u2018Content\u2019<\/strong> section, you can choose the type of content to display, such as text, an icon, or a blank hotspot. You can also add a link and choose whether the hotspot should open in a new tab.<\/p>\n\n\n\n

\"Hotspot
<\/figcaption><\/figure>\n\n\n\n

Use the \u2018Position\u2019<\/strong> option to choose where you want to place your image hotspot marker. The X and Y controls<\/strong> let you adjust the marker\u2019s position along the horizontal and vertical axes.<\/p>\n\n\n\n

\"Image
<\/figcaption><\/figure>\n\n\n\n

You can also enable the \u2018Tooltip\u2019<\/strong>, which displays a dialog box when visitors hover over the hotspot. From the \u2018Media Type\u2019<\/strong>, you can customize the tooltip by adding an icon or image, and you can set your own tooltip title, content and URL based on your preferences.<\/p>\n\n\n\n

\"customize
<\/figcaption><\/figure>\n\n\n\n

If you want, you can also choose a preferred \u2018Marker Animation\u2019<\/strong> to add extra visual effects to your image hotspots. There are 7 animation styles<\/strong> available and you can add them based on your preference.<\/p>\n\n\n\n

\"Marker
<\/figcaption><\/figure>\n\n\n\n

Tooltip<\/strong><\/h4>\n\n\n\n

You can also customize the Tooltip and toggle the \u2018Show Arrow\u2019<\/strong> option on or off and use the drop\u2011down menu to set the tooltip position to Top, Bottom, Left or Right<\/strong>.<\/p>\n\n\n\n

Use the \u2018Always Visible Tooltip\u2019<\/strong> toggle to control whether the tooltip is always visible.<\/p>\n\n\n\n

You can also customize how the tooltip appears using the \u2018Trigger<\/strong>\u2019 option and you can add visual effects using the \u2018Animation\u2019<\/strong> settings. You can also set the Animation Duration and Animation Delay according to your preferences.<\/p>\n\n\n\n

\"Tooltip
<\/figcaption><\/figure>\n\n\n\n

After configuring the tooltip, be sure to save<\/strong> your changes.<\/p>\n\n\n\n

Final Outcome<\/strong><\/h2>\n\n\n\n

By following this guide, you have learned how to add and configure the Image Hotspot block in the Gutenberg Page Builder. <\/p>\n\n\n\n

\"Final
<\/figcaption><\/figure>\n\n\n\n

This is how you can beautifully showcase your image hotspots section on your WordPress website using EB Image Hotspots. <\/p>\n\n\n\n

Getting stuck? Feel free to Contact Our Support<\/strong><\/a> for further assistance.<\/p>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

EB Image Hotspots helps you highlight key areas of any image with interactive hotspots, custom tooltips, animations and flexible styling options.<\/p>\n","protected":false},"author":42,"featured_media":20767,"template":"","meta":{"_eb_attr":"","inline_featured_image":false,"_eb_data_table":"","footnotes":""},"doc_category":[11,162],"doc_tag":[1194,14,593,12,13,16],"class_list":["post-20752","docs","type-docs","status-publish","has-post-thumbnail","hentry","doc_category-configurations","doc_category-creative-blocks","doc_tag-animation-effects","doc_tag-block","doc_tag-essential-blocks-pro","doc_tag-gutenberg","doc_tag-gutenberg-block","doc_tag-wordpress"],"year_month":"2026-04","word_count":605,"total_views":"82","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Fatin","author_nicename":"fatin","author_url":"https:\/\/essential-blocks.com\/author\/fatin\/"},"doc_category_info":[{"term_name":"Configurations","term_url":"https:\/\/essential-blocks.com\/docs-category\/configurations\/"},{"term_name":"Creative Blocks","term_url":"https:\/\/essential-blocks.com\/docs-category\/creative-blocks\/"}],"doc_tag_info":[{"term_name":"Animation Effects","term_url":"https:\/\/essential-blocks.com\/docs-tag\/animation-effects\/"},{"term_name":"block","term_url":"https:\/\/essential-blocks.com\/docs-tag\/block\/"},{"term_name":"Essential Blocks PRO","term_url":"https:\/\/essential-blocks.com\/docs-tag\/essential-blocks-pro\/"},{"term_name":"gutenberg","term_url":"https:\/\/essential-blocks.com\/docs-tag\/gutenberg\/"},{"term_name":"gutenberg block","term_url":"https:\/\/essential-blocks.com\/docs-tag\/gutenberg-block\/"},{"term_name":"WordPress","term_url":"https:\/\/essential-blocks.com\/docs-tag\/wordpress\/"}],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/docs\/20752","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/users\/42"}],"version-history":[{"count":1,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/docs\/20752\/revisions"}],"predecessor-version":[{"id":20768,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/docs\/20752\/revisions\/20768"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/media\/20767"}],"wp:attachment":[{"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/media?parent=20752"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/doc_category?post=20752"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/essential-blocks.com\/wp-json\/wp\/v2\/doc_tag?post=20752"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}