{"id":6480,"date":"2021-07-24T13:39:34","date_gmt":"2021-07-24T11:39:34","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/hotspots-with-jettricks-add-hotspots-to-an-image\/"},"modified":"2026-09-02T19:34:21","modified_gmt":"2026-09-02T17:34:21","slug":"hotspots-with-jettricks-add-hotspots-to-an-image","status":"publish","type":"post","link":"https:\/\/lacolmenatecnologica.com\/en\/hotspots-with-jettricks-add-hotspots-to-an-image\/","title":{"rendered":"Hotspots with JetTricks: Add Hotspots to an Image"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Step-by-step video<\/h2>\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"JetTricks   Hotspots\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/DBi868er2s8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n<p class=\"wp-block-paragraph\">In this tutorial, you&#8217;ll learn how to add hotspots to any image using the <a href=\"https:\/\/crocoblock.com\/plugins\/jettricks\/\" target=\"_blank\" rel=\"noreferrer noopener\">JetTricks<\/a> plugin functionality.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"que-es-un-hotspots-17d58bab-c7f5-4926-9bff-570d8d8e030a\">What is a hotspot?<\/h2>\n\n<p class=\"wp-block-paragraph\">A hotspot is a marker placed on an image to focus the user&#8217;s attention on a specific part of it. They are typically used in online stores to provide users with links to products they see in a promotional photo. Hotspots also often support tooltips that display additional information. This guide will show you how to place hotspots on images on your website using <strong>the<\/strong> <strong>JetTricks<\/strong> widgets.   <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"paso1\">Step 1: Choose the Image<\/h2>\n\n<p class=\"wp-block-paragraph\">Go to the dashboard and find the page or post where you want to add an image with hotspots. Edit it with Elementor. Find the <strong>Hotspots<\/strong> widget in the widget menu on the left side. Drag and drop it onto the page.   <\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"359\" height=\"277\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/hotspot-widget-elementor.png\" alt=\"Hotspots widget\" class=\"wp-image-5018\"\/><\/figure>\n<\/div>\n<p class=\"wp-block-paragraph\">Choose the image you want to serve as the base for your hotspots. It&#8217;s best to use high-resolution, good-quality photos if you want this part of the page to look really good. <\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"358\" height=\"607\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/hotspot-widget-elementor-2.jpg\" alt=\"Hotspots JetTricks Crocoblock\" class=\"wp-image-5019\" srcset=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/hotspot-widget-elementor-2.jpg 358w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/hotspot-widget-elementor-2-295x500.jpg 295w\" sizes=\"auto, (max-width: 358px) 100vw, 358px\" \/><\/figure>\n<\/div>\n<h2 class=\"wp-block-heading\" id=\"2\">Step 2: Choose the Image<\/h2>\n\n<p class=\"wp-block-paragraph\">As you can see, a hotspot is created by default and placed in the center of an image. Let&#8217;s go to the <strong>Hotspots<\/strong> section and click on <strong>Item #1<\/strong>. <\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"358\" height=\"628\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/hotspot-widget-elementor-3.jpg\" alt=\"Hotspots JetTricks Crocoblock\" class=\"wp-image-5013\" srcset=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/hotspot-widget-elementor-3.jpg 358w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/hotspot-widget-elementor-3-285x500.jpg 285w\" sizes=\"auto, (max-width: 358px) 100vw, 358px\" \/><\/figure>\n<\/div>\n<p class=\"wp-block-paragraph\">First, here you can change the <strong>content<\/strong> or <strong>position<\/strong> of a hotspot. You should probably start with the <strong>Content<\/strong>. <\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Icon<\/strong>: you can choose one from the icon library, upload an SVG file, or even choose not to use any icon.<\/li>\n\n\n\n<li><strong>Text<\/strong>: the data you enter here will be displayed alongside the icon on the hotspot.<\/li>\n\n\n\n<li><strong>Description<\/strong>: the text you insert in this text area will be displayed as the tooltip for this hotspot.<\/li>\n\n\n\n<li><strong>Link<\/strong>: you can choose where the user will be directed when they click on the hotspot (link to another page, link to an image, popup, or leave it empty)<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">To change the <strong>position<\/strong>, you have two sliders: <strong>Horizontal Position (%)<\/strong> and <strong>Vertical Position (%)<\/strong>. You can move the hotspot by dragging a slider horizontally or entering the values as percentages. <\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"337\" height=\"276\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/hotspot-widget-elementor-4.jpg\" alt=\"Hotspots JetTricks Crocoblock\" class=\"wp-image-5014\"\/><\/figure>\n<\/div>\n<p class=\"wp-block-paragraph\">You can add (or duplicate an existing one) as many hotspots as you want, simply click the &#8220;<strong>Add Item<\/strong>&#8221; button. Additionally, you can select one of the animation effects, which will be applied to all hotspots. There are <strong>6 animation types<\/strong> that will be displayed in &#8220;idle mode,&#8221; when the user is not hovering over the image.  <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"3\">Step 3: Set Tooltip Settings<\/h2>\n\n<p class=\"wp-block-paragraph\">As mentioned earlier, the text to be displayed as a tooltip must be entered in the <strong>Description<\/strong> text area of the <strong>Hotspot<\/strong> item. And here are other customization settings. <\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"359\" height=\"598\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/hotspot-widget-elementor-5.jpg\" alt=\"Hotspots JetTricks Crocoblock\" class=\"wp-image-5015\" srcset=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/hotspot-widget-elementor-5.jpg 359w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/hotspot-widget-elementor-5-300x500.jpg 300w\" sizes=\"auto, (max-width: 359px) 100vw, 359px\" \/><\/figure>\n<\/div>\n<ul class=\"wp-block-list\">\n<li><strong>Show on Init<\/strong>: if this option is enabled, tooltips will always be visible; when disabled, they only appear on mouse hover.<\/li>\n\n\n\n<li><strong>Placement<\/strong>: here you can choose where to display tooltips: above the hotspot, below, to the left, or to the right.<\/li>\n\n\n\n<li><strong>Animation<\/strong>: there are 5 animation types for tooltip appearance to choose from.<\/li>\n\n\n\n<li><strong>Animation Delay<\/strong>: the value that defines the time between trigger activation and tooltip appearance.<\/li>\n\n\n\n<li><strong>Appearance Duration<\/strong>: a value that defines the speed of the animation with which the tooltip appears after the trigger is activated.<\/li>\n\n\n\n<li><strong>Disappearance Duration<\/strong>: this value defines how quickly the tooltip will hide after the pointer leaves the hotspot.<\/li>\n\n\n\n<li><strong>Trigger<\/strong>: this option defines when the tooltip will be displayed. &#8220;Mouse Enter&#8221; means the tooltip will be shown when the pointer enters the hotspot boundaries. &#8220;Click&#8221; will make the tooltip appear when the user clicks on the hotspot. &#8220;None&#8221; makes the tooltip never display.   <\/li>\n\n\n\n<li><strong>Use Arrow<\/strong>: when this option is enabled, the tooltip has a small arrow pointing to the hotspot.<\/li>\n\n\n\n<li><strong>Distance<\/strong>: there is a space between the tooltip and the edge of the hotspot, and this value defines the size of that space.<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"4\">Step 4: Change Styles to Your Liking<\/h2>\n\n<p class=\"wp-block-paragraph\">Go to the <strong>Style<\/strong> tab and change the design of the hotspots and tooltips according to your tastes and needs.<\/p>\n\n<p class=\"wp-block-paragraph\">Once you&#8217;ve set all the settings, update the page and view the image in the interface. Place the cursor over the hotspot and the tooltip will appear immediately. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Step-by-step video Introduction In this tutorial, you&#8217;ll learn how to add hotspots to any image using the JetTricks plugin functionality. What is a hotspot? A hotspot is a marker placed on an image to focus the user&#8217;s attention on a specific part of it. They are typically used in online stores to provide users with [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":6481,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"Hotspots with JetTricks: Add Hotspots to an Image","_seopress_titles_desc":"In this tutorial, you'll learn how to add hotspots to any image using the JetTricks plugin functionality. What is a hotspot? A\u2026","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"none","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"both","_seopress_redirections_param":"","_seopress_redirections_type":301,"_seopress_analysis_target_kw":"","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_seopress_pro_schemas_manual":[],"_seopress_pro_rich_snippets_disable_all":"","_seopress_pro_rich_snippets_disable":[],"_seopress_pro_schemas":[],"footnotes":"","_bricks_page_content_2":[],"_bricks_page_header_2":[],"_bricks_page_footer_2":[]},"categories":[394],"tags":[376,385],"class_list":["post-6480","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-crocoblock","tag-dynamic-content","tag-web-design"],"_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts\/6480","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/comments?post=6480"}],"version-history":[{"count":1,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts\/6480\/revisions"}],"predecessor-version":[{"id":6482,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts\/6480\/revisions\/6482"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media\/6481"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media?parent=6480"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/categories?post=6480"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/tags?post=6480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}