{"id":3547,"date":"2020-02-26T11:19:55","date_gmt":"2020-02-26T11:19:55","guid":{"rendered":"https:\/\/elements.getwid.getmotopress.com\/?page_id=3547"},"modified":"2025-10-06T02:55:58","modified_gmt":"2025-10-06T00:55:58","slug":"image-hotspot-wordpress-block","status":"publish","type":"page","link":"https:\/\/reservasincreibledemo.shop\/hotelboutique\/blocks-03\/image-hotspot-wordpress-block\/","title":{"rendered":"Image Hotspot WordPress Block"},"content":{"rendered":"\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>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\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 loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"900\" src=\"https:\/\/reservasincreibledemo.shop\/hotelboutique\/wp-content\/uploads\/sites\/32\/2020\/02\/image-03.jpg\" alt=\"\" class=\"wp-block-getwid-image-hotspot__image wp-image-3456\" srcset=\"https:\/\/reservasincreibledemo.shop\/hotelboutique\/wp-content\/uploads\/sites\/32\/2020\/02\/image-03.jpg 1200w, https:\/\/reservasincreibledemo.shop\/hotelboutique\/wp-content\/uploads\/sites\/32\/2020\/02\/image-03-300x225.jpg 300w, https:\/\/reservasincreibledemo.shop\/hotelboutique\/wp-content\/uploads\/sites\/32\/2020\/02\/image-03-1024x768.jpg 1024w, https:\/\/reservasincreibledemo.shop\/hotelboutique\/wp-content\/uploads\/sites\/32\/2020\/02\/image-03-768x576.jpg 768w, https:\/\/reservasincreibledemo.shop\/hotelboutique\/wp-content\/uploads\/sites\/32\/2020\/02\/image-03-892x669.jpg 892w, https:\/\/reservasincreibledemo.shop\/hotelboutique\/wp-content\/uploads\/sites\/32\/2020\/02\/image-03-600x450.jpg 600w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><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>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Custom tooltip point icon and background color, active tooltip by default, tooltip positioning.<\/p>\n\n\n\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 loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"900\" src=\"https:\/\/reservasincreibledemo.shop\/hotelboutique\/wp-content\/uploads\/sites\/32\/2020\/02\/image-01.jpg\" alt=\"\" class=\"wp-block-getwid-image-hotspot__image wp-image-3454\" srcset=\"https:\/\/reservasincreibledemo.shop\/hotelboutique\/wp-content\/uploads\/sites\/32\/2020\/02\/image-01.jpg 1200w, https:\/\/reservasincreibledemo.shop\/hotelboutique\/wp-content\/uploads\/sites\/32\/2020\/02\/image-01-300x225.jpg 300w, https:\/\/reservasincreibledemo.shop\/hotelboutique\/wp-content\/uploads\/sites\/32\/2020\/02\/image-01-1024x768.jpg 1024w, https:\/\/reservasincreibledemo.shop\/hotelboutique\/wp-content\/uploads\/sites\/32\/2020\/02\/image-01-768x576.jpg 768w, https:\/\/reservasincreibledemo.shop\/hotelboutique\/wp-content\/uploads\/sites\/32\/2020\/02\/image-01-892x669.jpg 892w, https:\/\/reservasincreibledemo.shop\/hotelboutique\/wp-content\/uploads\/sites\/32\/2020\/02\/image-01-600x450.jpg 600w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><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>\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:\/\/reservasincreibledemo.shop\/hotelboutique\/wp-json\/wp\/v2\/pages\/3547","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/reservasincreibledemo.shop\/hotelboutique\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/reservasincreibledemo.shop\/hotelboutique\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/reservasincreibledemo.shop\/hotelboutique\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/reservasincreibledemo.shop\/hotelboutique\/wp-json\/wp\/v2\/comments?post=3547"}],"version-history":[{"count":1,"href":"https:\/\/reservasincreibledemo.shop\/hotelboutique\/wp-json\/wp\/v2\/pages\/3547\/revisions"}],"predecessor-version":[{"id":4403,"href":"https:\/\/reservasincreibledemo.shop\/hotelboutique\/wp-json\/wp\/v2\/pages\/3547\/revisions\/4403"}],"up":[{"embeddable":true,"href":"https:\/\/reservasincreibledemo.shop\/hotelboutique\/wp-json\/wp\/v2\/pages\/3443"}],"wp:attachment":[{"href":"https:\/\/reservasincreibledemo.shop\/hotelboutique\/wp-json\/wp\/v2\/media?parent=3547"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}