Image Hotspot Widget

With this widget you can set animated markers for the images to point out the important details. On the items you can set up links to products categories or any custom URL.

Image Hotspot Widget

Content Tab

• Choose Image: You can choose an image from the media manager, or upload a new image.
• Alignment: Align the image to the left, right or center.

• Title & Description: Add the title and description that will appear in the hotspot.
• X Position: Set the position of the hotspot in the X asis.
• Y Position: Set the position of the hotspot in the Y asis.
• Link: Add the where the hotspot will link to.
• View: Choose between default, stacked or framed.
• Icon: Choose from a list of Font Awesome icons.
• Title HTML Tag: Set the title’s HTML tag to H1- H6, Div, or Span

Styles Tab

• Image size: Scale the image size up and down..
• Opacity: Control the opacity of the image.
• Border Type: Set the type of border, choosing from None, Solid, Double, Dotted, Dashed, or Groove.
• Border Radius: Set the border-radius, to control corner roundness.
• Box shadow: Add the box shadow effect to the image, and set the blur, spread, horizontal and vertical settings of the box shadow.

• Icon Size: Choose the size of the icon.
• Icon Padding: Set the amount of padding around the icon.
• Icon Rotate: Rotate the icon to any angle.
• Border Width: Set the width of the border.
• Border Radius: Set the radius of the icon border to control corner roundness.
• Primary Color: Choose the primary color of the icon.
• Secondary Color: Choose the secondary color of the icon.
• Primary Hover Color: Set colors for the hover.
• Secondary Hover Color: Choose the secondary color of the icon for hover.
• Animation: Set any animation for the hover state.

• Width: Set the width of the hotspot box.
• Padding: Set the amount of padding in the box.
• Background Type: Choose Color or Image as the background of the box.
• Border Type: Set the type of border, choosing from None, Solid, Double, Dotted, Dashed, or Groove.
• Border Radius: Set the border-radius, to control corner roundness.
• Box shadow: Add the box shadow effect to the box, and set the blur, spread, horizontal and vertical settings of the box shadow.

• Alignment: Align the heading to the left, right, center, or justified.
• Title Spacing: Space between the title and description.
• Title Color: Set the color of the title.
• Title Typography: Change the font size, family, weight, transform, style, line height and letter spacing.
• Description Color: Set the color of the description.
• Description Typography: Same options as the title typography.