Image Hotspots Overview

Hotspots Element by Max Addons is a powerful tool that lets you add interactive image hotspots to your WordPress website using Bricks Builder.

You can highlight key points on an image or provide detailed information with tooltips. Additionally, you get the flexibility to create hotspots manually or dynamically using the Query Loop feature.

Features of the Hotspots Element#

Here are the key highlights of the Hotspots element for Bricks Builder:

• Dynamic Hotspots: Fetch hotspot data dynamically using query loops.
• Multiple Animation Options: Add animations like Expand or Heart Beat for visual appeal.
• Tooltips with Dynamic Support: Display additional information dynamically within tooltips.
• Custom Styling for Hotspots: Style each hotspot individually for a unique look.

Hotspots Element: Customization Options#

In the Content Tab of the Hotspots element, you'll find four main sections to configure and style your hotspots:

1. Image
2. Hotspots
3. Hotspot Style
4. Tooltip

Let's explore each section in detail.

IMAGE#

This section allows you to add and customize the image where hotspots will be placed.

• Add Image: Choose an image to use as the background for the hotspots.
• Image Size: Select the preferred size for your image.
• Dynamic Tags: Add images dynamically using tags like ACF or Meta Fields for advanced use cases.

HOTSPOTS#

This section is where you define and place the hotspots on the image. Just like the image, hotspots can be added in two ways: Manually or using a Query Loop. The query loop option is used to fetch hotspots data from posts, pages, or custom fields.

Options Available for Hotspots:

• Admin Label: This option is for admin purposes. It shows the label on the repeater field so that you can easily find the hotspot while editing the page later on.
• Horizontal Position: Set the horizontal position of the hotspot on the image.
• Vertical Position: Set the vertical position of the hotspot on the image.
• Type: Choose from three types of hotspots – Icon, Image, or Text.
• Link: Add a clickable link to your hotspot for better navigation.
• Tooltip: Enable this option to display a tooltip on hover or click.
• Custom Style: Style individual hotspots differently using unique customizations.
• Animation: Add animations such as Expand or Heart Beat to make hotspots visually engaging.

HOTSPOT STYLE#

Control the overall appearance of the hotspots in this section. You can customize:

• Size
• Typography
• Background Color
• Border Settings

TOOLTIP#

The Tooltip section allows you to configure and style tooltips for your hotspots.

Tooltip Options:

• Trigger: Choose whether tooltips open on Hover or Click.
• Tooltip Position: Set the position of the tooltip relative to the hotspot (e.g., Top, Bottom, Left, Right). The position adjusts automatically if space is limited.
• Show Arrow: Enable or disable an arrow pointing to the hotspot.
• Max Width: Set the maximum width for the tooltip content.
• Distance: Adjust the space between the hotspot marker and the tooltip.
• Styling Options: Customize tooltip appearance with options like:

  • Background Color
  • Border and Border Radius
  • Box Shadow
  • Padding

This is the detailed overview of the Hotspots element for Bricks Builder by Max Addons! I hope this helps you understand the features and functionality of the Hotspots element.