{"id":12269,"date":"2017-03-06T14:11:13","date_gmt":"2017-03-06T14:11:13","guid":{"rendered":"http:\/\/rnbtheme.com\/documentation\/?p=12269"},"modified":"2023-07-31T10:39:15","modified_gmt":"2023-07-31T10:39:15","slug":"hotspot","status":"publish","type":"post","link":"https:\/\/rnbtheme.com\/documentation\/wpbackery\/hotspot","title":{"rendered":"Hotspot"},"content":{"rendered":"<section class=\"wpb-content-wrapper\"><p>[vc_row][vc_column css=&#8221;.vc_custom_1485963458300{padding-right: 35px !important;padding-left: 35px !important;}&#8221; col_shadow=&#8221;box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)&#8221; col_shadow_hover=&#8221;box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)&#8221;][dfd_spacer screen_wide_spacer_size=&#8221;30&#8243; screen_normal_resolution=&#8221;1024&#8243; screen_tablet_resolution=&#8221;800&#8243; screen_mobile_resolution=&#8221;480&#8243;][vc_column_text]The hotspot module is a creative way to attract your visitors&#8217; attention and add a hotspot icon with a tooltip in an image.<\/p>\n<h5>Watch the video tutorial on <a href=\"https:\/\/youtu.be\/5IWEH1tuS6Q\" target=\"_blank\" rel=\"noopener\">Hotspot module creation<\/a> for more details.<\/h5>\n<p>[\/vc_column_text][dfd_spacer screen_wide_spacer_size=&#8221;30&#8243; screen_normal_resolution=&#8221;1024&#8243; screen_tablet_resolution=&#8221;800&#8243; screen_mobile_resolution=&#8221;480&#8243;][dfd_tta_tabs border_radius=&#8221;4&#8243; alignment=&#8221;left&#8221; active_section=&#8221;1&#8243; active_tab_background=&#8221;#3b55e6&#8243; tab_hover_text_color=&#8221;#3b55e6&#8243; tab_active_color_text=&#8221;#ffffff&#8221; border_color_active=&#8221;#3b55e6&#8243;][vc_tta_section title=&#8221;General settings&#8221; tab_id=&#8221;1486545572585-2437c7e1-5371&#8243;][vc_column_text]<\/p>\n<h3>General settings<\/h3>\n<p><strong><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-12278\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/03\/general-1.jpg\" alt=\"\" width=\"980\" height=\"829\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/03\/general-1.jpg 980w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/03\/general-1-300x254.jpg 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/03\/general-1-768x650.jpg 768w\" sizes=\"(max-width: 980px) 100vw, 980px\" \/><\/strong><\/p>\n<ul>\n<li><strong>Image<\/strong> &#8211; choose the image from the media library to add the hotspots on it. After the image is uploaded, please click on the area where the hotspot should be added and you&#8217;ll be able to enter the hotspot tooltip content (title and message).<\/li>\n<li><strong>Tooltip action<\/strong> &#8211; define the action on which the hotspot tooltip will be displayed. If <strong>None<\/strong> action is selected the tooltips will be displayed by default, <strong>hover<\/strong> and <strong>click<\/strong> variants are also available.<\/li>\n<\/ul>\n<h5>Extra features<\/h5>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-12279\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/03\/general-2.jpg\" alt=\"\" width=\"980\" height=\"265\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/03\/general-2.jpg 980w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/03\/general-2-300x81.jpg 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/03\/general-2-768x208.jpg 768w\" sizes=\"(max-width: 980px) 100vw, 980px\" \/><\/p>\n<ul>\n<li><strong>Animation<\/strong> &#8211; choose between 14 preset animation effects.<\/li>\n<li><strong>Custom CSS class<\/strong> &#8211;\u00a0enter our\u00a0own unique class name for the item \u2013 this is a useful option for those who want to create a specific style. E.g.: you can type <strong>custom-style<\/strong> class and then go to <del class=\"support-arrow-right\">Theme options<\/del>\u00a0<del class=\"support-arrow-right\">General options<\/del>\u00a0<del class=\"support-arrow-right\">Custom CSS\/JS<\/del> <del>Custom CSS<\/del> field and write your own CSS code with this class to get your own style.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Marker settings&#8221; tab_id=&#8221;1486545572829-e1c1304c-ee12&#8243;][vc_column_text]<\/p>\n<h3>Marker settings<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-12280\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/03\/marker-settings.jpg\" alt=\"\" width=\"980\" height=\"280\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/03\/marker-settings.jpg 980w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/03\/marker-settings-300x86.jpg 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/03\/marker-settings-768x219.jpg 768w\" sizes=\"(max-width: 980px) 100vw, 980px\" \/><\/p>\n<ul>\n<li><strong>Marker style\u00a0<\/strong>&#8211; select the style of the hotspot marker which is the most suitable to you.\n<ul>\n<li><strong>Default<\/strong> &#8211; the default rounded hotspot marker is displayed.\n<ul>\n<li><strong>Marker background<\/strong> &#8211; set the background of hotspot marker. The default color is\u00a0#3b55e6.<\/li>\n<li><strong>Marker decoration background<\/strong> &#8211; set the background of the hotspot marker decoration background.\u00a0 The default color is #ffffff.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Image<\/strong> &#8211; choose the image from the media library to be used as a hotspot marker.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Tooltip settings&#8221; tab_id=&#8221;1486545573068-02c117a6-3d50&#8243;][vc_column_text]<\/p>\n<h3>Tootip settings<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-12281\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/03\/tooltip-settings.jpg\" alt=\"\" width=\"980\" height=\"499\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/03\/tooltip-settings.jpg 980w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/03\/tooltip-settings-300x153.jpg 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/03\/tooltip-settings-768x391.jpg 768w\" sizes=\"(max-width: 980px) 100vw, 980px\" \/><\/p>\n<ul>\n<li><strong>Tooltip position\u00a0<\/strong>&#8211; set the tooltip position from the hotspot marker from the list of the available positions.<\/li>\n<li><strong>Tooltip content alignment<\/strong>\u00a0 &#8211; set the tooltip content text alignment. <strong>Left<\/strong>, <strong>right<\/strong> and <strong>center<\/strong> positions are available.<\/li>\n<li><strong>Tooltip min width<\/strong> &#8211; define the minimal width for hotspot item tooltip.<\/li>\n<li><strong>Tooltip background<\/strong> &#8211; set the background color of the tooltip message.\u00a0Default tooltip background color is set to #ffffff.<\/li>\n<li><strong>Border style<\/strong> &#8211; select one of the available border styles for the Hotspot module. <strong>Dotted<\/strong>, <strong>dashed<\/strong> and <strong>solid<\/strong> variants are available.<strong>Theme default<\/strong> style will be inherited directly from theme files.\n<ul>\n<li><strong>Color<\/strong> &#8211; select the color for the border.<\/li>\n<li><strong>Border radius<\/strong> &#8211; select the border radius for Hotspot module to have rounded corners.<\/li>\n<li><strong>Border width<\/strong> &#8211; set the width of the border. You may set the desired width each border: <strong>top, right, left<\/strong> and <strong>bottom<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Box shadow<\/strong> \u2013 set it to <strong>Enable<\/strong> to activate the shadow for the tooltip.\n<ul>\n<li><strong>Shadow parameters<\/strong> \u2013\u00a0choose shadow parameter and set the color, in accordance with the following structure: <strong>horizontal shadow<\/strong>, <strong>vertical shadow<\/strong>, <strong>blur<\/strong>, and <strong>spread<\/strong>. More details can be found following <a href=\"http:\/\/www.w3schools.com\/cssref\/css3_pr_box-shadow.asp\">this link<\/a>.<\/li>\n<li><strong>Color<\/strong> \u2013 set the color for the product category shadow.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Typography settings&#8221; tab_id=&#8221;1486545573311-423c930f-c6e7&#8243;][vc_column_text]<\/p>\n<h3>\u00a0Typography settings<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-12282\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/03\/title-typography.jpg\" alt=\"\" width=\"980\" height=\"446\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/03\/title-typography.jpg 980w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/03\/title-typography-300x137.jpg 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/03\/title-typography-768x350.jpg 768w\" sizes=\"(max-width: 980px) 100vw, 980px\" \/><\/p>\n<ul>\n<li><strong>Font size<\/strong> &#8211; set the font size you need to use in the Hotspot module.<\/li>\n<li><strong>Letter spacing<\/strong> &#8211; set the needed distance between letters.<\/li>\n<li><strong>Text color<\/strong> &#8211; set the color of the font.<\/li>\n<li><strong>Font style<\/strong> &#8211; select the font weight and style (bold, italic) from the list.<\/li>\n<li><strong>Custom font family<\/strong> \u2013 set it to <strong>Enable<\/strong> to use custom Google font.\n<ul>\n<li><strong>Font Family<\/strong> &#8211; select the font family from the drop-down list.<\/li>\n<li><strong>Font style<\/strong> &#8211; select the font weight and style (bold, italic) from the list.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h5>Content typography<\/h5>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-12283\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/03\/content-typography.jpg\" alt=\"\" width=\"980\" height=\"450\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/03\/content-typography.jpg 980w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/03\/content-typography-300x138.jpg 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/03\/content-typography-768x353.jpg 768w\" sizes=\"(max-width: 980px) 100vw, 980px\" \/><\/p>\n<ul>\n<li><strong>Font size<\/strong> \u2013 set the font size you need to use in the text in Hotspot module.<\/li>\n<li><strong>Letter spacing<\/strong> \u2013 set the needed distance between letters.<\/li>\n<li><strong>Line-height<\/strong> \u2013\u00a0set the needed distance between lines.<\/li>\n<li><strong>Text color<\/strong> \u2013 set the color of the font.<\/li>\n<li><strong>Font style<\/strong> \u2013 select the font weight and style (bold, italic).<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][\/dfd_tta_tabs][\/vc_column][\/vc_row]<\/p>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>Hotspot module is the creative way to attract your visitors&#8217; attention and add hotspot icon with tooltip in an image.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[24,23,22,33],"_links":{"self":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/12269"}],"collection":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/comments?post=12269"}],"version-history":[{"count":12,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/12269\/revisions"}],"predecessor-version":[{"id":15582,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/12269\/revisions\/15582"}],"wp:attachment":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/media?parent=12269"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/categories?post=12269"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/tags?post=12269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}