{"id":186451,"date":"2019-05-01T22:28:15","date_gmt":"2019-05-02T05:28:15","guid":{"rendered":"http:\/\/wpbeaveraddons.com\/?page_id=186451"},"modified":"2021-07-19T11:31:49","modified_gmt":"2021-07-19T18:31:49","slug":"image-hotspot","status":"publish","type":"page","link":"https:\/\/wpbeaveraddons.com\/demo\/image-hotspot\/","title":{"rendered":"Image Hotspot"},"content":{"rendered":"\n\n\t\t<h2>\n\t\t\tImage Hotspot Module for Beaver Builder\n\t\t<\/h2>\n\t\t\t<p>With Image Hotspot module you can showcase product features, create virtual tours, display information, and more!<\/p>\t\t\n\t\t<h4>Virtual Tour<\/h4>\n\t\t\t<p>With Image Hotspot module you can create a virtual tour on your website. It can be used to share the details of a property, features of a product, etc.\u00a0<\/p>\t\t\n\t\t<h4>Styling Options<\/h4>\n\t\t\t<p>Image Hotspot module provides various styling options like custom icon, glow effect, typography, colors etc. to create eye-catching hotspots.\u00a0<\/p>\t\t\n\t\t<h4>Responsive Design<\/h4>\n\t\t\t<p>The Image Hotspot module for Beaver Builder is completely mobile responsive. So, users get a seamless design and functionality experience.<\/p>\t\t\n\t\t<h3>\n\t\t\tVirtual Tour with Image Hotspot Module\n\t\t<\/h3>\n\t\t\t<p>Image Hotspot module for Beaver Builder can be used to create elegant and eye-catching virtual tours. Customize the styling and text along with trigger actions to start the virtual tour.\u00a0Here we have an example of an auto-trigger virtual tour for a hotel room.\u00a0<\/p>\t\t\n\t\t\t<img decoding=\"async\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/hotspot-4.jpg\" alt=\"\"\/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/Hotspot1.png\" alt=\"\"\/>\n\t\t\t\t\t\t\t\t\t\t Marker 1 \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h3>Comfy Seating<\/h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br \/>Donec quis arcu sit amet enim maximus mollis.<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t\t\t\t<a data-tooltipid=\"1\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tPrevious\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t\t\t\t<a data-tooltipid=\"1\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tNext\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tEnd Tour\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t\t\t\t\t1 \n\t\t\t\t\t\t\t\t\t\t\t\tof \n\t\t\t\t\t\t\t\t\t\t\t\t3\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/Hotspot1.png\" alt=\"\"\/>\n\t\t\t\t\t\t\t\t\t\t Marker 2 \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h3>Big Windows<\/h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br \/>Donec quis arcu sit amet enim maximus mollis.<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t\t\t\t<a data-tooltipid=\"2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tPrevious\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t\t\t\t<a data-tooltipid=\"2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tNext\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tEnd Tour\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t\t\t\t\t2 \n\t\t\t\t\t\t\t\t\t\t\t\tof \n\t\t\t\t\t\t\t\t\t\t\t\t3\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/Hotspot1.png\" alt=\"\"\/>\n\t\t\t\t\t\t\t\t\t\t Marker 3 \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h3>Entertainment Unit<\/h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t\t\t\t<a data-tooltipid=\"3\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tPrevious\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t\t\t\t<a data-tooltipid=\"3\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tNext\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tEnd Tour\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t\t\t\t\t3 \n\t\t\t\t\t\t\t\t\t\t\t\tof \n\t\t\t\t\t\t\t\t\t\t\t\t3\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t<\/ul>\n\t\t<h3>\n\t\t\tVirtual Tour with Button Click Trigger Action\n\t\t<\/h3>\n\t\t\t<p>You can create a virtual tour with overlay and button style to trigger the tour along with previous next options to navigate between the markers.\u00a0<\/p>\t\t\n\t\t\t<img decoding=\"async\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/HOTSPOT-3.jpg\" alt=\"\"\/>\n\t\t\t\t\t\t\t\t\t\t Marker 1 \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>SHOES<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t\t\t\t<a data-tooltipid=\"1\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t\t\t\t<a data-tooltipid=\"1\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tEnd Tour\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t\t\t\t\t1 \n\t\t\t\t\t\t\t\t\t\t\t\tof \n\t\t\t\t\t\t\t\t\t\t\t\t3\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t\t\t\t\t Marker 2 \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>HANDBAG<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t\t\t\t<a data-tooltipid=\"2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t\t\t\t<a data-tooltipid=\"2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tEnd Tour\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t\t\t\t\t2 \n\t\t\t\t\t\t\t\t\t\t\t\tof \n\t\t\t\t\t\t\t\t\t\t\t\t3\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t\t\t\t\t Marker 3 \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>CAP<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t\t\t\t<a data-tooltipid=\"3\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t\t\t\t<a data-tooltipid=\"3\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tEnd Tour\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t\t\t\t\t3 \n\t\t\t\t\t\t\t\t\t\t\t\tof \n\t\t\t\t\t\t\t\t\t\t\t\t3\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t\t<\/ul>\n\t\t\t\t<button>EXPLORE OUR SHOP<\/button>\n\t\t<h3>\n\t\t\tShowcase Product Features with Image Hotspot Module\n\t\t<\/h3>\n\t\t\t<p>One of the great use cases of Image Hotspot module is to display Product Features. Check it in action below with Hover Trigger action. Move the cursor over the glowing markers and you will see the details in the tooltip text.<\/p>\t\t\n\t\t\t<img decoding=\"async\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/hotspot-img-1.jpg\" alt=\"\"\/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/Hotspot.png\" alt=\"\"\/>\n\t\t\t\t\t\t\t\t\t\t Marker 1 \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>Side Glass<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/Hotspot.png\" alt=\"\"\/>\n\t\t\t\t\t\t\t\t\t\t Marker 2 \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>Air Conditioner<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/Hotspot.png\" alt=\"\"\/>\n\t\t\t\t\t\t\t\t\t\t Marker 3 \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<p>Steering<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t<h3>\n\t\t\tShare your Toolkit or Product Details\n\t\t<\/h3>\n\t\t\t<p>With the Image Hotspot module, you can share your toolkit or product details in a creative manner. Say goodbye to standard table layouts. You can customize the icon and styling for each marker in the Image Hotspot module.\u00a0<\/p>\t\t\n\t\t\t<img decoding=\"async\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/Untitled-1.jpg\" alt=\"\"\/>\n\t\t\t\t\t\t\t\t\t\t Marker 1 \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h2>LAPTOP<\/h2><p>Price &#8211; 800$<br \/>Color &#8211; Grey<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t Marker 2 \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h2>CAMERA<\/h2>\nPrice &#8211; 500$<br \/>\nColor &#8211; Black\n\t\t\t\t\t\t\t\t\t\t Marker 3 \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h2>IPHONE<\/h2><p>Price &#8211; 300$<br \/>Color &#8211; White<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t Marker 4 \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h2>BLUETOOTH MOUSE<\/h2><p>Price &#8211; 300$<br \/>Color &#8211; White<\/p>\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t<h3>\n\t\t\tGet Access to 350+ Beautiful Templates &#038; 65+ Creative Modules.\n\t\t<\/h3>\n\t\t\t<p>Buy worry free with our 14-Days Money Back Guarantee.\u00a0<\/p>\t\t\n\t<a href=\"https:\/\/wpbeaveraddons.com\/pricing\/?utm_source=footer&#038;utm_medium=cta&#038;utm_campaign=footer_cta\" target=\"_self\" role=\"button\" aria-label=\"GET POWERPACK\" rel=\"noopener\">\n\t\t\t\t<strong>GET POWERPACK<\/strong>\n\t\t\t<\/a>\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/person-1.png\" alt=\"\" itemprop=\"image\" height=\"425\" width=\"500\" onerror=\"this.style.display='none'\"  \/>\n\n","protected":false},"excerpt":{"rendered":"<p>Image Hotspot Module for Beaver Builder With Image Hotspot module you can showcase product features, create virtual tours, display information, and more! Virtual Tour With Image Hotspot module you can create a virtual tour on your website. It can be used to share the details of a property, features of a product, etc.\u00a0 Styling Options&hellip;<\/p>\n","protected":false},"author":1935,"featured_media":0,"parent":79,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"acf":[],"_links":{"self":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/pages\/186451"}],"collection":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/users\/1935"}],"replies":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/comments?post=186451"}],"version-history":[{"count":2,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/pages\/186451\/revisions"}],"predecessor-version":[{"id":415851,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/pages\/186451\/revisions\/415851"}],"up":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/pages\/79"}],"wp:attachment":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media?parent=186451"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}