Image Hotspot

The Responsive Addons for Elementor (RAE) Hotspot widget allows you to quickly create a product showcase and highlight some of its key features.

Content

Hotspot

1. 1.Background Map Image: Choose an image to be displayed as the main content of the widget.
2. 2.Size: Adjust the image size. Available Options: Auto, Contain, Cover.
3. 3.Position: Control the image position. Available options: Left, Center, Right, Unset.
4. 4.Height: This allows you to adjust the image height.

• Hotspot Indicator List: This option shows the total number of indicators added to the image. Drag and drop to change their position, duplicate or delete or add an indicator. Upon clicking on an indicator, it will open settings for it. You can select the content for the indicator from here. Each indicator has separate settings available.
  • Title & Description: This option contains two text fields where you can input the indicator Title and Description.
  • Button Text: Text field to input the button text.
  • Button Link: URL field to add a custom URL to the button.Note: Both “Button Text” and “Button Link” fields are required to contain a value for the button to be displayed.
  • Content Image: Allows you to add an image to the indicator. Image will be displayed towards the left of the indicator content.
    • Size: Adjust the image size. Available options: Auto, Contain, Cover.
    • Position: Control the image position. Available options: Left, Center, Right, Bottom, Initial, Top and Manual.Selecting “Manual” shows you the following two options.
    • Image Position X: Adjust the image position over the X axis.
    • Image Position Y: Adjust the image position over the Y axis.
  • Horizontal Position: Adjust the indicator position on the background image over the X-axis.
  • Vertical Position: Adjust the indicator position on the background image over the Y-axis.

Additional Settings

1. 1.Display Glow: Checking this setting will add a glow-like effect to all the indicators.
2. 2.Display Inner Circle: Checking this setting will display a smaller circle within the indicators.
3. 3.Display Content Condition: This allows you to permanently display the indicator content or display it only on hover.

Style

Indicator

1. 1.Background Color: Allows you to change the background color of the indicators.
2. 2.Padding: Adjust the size of the indicators by changing this property.
3. 3.Border Radius: Adjust the border radius of the indicators to make it appear as square or have rounded corners.
4. 4.Inner Indicator Circle > Color: Allows you to change the color of the inner circle within the indicators if the setting is active.
5. 5.Glow > Color: Allows you to change the color of the glow effect if the setting is active.

Content

1. 1.Background Color: Allows you to change the background color of the content box.
2. 2.Color: Allows you to change the text color of the content.
3. 3.Content Border Radius: Adjust the border radius of the content box to make it appear as square or have rounded corners.
4. 4.Title > Typography: Set the typography settings for the content title.
5. 5.Description > Typography: Set the typography settings for the content description.
6. 6.Button:
   1. 1.Typography: Set the typogra
   2. phy settings for the content button.
   3. 2.Background Color: Allows you to change the background color of the button.
   4. 3.Color: Allows you to change the text color of the button.
   5. 4.Width: Adjust the width of the button.
   6. 5.Padding: Adjust the size of the button by changing this property.
   7. 6.Border Radius: Adjust the border radius of the button to make it appears square or have rounded corners.