{"id":3547,"date":"2025-09-19T22:08:05","date_gmt":"2025-09-19T21:08:05","guid":{"rendered":"https:\/\/freebusinesscoaching.co.uk\/?page_id=3547"},"modified":"2025-09-19T22:08:05","modified_gmt":"2025-09-19T21:08:05","slug":"image-hotspot-wordpress-block","status":"publish","type":"page","link":"https:\/\/freebusinesscoaching.co.uk\/?page_id=3547","title":{"rendered":"Image Hotspot WordPress Block"},"content":{"rendered":"\r\n<p><strong>Image Hotspot WordPress Block<\/strong> is a one-of-a-kind block for the Gutenberg library that allows for placing any number of animated markers\/tooltips over images to make them more instructive.<\/p>\r\n\r\n\r\n\r\n<div style=\\\\\\\"height:50px\\\\\\\" aria-hidden=\\\\\\\"true\\\\\\\" class=\\\\\\\"wp-block-spacer\\\\\\\"><\/div>\r\n\r\n\r\n\r\n<div class=\\\\\\\"wp-block-getwid-image-hotspot alignwide has-animated-dots\\\\\\\" data-appearance-animation=\\\\\\\"slideDown\\\\\\\" data-image-points=\\\\\\\"[{&quot;title&quot;:&quot;Site Header&quot;,&quot;link&quot;:&quot;https:\/\/en.wikipedia.org\/wiki\/Header&quot;,&quot;newTab&quot;:true,&quot;content&quot;:&quot;A website header sits at the top of each page and serves a few very important purposes. ... Overall, a good header makes your website easier to navigate, establishes your brand, and creates a consistent browsing experience throughout your website.&quot;,&quot;popUpOpen&quot;:false,&quot;popUpWidth&quot;:350,&quot;placement&quot;:&quot;top&quot;,&quot;position&quot;:{&quot;x&quot;:&quot;23.55%&quot;,&quot;y&quot;:&quot;24.84%&quot;},&quot;icon&quot;:&quot;&quot;,&quot;color&quot;:&quot;&quot;,&quot;backgroundColor&quot;:&quot;&quot;},{&quot;title&quot;:&quot;Menu&quot;,&quot;link&quot;:&quot;&quot;,&quot;newTab&quot;:false,&quot;content&quot;:&quot;The Site Menu appears on every page of a site. It provides a set of convenient links to make navigating your site easier.&quot;,&quot;popUpOpen&quot;:false,&quot;popUpWidth&quot;:350,&quot;placement&quot;:&quot;top&quot;,&quot;position&quot;:{&quot;x&quot;:&quot;71.27%&quot;,&quot;y&quot;:&quot;27.48%&quot;},&quot;icon&quot;:&quot;&quot;,&quot;color&quot;:&quot;&quot;,&quot;backgroundColor&quot;:&quot;&quot;},{&quot;title&quot;:&quot;Site Content&quot;,&quot;link&quot;:&quot;&quot;,&quot;newTab&quot;:false,&quot;content&quot;:&quot;Web content is the textual, &lt;a href=&amp;quot;#&amp;quot;&amp;&gt;visual&lt;\/a&gt;, or aural content that is encountered as part of the user experience on websites.&quot;,&quot;popUpOpen&quot;:false,&quot;popUpWidth&quot;:350,&quot;placement&quot;:&quot;top&quot;,&quot;position&quot;:{&quot;x&quot;:&quot;55.36%&quot;,&quot;y&quot;:&quot;62.89%&quot;},&quot;icon&quot;:&quot;&quot;,&quot;color&quot;:&quot;&quot;,&quot;backgroundColor&quot;:&quot;&quot;}]\\\\\\\" data-trigger=\\\\\\\"click\\\\\\\" data-theme=\\\\\\\"dark\\\\\\\" data-tooltip-animation=\\\\\\\"shift-toward\\\\\\\" data-arrow=\\\\\\\"true\\\\\\\"><div class=\\\\\\\"wp-block-getwid-image-hotspot__wrapper\\\\\\\"><img src=\\\\\\\"https:\/\/themes.getmotopress.com\/coachzee-teacher\/wp-content\/uploads\/sites\/47\/2020\/02\/image-03.jpg\\\\\\\" alt=\\\\\\\"\\\\\\\" class=\\\\\\\"wp-block-getwid-image-hotspot__image wp-image-3456\\\\\\\"\/><div data-point-id=\\\\\\\"0\\\\\\\" class=\\\\\\\"wp-block-getwid-image-hotspot__dot has-animation-pulse\\\\\\\" style=\\\\\\\"left:23.55%;top:24.84%\\\\\\\"><div class=\\\\\\\"wp-block-getwid-image-hotspot__dot-wrapper\\\\\\\"><div class=\\\\\\\"wp-block-getwid-image-hotspot__dot-content\\\\\\\"><i class=\\\\\\\"fas fa-plus wp-block-getwid-image-hotspot__dot-icon\\\\\\\"><\/i><\/div><\/div><div class=\\\\\\\"wp-block-getwid-image-hotspot__dot-description\\\\\\\"><div class=\\\\\\\"wp-block-getwid-image-hotspot__dot-title\\\\\\\"><a href=\\\\\\\"https:\/\/en.wikipedia.org\/wiki\/Header\\\\\\\" target=\\\\\\\"_blank\\\\\\\" rel=\\\\\\\"noopener noreferrer\\\\\\\">Site Header<\/a><\/div><\/div><\/div><div data-point-id=\\\\\\\"1\\\\\\\" class=\\\\\\\"wp-block-getwid-image-hotspot__dot has-animation-pulse\\\\\\\" style=\\\\\\\"left:71.27%;top:27.48%\\\\\\\"><div class=\\\\\\\"wp-block-getwid-image-hotspot__dot-wrapper\\\\\\\"><div class=\\\\\\\"wp-block-getwid-image-hotspot__dot-content\\\\\\\"><i class=\\\\\\\"fas fa-plus wp-block-getwid-image-hotspot__dot-icon\\\\\\\"><\/i><\/div><\/div><div class=\\\\\\\"wp-block-getwid-image-hotspot__dot-description\\\\\\\"><div class=\\\\\\\"wp-block-getwid-image-hotspot__dot-title\\\\\\\">Menu<\/div><\/div><\/div><div data-point-id=\\\\\\\"2\\\\\\\" class=\\\\\\\"wp-block-getwid-image-hotspot__dot has-animation-pulse\\\\\\\" style=\\\\\\\"left:55.36%;top:62.89%\\\\\\\"><div class=\\\\\\\"wp-block-getwid-image-hotspot__dot-wrapper\\\\\\\"><div class=\\\\\\\"wp-block-getwid-image-hotspot__dot-content\\\\\\\"><i class=\\\\\\\"fas fa-plus wp-block-getwid-image-hotspot__dot-icon\\\\\\\"><\/i><\/div><\/div><div class=\\\\\\\"wp-block-getwid-image-hotspot__dot-description\\\\\\\"><div class=\\\\\\\"wp-block-getwid-image-hotspot__dot-title\\\\\\\">Site Content<\/div><\/div><\/div><\/div><\/div>\r\n\r\n\r\n\r\n<div style=\\\\\\\"height:50px\\\\\\\" aria-hidden=\\\\\\\"true\\\\\\\" class=\\\\\\\"wp-block-spacer\\\\\\\"><\/div>\r\n\r\n\r\n\r\n<p>Custom tooltip point icon and background color, active tooltip by default, tooltip positioning.<\/p>\r\n\r\n\r\n\r\n<div class=\\\\\\\"wp-block-getwid-image-hotspot alignwide has-animated-dots\\\\\\\" data-appearance-animation=\\\\\\\"zoomIn\\\\\\\" data-image-points=\\\\\\\"[{&quot;title&quot;:&quot;Site Header&quot;,&quot;link&quot;:&quot;&quot;,&quot;newTab&quot;:false,&quot;content&quot;:&quot;A website header sits at the top of each page and serves a few very important purposes. ... Overall, a good header makes your website easier to navigate, establishes your brand, and creates a consistent browsing experience throughout your website.&quot;,&quot;popUpOpen&quot;:false,&quot;popUpWidth&quot;:350,&quot;placement&quot;:&quot;right&quot;,&quot;position&quot;:{&quot;x&quot;:&quot;38.45%&quot;,&quot;y&quot;:&quot;32.45%&quot;},&quot;icon&quot;:&quot;fab fa-apple&quot;,&quot;color&quot;:&quot;&quot;,&quot;backgroundColor&quot;:&quot;#8c8c8c&quot;},{&quot;title&quot;:&quot;Menu&quot;,&quot;link&quot;:&quot;&quot;,&quot;newTab&quot;:false,&quot;content&quot;:&quot;The &lt;a href=&amp;quot;#&amp;quot;&amp;&gt;Site Menu&lt;\/a&gt; appears on every page of a site. It provides a set of convenient links to make navigating your site easier.&quot;,&quot;popUpOpen&quot;:true,&quot;popUpWidth&quot;:&quot;300&quot;,&quot;placement&quot;:&quot;top&quot;,&quot;position&quot;:{&quot;x&quot;:&quot;75.36%&quot;,&quot;y&quot;:&quot;52.48%&quot;},&quot;icon&quot;:&quot;fab fa-amazon&quot;,&quot;color&quot;:&quot;#ffffff&quot;,&quot;backgroundColor&quot;:&quot;#ff9900&quot;},{&quot;title&quot;:&quot;Site Content&quot;,&quot;link&quot;:&quot;&quot;,&quot;newTab&quot;:false,&quot;content&quot;:&quot;Web content is the textual, visual, or aural content that is encountered as part of the user experience on websites.&quot;,&quot;popUpOpen&quot;:false,&quot;popUpWidth&quot;:350,&quot;placement&quot;:&quot;bottom&quot;,&quot;position&quot;:{&quot;x&quot;:&quot;17.36%&quot;,&quot;y&quot;:&quot;53.73%&quot;},&quot;icon&quot;:&quot;fab fa-wordpress-simple&quot;,&quot;color&quot;:&quot;&quot;,&quot;backgroundColor&quot;:&quot;#146eb4&quot;}]\\\\\\\" data-trigger=\\\\\\\"multiple\\\\\\\" data-theme=\\\\\\\"light-border\\\\\\\" data-tooltip-animation=\\\\\\\"shift-toward\\\\\\\" data-arrow=\\\\\\\"true\\\\\\\"><div class=\\\\\\\"wp-block-getwid-image-hotspot__wrapper\\\\\\\"><img src=\\\\\\\"https:\/\/themes.getmotopress.com\/coachzee-teacher\/wp-content\/uploads\/sites\/47\/2020\/02\/image-01.jpg\\\\\\\" alt=\\\\\\\"\\\\\\\" class=\\\\\\\"wp-block-getwid-image-hotspot__image wp-image-3454\\\\\\\"\/><div data-point-id=\\\\\\\"0\\\\\\\" class=\\\\\\\"wp-block-getwid-image-hotspot__dot has-animation-pulse\\\\\\\" style=\\\\\\\"padding:12px;left:38.45%;top:32.45%;background-color:#8c8c8c\\\\\\\"><div class=\\\\\\\"wp-block-getwid-image-hotspot__dot-wrapper\\\\\\\"><div style=\\\\\\\"font-size:32px\\\\\\\" class=\\\\\\\"wp-block-getwid-image-hotspot__dot-content\\\\\\\"><i class=\\\\\\\"fab fa-apple wp-block-getwid-image-hotspot__dot-icon\\\\\\\"><\/i><\/div><\/div><div class=\\\\\\\"wp-block-getwid-image-hotspot__dot-description\\\\\\\"><div class=\\\\\\\"wp-block-getwid-image-hotspot__dot-title\\\\\\\">Site Header<\/div><\/div><\/div><div data-point-id=\\\\\\\"1\\\\\\\" class=\\\\\\\"wp-block-getwid-image-hotspot__dot has-animation-pulse\\\\\\\" style=\\\\\\\"padding:12px;left:75.36%;top:52.48%;background-color:#ff9900\\\\\\\"><div class=\\\\\\\"wp-block-getwid-image-hotspot__dot-wrapper\\\\\\\"><div style=\\\\\\\"color:#ffffff;font-size:32px\\\\\\\" class=\\\\\\\"wp-block-getwid-image-hotspot__dot-content\\\\\\\"><i class=\\\\\\\"fab fa-amazon wp-block-getwid-image-hotspot__dot-icon\\\\\\\"><\/i><\/div><\/div><div class=\\\\\\\"wp-block-getwid-image-hotspot__dot-description\\\\\\\"><div class=\\\\\\\"wp-block-getwid-image-hotspot__dot-title\\\\\\\">Menu<\/div><\/div><\/div><div data-point-id=\\\\\\\"2\\\\\\\" class=\\\\\\\"wp-block-getwid-image-hotspot__dot has-animation-pulse\\\\\\\" style=\\\\\\\"padding:12px;left:17.36%;top:53.73%;background-color:#146eb4\\\\\\\"><div class=\\\\\\\"wp-block-getwid-image-hotspot__dot-wrapper\\\\\\\"><div style=\\\\\\\"font-size:32px\\\\\\\" class=\\\\\\\"wp-block-getwid-image-hotspot__dot-content\\\\\\\"><i class=\\\\\\\"fab fa-wordpress-simple wp-block-getwid-image-hotspot__dot-icon\\\\\\\"><\/i><\/div><\/div><div class=\\\\\\\"wp-block-getwid-image-hotspot__dot-description\\\\\\\"><div class=\\\\\\\"wp-block-getwid-image-hotspot__dot-title\\\\\\\">Site Content<\/div><\/div><\/div><\/div><\/div>\r\n","protected":false},"excerpt":{"rendered":"<p>Image Hotspot WordPress Block is a one-of-a-kind block for the Gutenberg library that allows for placing any number of animated markers\/tooltips over images to make them more instructive. Custom tooltip point icon and background color, active tooltip by default, tooltip positioning.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":3443,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-3547","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freebusinesscoaching.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/3547","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freebusinesscoaching.co.uk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/freebusinesscoaching.co.uk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/freebusinesscoaching.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freebusinesscoaching.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3547"}],"version-history":[{"count":0,"href":"https:\/\/freebusinesscoaching.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/3547\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/freebusinesscoaching.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/3443"}],"wp:attachment":[{"href":"https:\/\/freebusinesscoaching.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3547"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}