{"id":62673,"date":"2023-10-16T16:46:09","date_gmt":"2023-10-16T13:46:09","guid":{"rendered":"https:\/\/premiumaddons.com\/?post_type=docs&#038;p=62673"},"modified":"2023-10-16T16:46:14","modified_gmt":"2023-10-16T13:46:14","slug":"image-hotspots-widget-tutorial","status":"publish","type":"docs","link":"https:\/\/premiumaddons.com\/docs\/image-hotspots-widget-tutorial\/","title":{"rendered":"Image Hotspots Widget Tutorial"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\"><strong>Intro<\/strong><\/h3>\n\n\n\n<p>Giving your visitors the chance to interact with your website with widgets like Elementor Premium Image Hotspots will make them stay longer, improving the conversion chance. <\/p>\n\n\n\n<p>Click here to check <a href=\"https:\/\/premiumaddons.com\/image-hotspots-widget-for-elementor-page-builder\/\">Premium Image Hotspots Widget demo<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Requirements: <\/h3>\n\n\n\n<ul><li>You will need <a rel=\"noreferrer noopener\" href=\"https:\/\/premiumaddons.com\/pro\/\" target=\"_blank\">Premium Addons PRO<\/a> plugin installed and activated on your website.<\/li><li>Also, make sure that this widget\/addon is enabled so you can find it in the Elementor editor. Check <a rel=\"noreferrer noopener\" href=\"https:\/\/premiumaddons.com\/docs\/plugin-settings\/\" target=\"_blank\">this article<\/a> to know how to do that. <\/li><li>Premium Addons works only with <a rel=\"noreferrer noopener\" href=\"https:\/\/bit.ly\/Get-Elementor\" target=\"_blank\">Elementor Page Builder<\/a> plugin so you will need to have it installed and activated as well.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Key Features<\/strong><\/h3>\n\n\n\n<ul>\n<li>Image<\/li>\n\n\n\n<li>Hotspots<\/li>\n\n\n\n<li>Tooltips <\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">1. Image<\/h4>\n\n\n\n<ul>\n<li><strong>Choose Image:<\/strong> Select or upload a custom image via the Media Library.<\/li>\n\n\n\n<li><strong>Alignment:<\/strong> Align the image to the left, middle, or right. -This option is useful for smaller images.<\/li>\n\n\n\n<li><strong>Floating Effects:<\/strong> Add floating effect animation to background image hotspots.\n\n\n\n\n<ul>\n<li><strong>Translate:<\/strong> Add a translate effect to background image.<\/li>\n\n\n\n<li><strong>Rotate:<\/strong> Add a rotate effect to background image.<\/li>\n<\/ul>\n\n\n\n<ul>\n<li><strong>Opacity:<\/strong>\n<ul>\n<li><strong>Value:<\/strong> Set minimum value for opacity animation.<\/li>\n\n\n\n<li><strong>Speed:<\/strong> Set the speed of the opacity effect.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Disable Floating Effects On Safari:<\/strong> You can disable Floating Effects on Safari browser to prevent any layout breaks that can result from compatibility between Safari browser and the modern CSS used to create the floating animations.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMjMlMkYxMCUyRnNjcmVlbnNob3RzLTc3LmpwZyIgZGF0YS13PSIxMDI0IiBkYXRhLWg9IjU5NyIgZGF0YS1iaXA9IiI+PC9zdmc+\" data-spai=\"1\" alt=\"Set the Image settings for Elementor Image hotspot. \" class=\"wp-image-62678\"  \/><figcaption class=\"wp-element-caption\">Add Your Image Hotspots Inside Elementor Page Builder<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">2. Hotspots<\/h4>\n\n\n\n<p>Click the &#8220;Add Item&#8221; button to add a new hotspot to your image. Click on each one to open and edit it.<br>You can delete a hotspot by clicking the close &#8220;X&#8221; button, or you can hold and drag an item to change its position <g class=\"gr_ gr_6 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace\" id=\"6\" data-gr-id=\"6\">in<\/g> the list.<\/p>\n\n\n\n<ul>\n<li><strong>Radar Animation:<\/strong> Enable or disable the radar animation. Please take a look at the first example on Premium Hotspots Widget <a href=\"https:\/\/premiumaddons.com\/image-hotspots-widget-for-elementor-page-builder\/\">demo page.<\/a><\/li>\n<\/ul>\n\n\n\n<p><strong>Hotspot &#8211; Content<\/strong><\/p>\n\n\n\n<ul>\n<li><strong>CSS ID<\/strong>: Set CSS ID to hotspot item, it&#8217;s very helpful if you can link it with any Elementor element.<\/li>\n<\/ul>\n\n\n\n<ul id=\"block-4d88f44f-6a2b-4351-a5fe-58ef476011d6\">\n<li><strong>Hotspot Type<\/strong>\n<ul>\n<li><strong>Font Awesome Icon<\/strong>\n<ul>\n<li><strong>Select Icon:<\/strong> Select an icon from Font Awesome icon library.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Custom Image:<\/strong> Select a custom image from the media library.<\/li>\n\n\n\n<li><strong>Text:<\/strong> Insert text for hotspot on the image.<\/li>\n\n\n\n<li><strong>Lottie Animation<\/strong>\n<ul>\n<li><strong>Animation JSON URL:<\/strong> Set font awesome icon size. <em>Get JSON code URL from&nbsp;<\/em><a rel=\"noreferrer noopener\" href=\"https:\/\/lottiefiles.com\/\" target=\"_blank\">here<\/a><\/li>\n\n\n\n<li><strong>Loop:<\/strong> Enable loop to run the animation infinitely.<\/li>\n\n\n\n<li><strong>Reverse:&nbsp;<\/strong>Reverse animation direction.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Content to Show:<\/strong> This content will be visible in the tooltip when the visitor hovers or clicks on the hotspot. Select an existing Elementor template, or add your content in the rich text editor.\n<ul>\n<li>You can use&nbsp;<strong>Elementor Live Templates<\/strong>&nbsp;feature to create\/edit Elementor template on the same page. For more information, please check Elementor templates article from&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/premiumaddons.com\/docs\/how-to-create-elementor-template-to-be-used-with-premium-addons\/\" target=\"_blank\">here<\/a>.<\/li>\n\n\n\n<li>You can also select an existing Elemntor template.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Open By Default: <\/strong>Open the hotspot tooltip by default with no need to hover on it.<\/li>\n\n\n\n<li><strong>Link:<\/strong> Enable to make hotspots will be clickable. Select from a list of existing pages, or enter a custom URL.\n<ul>\n<li><strong>Icon Title:<\/strong> Add a title to the icon.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>Hotspot &#8211; Style<\/strong><\/p>\n\n\n\n<ul>\n<li><strong>Horizontal Position:<\/strong> Adjust the position using pixels or %.<\/li>\n\n\n\n<li><strong>Vertical Position:<\/strong> Adjust the position using pixels or %. <\/li>\n\n\n\n<li><strong>Color:<\/strong> Pick a color for Elementor hotspot item. <em>(text or icon only)<\/em><\/li>\n\n\n\n<li><strong>Size:<\/strong> Set size for hotspot item.<\/li>\n\n\n\n<li><strong>Background Color:<\/strong> Pick a background color for the hotspot item.<\/li>\n\n\n\n<li><strong>Border Type:<\/strong> Pick the border style for the hotspot item.\n<ul>\n<li><strong>Width:<\/strong> Set width for hotspot item border.<\/li>\n\n\n\n<li><strong>Color:<\/strong> Pick a color for the hotspot item border.<\/li>\n\n\n\n<li><strong>Border Radius:<\/strong> Set border radius for hotspot item.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Radar Color:<\/strong> Pick the color for the animated radar effect of the hotspot items.<\/li>\n\n\n\n<li><strong>Radar Border Radius:<\/strong> Set border radius for hotspot item radar animation.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMjMlMkYxMCUyRnNjcmVlbnNob3RzLTc4LmpwZyIgZGF0YS13PSIxMDI0IiBkYXRhLWg9IjU5NyIgZGF0YS1iaXA9IiI+PC9zdmc+\" data-spai=\"1\" alt=\"\" class=\"wp-image-62679\"  \/><figcaption class=\"wp-element-caption\">Add Your Own Hotspots to The Image You Recently Uploaded<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwOCUyRmVsZW1lbnRvci1pbWFnZS1ob3RzcG90cy1lbGVtZW50cy5qcGciIGRhdGEtdz0iMTAyNCIgZGF0YS1oPSI1OTciIGRhdGEtYmlwPSIiPjwvc3ZnPg==\" data-spai=\"1\" alt=\"Hotspots Settings for Elementor Image Hotspots Widget\" class=\"wp-image-27386\"  \/><figcaption class=\"wp-element-caption\">Hotspots Settings for Elementor Image Hotspots Widget<\/figcaption><\/figure>\n\n\n\n<ul>\n<li><strong>Open By Default: <\/strong>Open the hotspot tooltip by default with no need to hover on it.<\/li>\n\n\n\n<li><strong>Link:<\/strong> Enable to make hotspots will be clickable. Select from a list of existing pages, or enter a custom URL.\n<ul>\n<li><strong>Icon Title:<\/strong> Add a title to the icon.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMjMlMkYxMCUyRnNjcmVlbnNob3RzLTc5LnBuZyIgZGF0YS13PSIxMDI0IiBkYXRhLWg9IjU5NyIgZGF0YS1iaXA9IiI+PC9zdmc+\" data-spai=\"1\" alt=\"Elementor Image Hotspot open by default option, and enable clickable link.\" class=\"wp-image-62743\"  \/><figcaption class=\"wp-element-caption\">Image Hotspot &#8211; Settings<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">3. Tooltips<\/h4>\n\n\n\n<ul>\n<li><strong>Interactive:<\/strong> Give users the possibility to interact with the content of the tooltip.<\/li>\n\n\n\n<li><strong>Mouse Trigger:<\/strong> Show the tooltip either when visitors hover over the hotspot, or when they click on it.<\/li>\n\n\n\n<li><strong>Tooltip Arrow:<\/strong> Enable or disable an arrow that is pointing from the tooltip to the hotspot.<\/li>\n\n\n\n<li><strong>Tooltip Position:<\/strong> Select between top, left, bottom, or right.<\/li>\n\n\n\n<li><strong>Spacing:<\/strong> Spacing is the distance between the<g class=\"gr_ gr_33 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins replaceWithoutSep\" id=\"33\" data-gr-id=\"33\"> hotspot<\/g> and the tooltip. Adjust the spacing using pixels. The default is &#8220;6&#8221; pixels.<\/li>\n\n\n\n<li><strong>Min Width<em>:<\/em><\/strong><em> <\/em>Set a minimum width for the tooltip in pixels. The default is &#8220;0&#8221; (Auto Width).<\/li>\n\n\n\n<li><strong>Max Width:<\/strong> Set a maximum width for the tooltip in pixels. The default is &#8220;Null&#8221;  (No Max Width).<\/li>\n\n\n\n<li><strong>Height:<\/strong> Set custom height for the tooltip box in pixels, em, or %.<\/li>\n\n\n\n<li><strong>Animation:<\/strong> Select an animation that will be used to reveal the tooltip when it is triggered.<\/li>\n\n\n\n<li><strong>Animation Duration:<\/strong> Select the animation duration in milliseconds.<\/li>\n\n\n\n<li><strong>Delay:<\/strong> Set the animation delay in milliseconds. The default is &#8220;10&#8221;.<\/li>\n\n\n\n<li><strong>Hide on Mobiles:<\/strong> When enabled, the tooltip will be hidden on mobile phones.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMjMlMkYxMCUyRnNjcmVlbnNob3RzLTgwLmpwZyIgZGF0YS13PSIxMDI0IiBkYXRhLWg9IjU5NyIgZGF0YS1iaXA9IiI+PC9zdmc+\" data-spai=\"1\" alt=\"Modify Tooltip Preferences for the Premium Addon Image Hotspots Widget.\" class=\"wp-image-62748\"  \/><figcaption class=\"wp-element-caption\">Adjust Tooltips Settings for Elementor Image Hotspots Widget <\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Style<\/strong><\/h3>\n\n\n\n<ul>\n<li>Image<\/li>\n\n\n\n<li>Hotspots<\/li>\n\n\n\n<li>Tooltips<\/li>\n\n\n\n<li>Icon Label<\/li>\n\n\n\n<li>Container<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">1. Image<\/h4>\n\n\n\n<ul>\n<li><strong>Width:<\/strong> Set the width for the tooltip.<\/li>\n\n\n\n<li><strong>Max Width:<\/strong> Set a maximum width for the tooltip.<\/li>\n\n\n\n<li><strong>Height: <\/strong>Set the tooltip height.<\/li>\n\n\n\n<li><strong>CSS Filters:<\/strong>&nbsp;You can also customize the image style further by selecting one of the available filters: Blur, Brightness, Contrast, Saturation,&nbsp;or&nbsp;Hue.<\/li>\n\n\n\n<li><strong>Hover CSS Filters:<\/strong>&nbsp;You can also customize the image further by selecting one of the available hover filters: Blur, Brightness, Contrast, Saturation, and Hue.<\/li>\n\n\n\n<li><strong>Blend Mode:<\/strong> Select the image&#8217;s blend mode.<\/li>\n\n\n\n<li><strong>Border Type:<\/strong> Select between the following border types, as well as the color and the width of the border on each side of the image.<\/li>\n\n\n\n<li><strong>Border Radius:<\/strong> Increasing the border-radius will add circular corners to the image.<\/li>\n\n\n\n<li><strong>Padding:<\/strong> Adjust the padding using pixels, em, or %.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMjMlMkYxMCUyRnNjcmVlbnNob3RzLTgxLnBuZyIgZGF0YS13PSIxMDI0IiBkYXRhLWg9IjU5NyIgZGF0YS1iaXA9IiI+PC9zdmc+\" data-spai=\"1\" alt=\"\" class=\"wp-image-62751\"  \/><figcaption class=\"wp-element-caption\">Customize Your Image Hotspots for Elementor<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">2. Hotspots<\/h4>\n\n\n\n<p><em>Select whether to style the icon, image, or text respectively.<\/em><\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Icon<\/h5>\n\n\n\n<ul>\n<li><strong>Color:<\/strong> Pick a color for the icon.<\/li>\n\n\n\n<li><strong>Size:<\/strong> Set the icon size using pixels or em.<\/li>\n\n\n\n<li><strong>Background Color:<\/strong> Pick a background color for the icon.<\/li>\n\n\n\n<li><strong>Border Type:<\/strong> Select between the following border types, as well as the color and the width of the border on each side of the icon&#8217;s container.<\/li>\n\n\n\n<li><strong>Border Radius:<\/strong> Increasing the border-radius will add circular corners to the icon&#8217;s container.<\/li>\n\n\n\n<li><strong>Advanced Border Radius:<\/strong>&nbsp;Apply custom radius values for Elementor hotspots widget icon. Get the radius value from&nbsp;<a href=\"https:\/\/9elements.github.io\/fancy-border-radius\/\">here<\/a>.<\/li>\n\n\n\n<li><strong>Border Radius:<\/strong>&nbsp;Insert border radius values.<\/li>\n\n\n\n<li><strong>Shadow:<\/strong> Add a shadow behind the icon. Adjust the following options to make it match your needs.<\/li>\n\n\n\n<li><strong>Margin:<\/strong> Margin is the space between the icon and the rest of the content. Increasing the margin will increase the size of the radar <g class=\"gr_ gr_36 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-del replaceWithoutSep\" id=\"36\" data-gr-id=\"36\">animation<\/g> if it is enabled.<\/li>\n\n\n\n<li><strong>Padding:<\/strong> Padding is the space between the icon and its container. Increasing the padding will increase the size of the background.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMjMlMkYxMCUyRnNjcmVlbnNob3RzLTgyLmpwZyIgZGF0YS13PSIxMDI0IiBkYXRhLWg9IjU5NyIgZGF0YS1iaXA9IiI+PC9zdmc+\" data-spai=\"1\" alt=\"Icon Adjustment Choices for Elementor Image Hotspots Widget.\" class=\"wp-image-62754\"  \/><figcaption class=\"wp-element-caption\">Hotspots Icon Customization Options for Elementor Image Hotspots Widget<\/figcaption><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\">Image\/Lottie<\/h5>\n\n\n\n<ul>\n<li><strong>Size:<\/strong> Set the image size using pixels or em.<\/li>\n\n\n\n<li><strong>Background Color:<\/strong> Pick a background color behind the image. Usable for transparent images or when the padding has been adjusted.<\/li>\n\n\n\n<li><strong>Border:<\/strong> Adjust Border Type, Color, Size, and Radius.<\/li>\n\n\n\n<li><strong>Margin:<\/strong> Margin is the space between the image and the rest of the content. Increasing the margin will increase the size of the radar <g class=\"gr_ gr_21 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-del replaceWithoutSep\" id=\"21\" data-gr-id=\"21\">animation<\/g> if it is enabled.<\/li>\n\n\n\n<li><strong>Padding:<\/strong> Padding is the space between the image and its container. Increasing the padding will increase the size of the background.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMjMlMkYxMCUyRnNjcmVlbnNob3RzLTgzLnBuZyIgZGF0YS13PSIxMDI0IiBkYXRhLWg9IjU5NyIgZGF0YS1iaXA9IiI+PC9zdmc+\" data-spai=\"1\" alt=\"Customize Image Hotspots for the Elementor Widget by Premium Addons.\" class=\"wp-image-62755\"  \/><figcaption class=\"wp-element-caption\">Elementor Image Hotspots Widget Customize Hotspots Image<\/figcaption><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\">Text<\/h5>\n\n\n\n<ul>\n<li><strong>Text Color:<\/strong> Pick a color for the text.<\/li>\n\n\n\n<li><strong>Typography:<\/strong> Adjust font settings.<\/li>\n\n\n\n<li><strong>Text Shadow:<\/strong> Add a shadow behind the text.<\/li>\n\n\n\n<li><strong>Background Color:<\/strong> Pick a background color behind the text.<\/li>\n\n\n\n<li><strong>Margin:<\/strong> Margin is the space between the text and the rest of the content. Increasing the margin will increase the size of the radar animation if it is enabled.<\/li>\n\n\n\n<li><strong>Padding:<\/strong> Padding is the space between the text and its container. Increasing the padding will increase the size of the background.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMjMlMkYxMCUyRnNjcmVlbnNob3RzLTg0LnBuZyIgZGF0YS13PSIxMDI0IiBkYXRhLWg9IjU5NyIgZGF0YS1iaXA9IiI+PC9zdmc+\" data-spai=\"1\" alt=\"Style and Modify Text Hotspots for the Elementor Widget\" class=\"wp-image-62757\"  \/><figcaption class=\"wp-element-caption\">Elementor Image Hotspots Widget Customize and Style Hotspots Text <\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">3. Tooltips<\/h4>\n\n\n\n<ul>\n<li><strong>Text Color:<\/strong> Pick a color for the text.<\/li>\n\n\n\n<li><strong>Typography:<\/strong> Adjust font settings.<\/li>\n\n\n\n<li><strong>Text Shadow:<\/strong> Add a shadow behind the text.<\/li>\n\n\n\n<li><strong>Background Color:<\/strong> Pick a background color for the text.<\/li>\n\n\n\n<li><strong>Border:<\/strong> Select Border Type, color, size, and radius.<\/li>\n\n\n\n<li><strong>Box Shadow:<\/strong> Add a shadow around&nbsp;the container.<\/li>\n\n\n\n<li><strong>Margin:<\/strong> Margin is the space between the tooltip and the rest of the content.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNyUyRnN0eWxlLXRvb2x0aXBzLTEwMjR4NTk3LmpwZyIgZGF0YS13PSIxMDI0IiBkYXRhLWg9IjU5NyIgZGF0YS1iaXA9IiI+PC9zdmc+\" data-spai=\"1\" alt=\"Adjust Tooltips Styling Settings for Elementor Image Hotspots Widget\" class=\"wp-image-15545\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Adjust Tooltips Styling Settings for Elementor Image Hotspots Widget<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">4. Icon Label<\/h4>\n\n\n\n<ul>\n<li><strong>Minimum Width<em>:<\/em><\/strong><em> <\/em>Set a minimum width for the icon label in pixels.<\/li>\n\n\n\n<li><strong>Text Color:<\/strong> Pick a color for the text.<\/li>\n\n\n\n<li><strong>Typography:<\/strong> Adjust font settings.<\/li>\n\n\n\n<li><strong>Text Shadow:<\/strong> Add a shadow behind the text.<\/li>\n\n\n\n<li><strong>Background Color:<\/strong> Pick a background color for the text.<\/li>\n\n\n\n<li><strong>Border Type:<\/strong> Select Border Type, color, size, and radius.<\/li>\n\n\n\n<li><strong>Box Shadow:<\/strong> Add a shadow around&nbsp;the container.<\/li>\n\n\n\n<li><strong>Margin:<\/strong> Margin is the space between the tooltip and the rest of the content.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMjMlMkYxMCUyRnNjcmVlbnNob3RzLTg1LnBuZyIgZGF0YS13PSIxMDI0IiBkYXRhLWg9IjU5NyIgZGF0YS1iaXA9IiI+PC9zdmc+\" data-spai=\"1\" alt=\"\" class=\"wp-image-62759\"  \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">5. Container<\/h4>\n\n\n\n<ul>\n<li><strong>Background Color:<\/strong> Pick a color for the container background.<\/li>\n\n\n\n<li><strong>Border:<\/strong> Select Border Type, Color, Size, and Radius. <\/li>\n\n\n\n<li><strong>Box Shadow:<\/strong> Add a shadow around&nbsp;the container.<\/li>\n\n\n\n<li><strong>Margin:<\/strong> Margin is the space between the widget and the rest of the page content.<\/li>\n\n\n\n<li><strong>Padding:<\/strong> Padding is the space between the widget content and the edge of the container. Increasing the padding will increase the size of the background.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDU5NyIgd2lkdGg9IjEwMjQiIGhlaWdodD0iNTk3IiBkYXRhLXU9Imh0dHBzJTNBJTJGJTJGcHJlbWl1bWFkZG9ucy5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwNyUyRnN0eWxlLWNvbnRhaW5lci00LTEwMjR4NTk3LmpwZyIgZGF0YS13PSIxMDI0IiBkYXRhLWg9IjU5NyIgZGF0YS1iaXA9IiI+PC9zdmc+\" data-spai=\"1\" alt=\"Adjust and Customize Image Hotspots Container for Elementor Image Hotspots Widget\" class=\"wp-image-15547\" srcset=\" \" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Adjust Container&#8217;s style for Elementor Image Hotspots Widget<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Intro Giving your visitors the chance to interact with your website with widgets like Elementor Premium Image Hotspots will make them stay longer, improving the conversion chance. Click here to check Premium Image Hotspots Widget demo. Key Features 1. Image 2. Hotspots Click the &#8220;Add Item&#8221; button to add a new hotspot to your image. [&hellip;]<\/p>\n","protected":false},"author":15,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"Elementor Image Hotspots Widget - Premium Addons for Elementor","_seopress_titles_desc":"Dive into interactive visuals with Premium Addons&#039; Elementor Image Hotspot Widget. Highlight key areas and boost user engagement effortlessly.","_seopress_robots_index":"","ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","footnotes":""},"docs_category":[525],"docs_tag":[],"_links":{"self":[{"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/docs\/62673"}],"collection":[{"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/comments?post=62673"}],"version-history":[{"count":9,"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/docs\/62673\/revisions"}],"predecessor-version":[{"id":62799,"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/docs\/62673\/revisions\/62799"}],"wp:attachment":[{"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/media?parent=62673"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/docs_category?post=62673"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/premiumaddons.com\/wp-json\/wp\/v2\/docs_tag?post=62673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}