{"id":5080,"date":"2022-02-14T00:05:23","date_gmt":"2022-02-14T00:05:23","guid":{"rendered":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/?p=5080"},"modified":"2022-02-14T21:34:34","modified_gmt":"2022-02-14T21:34:34","slug":"hotspot","status":"publish","type":"post","link":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/2022\/02\/14\/hotspot\/","title":{"rendered":"Hotspot"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">It is high time to display information right on the data in the development process of Demos. In that case,\u00a0<strong>Hotspot Widget\u00a0<\/strong>can help you to display anything on any place. Use it and build you demos attractively.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"448\" src=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2022\/02\/hotspot-1024x448.jpg\" alt=\"\" class=\"wp-image-5271\" srcset=\"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2022\/02\/hotspot-1024x448.jpg 1024w, https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-content\/uploads\/sites\/17\/2022\/02\/hotspot-768x336.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">How to create Hotspot Widget?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 1<\/strong>. Create, or choose the Column into which you want to add your element. Click on Add New Element.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 2<\/strong>. Drag Image or other element you present to edit area.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 3<\/strong>. Next, drag UDesign&nbsp;<strong>Hotspot&nbsp;<\/strong>element from the element List.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 4<\/strong>. Edit&nbsp;<strong>Hotspot&nbsp;<\/strong>and&nbsp;<strong>Popup Content&nbsp;<\/strong>to show.<\/p>\n\n\n\n<p class=\"alert alert-warning wp-block-paragraph\">You should install Hotspot after source element on navigator or you will not be able to see the hotspot on screen.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">About Hotspot Option.<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Icon \u2013&nbsp;<\/strong>You can choose icon from icon library for hotspot on image.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Horizontal<\/strong>,&nbsp;<strong>Vertical<\/strong>&nbsp;\u2013 You can control position of hotspot on image.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Hotspot Effect&nbsp;<\/strong>\u2013 UDesign Hotspot provides two types. Spread and Twinkle.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Type<\/strong>&nbsp;\u2013 You can popup various information that will be displayed when hotspot is hovered. Types are Image, Product, Block, Custom Html. If you want to use&nbsp;<strong>Block<\/strong>, you would build block element before.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Popup Position<\/strong>&nbsp;\u2013 You can show popup content anywhere. Top, Bottom, Left or Right.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">About Hotspot Style.<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Here, You can control&nbsp;<strong>Hotspot size<\/strong>,&nbsp;<strong>Icon size<\/strong>,&nbsp;<strong>Border Radius<\/strong>&nbsp;and&nbsp;<strong>color<\/strong>&nbsp;of Hotspot. You can set the harmony of Hotspot.&nbsp;<strong>Popup Width&nbsp;<\/strong>sets the width of hotspot popup content so you can control width of them on various dimensions.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>It is high time to display information right on the data in the development process of Demos. In that case,\u00a0Hotspot Widget\u00a0can help you to display anything on any place. Use it and build you demos attractively. How to create Hotspot Widget? Step 1. Create, or choose the Column into which you want to add your [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[32],"tags":[],"class_list":["post-5080","post","type-post","status-publish","format-standard","hentry","category-udesign-elements"],"_links":{"self":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/posts\/5080","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/comments?post=5080"}],"version-history":[{"count":2,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/posts\/5080\/revisions"}],"predecessor-version":[{"id":5272,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/posts\/5080\/revisions\/5272"}],"wp:attachment":[{"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/media?parent=5080"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/categories?post=5080"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/udesign\/documentation\/wp-json\/wp\/v2\/tags?post=5080"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}