Back to Getting Started Guides

Introduction

Let’s start diving into the details of the interactive image editor and how it works. At the basic level, you’ll be able to:

  • Create an interactive image
  • Add hotspots to the interactive image
  • Customize the appearance of the hotspots
  • Customize the interactive image layout

General Settings

Within the Interactive Image Editor, the General Settings allow you to modify the background of the interactive image and information area, as well as the text color. In this section, you’re also able to enter in text that will show up by default in the hotspot content area upon loading the page.

Labels each aspect of the highlight options
1. Image Background Color

This will change the interactive image’s background color, especially if the image has a transparent background.

2. Title Color

This will change the interactive image’s title color for the more info area.

3. Text Color

The Text Color can be customized using this setting; this is the text that appears in the default more info and hotspot more info area.

4. More Info Background Color

The background color of the more info area can be tweaked to your liking!

5. Default More Info

Interested in writing out some default text? Feel free to do so to your heart’s content. This particular text appears upon page load before a hotspot is even selected, so this is fantastic for providing some extra nifty information.


Image

This section is where you will be choosing your image from, whether you are uploading it or selecting from your media library.

We would like to note that at this time, .SVG file types are not supported as it creates a conflict with the hotspots’ functionality.

Where to upload images

Highlight Styling

The Highlight Styling section grants you the ability to customize and tweak the color and opacity of the hotspot’s highlight and border. Let’s go over these sections.

Labels each aspect of the highlight settings for hotspots
1. Highlight Color

The hotspot’s Highlight Color can be adjusted to that of your liking using the Select Color button to select a color from the wheel, or a hex code you have in mind.

2. Highlight Opacity

The Highlight Opacity can be adjusted, controlling the transparency of the highlight.

3. Border Color

The hotspot’s Border Color can be edited using the Select Color button or by entering a hex code.

4. Border Opacity

The Opacity can be adjusted to appear more solid or transparent.

5. Border Width

The Border Width of the highlight can be increased or decreased to appear nonexistent, thin, or thick.

6. Always show hotspots for this image

The hotspot areas stay highlighted so visitors can see where they are located, even when they aren’t clicked yet.

7. Define multiple highlight styles for this image

You can use multiple highlight colors for the interactive image. If you choose to define multiple highlight styles, another section will pop up called, “Styles”.


Styles – Define multiple highlight styles for this image

Within the optional ‘Styles’ category, you can name the style so it’s easier to discern which style is what when assigning them to your hotspots. And, as expected, you can customize the highlight style like above! Let’s go over this real quick.

Create styles for highlights!

1. Title

A title can be assigned to the Highlight Style so that you are able to discern which is which.

The title is converted into CSS classes and must use only CSS-supported characters. Including [a-z], [0-9], hyphens and underscores. No special characters.

2. Color Scheme

If you would like to start off with a nifty preset color scheme and work your way from there, then this is the best place to start.

3. Highlight Color

The highlight color of the hotspot can be adjusted to your liking.

4. Highlight Opacity

This controls the transparency of the hotspot’s highlight.

5. Border Color

The border color can be tweaked for the highlight.

6. Remove Style

If you would like to just do away with the style, feel free to remove it.

Any hotspots using the removed style will automatically revert to the Default style.

7. Add Another Style

And if you’re feeling extra spicy, you can add and customize more styles!


Hotspot Areas

The Hotspot Areas is where the magic happens. Hotspots can be created via shapes that are assigned to coordinates. With the new and improved drawing tools, you will also be able to zoom in and pan the image with ease when creating hotspots.

Hotspot fields

Please take a look at our guide on how to create your hotspots.

1. Title

A title can be assigned to your hotspot, which will appear within the more information area.

The title will also be displayed within the small tooltips seen when hovering over the image hotspots. This is a default feature but can be hidden with CSS.

2. Style

A style can be assigned to the hotspot, which can be handy for creating a sold vs available interactive image.

3. Actions

Actions occur when a user interacts directly with the image. Upon clicking a hotspot, the hotspot can either:

  • Display more information
  • Or, Redirect to another URL.
4. Description

The description of the hotspot will appear below the title in the more information section. This uses a visual and text editor, so you are free to format the text as necessary. Additionally, you can insert shortcodes, videos, images, or HTML.

5. Detail Image

A detail image can be added via uploading or by URL to display an image within the more information section of the interactive image.


Color Scheme

Within the sidebar on the right-hand side of the interactive image editor, the Apply Color Scheme section allows you to quickly apply a theme to save on time. The best part is that you are still free to customize the colors as you please! At this time, there are twenty color schemes to pick from.

Change the color scheme of the DA image

Layout

Now the fun part–determining how to display your interactive image. We have a couple of neat choices here, so let’s dive into what each do.

Choose the DA layout and trigger
Left

The hotspot’s Title and More Information box will display on the left-hand side of the Draw Attention image.

Left Layout
Right

The hotspot’s Title and More Information box will display on the right-hand side of the Draw Attention image.

Right layout
Bottom

The hotspot’s Title and More Information box will display right below the Draw Attention image.

Bottom Layout
Top

The hotspot’s Title and More Information box will display above the Draw Attention image.

Top Layout
Lightbox

The hotspot’s Title and More information box will display in a lightbox pop-up that appears when clicking a hotspot within the Draw Attention image.

Lightbox layout
Tooltip

The hotspot’s Title will appear as a tooltip when hovering over a hotspot or clicking one within the Draw Attention image.

Tooltip layout

Show More Info On…

This neat setting allows you to change the trigger that fires the hotspot’s action. Currently these are the following triggers:

  • Click – When a user clicks the hotspot, an action occurs.
  • Hover – When a user hovers over the hotspot, the hotspot’s information will appear.

We will note that it is not recommended to use the Tooltip layout and Hover setting if you have added links to the hotspot’s More Description area. This makes it difficult for users to click the links. In this case, we would recommend using the Click setting instead.


Copy Shortcode

This nifty section allows you to simply copy and paste the Draw Attention image’s shortcode so that you can show off your awesome image.

Copy and paste the shortcode if necessary

If you need a refresher on how to display the interactive images, take a look at this guide.


Still stuck?

File a support ticket with our five-star support team to get more help.

File a ticket

  • Please provide any information that will be helpful in helping you get your issue fixed. What have you tried already? What results did you expect? What did you get instead?
  • This field is for validation purposes and should be left unchanged.


Related Guides