Back to Interactive Images Guides

interactive images

Styling the Interactive Image

Introduction

If you’d like to spruce up your Draw Attention images so that they can look extra neat, you have different options for styling the interactive image:

  • Easily change the colors of the interactive image area and text
  • Tweak the hotspot’s highlight color and border size
  • Create multiple highlight styles
  • Or, control more details by creating your own CSS file in your theme

If you haven’t yet, feel free to go ahead and create your first Draw Attention so that you are ready for styling the interactive image.

YouTube video

Styling within the Interactive Image Editor

General Settings

The General Settings allows you to tweak the colors of the interactive image’s background, title, text, and more information areas.

Assign colors to the interactive image and text

The image background color only appears for transparent images.

Highlight Styling

The Highlight Styling section gives you the ability to customize the hotspot’s highlight to your preferences. The highlight color and opacity can be tweaked, along with the border’s color, opacity, and finally the width.

Tweak the highlight's color and border

Define Multiple Highlight Styles

If you have the professional edition of Draw Attention installed, you can toggle on a setting called Define multiple highlight styles for this image. This will allow you to define multiple highlight styles and tweak each style to your liking, as well as name them for convenience. You are then free to assign the styles to the hotspots.

Assign multiple styles to hotspots

As an example below, we’ll use a trade show floor map to show some booths as sold, and some as available.  We’ll highlight sold booths in red, and available seats in green.

This approach is helpful for trade shows, concerts, conventions, etc.

Image depicting sold vs available booths.

Color Scheme

From within the sidebar on the right-hand side of the interactive image, you can select from twenty color schemes to apply to your interactive image. These are all preset color stylings, so you’re ready to hit the ground running with your awesome image.

Change the color scheme of the DA image, seen in this example provided in our hands-on interactive image editor guide.

For more details and in-depth information on what each setting does, feel free to take a look at this interactive image editor guide.

Advanced Styling with CSS Snippets

Tweak headers, font styles, thumbnails, tooltips, and more with some handy CSS snippets. This can be done within your theme by heading to your WordPress admin dashboard > Appearance > Customize, and then dropping these snippets into the Additional CSS area.

Take a peek at this guide to view a compilation of CSS snippets for styling the interactive image.

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