Draw Attention – Interactive Image Map

Live Demo | Upgrade Pro | Support

The draw attention plugin makes it easy for you to add custom tooltips or modals to the annotated/selected area of an image, map product, etc. Besides customizable tooltip/modal content, you can also use the built-in templated or custom templates.

The tooltip, modal content is easy to customize styles such as title or description fonts, color, size, background, and many more.

The draw attention is compatible with the latest themes, and page builders. This plugin works with the latest version of WordPress as well. Shortcodes can be added to any post, page, and widget. There you can use an unlimited number of shortcodes.

Features:

The next step to boost the conversion rate of the product, map, or image by using the annotation plugin in your WordPress website is to learn how to annotate/select the parts of the product, map, or image to engage customers more effectively.

⦁ Firstly, there are active color, hover color choosing options for the selected/annotated area.

⦁ The selected/annotated area’s border available options are size, color, hover color, box-shadow width, color.

⦁ There are options to Edit, Undo, Clear, or Delete for the annotated/selected area.

⦁ Secondly, there is two types of content views such as Tooltip and Modal.

⦁ Thirdly, Content title font size, font color, Description font size, color, and background color option available for customizing.

⦁ For the content, there are four(04) built-in and 20+ custom templates.

⦁ Embedded Map/Video code also can be used as content.

⦁ Among the options available in the Image annotation are showing a modal when clicking on a title, opening it in a pop-up window, adjusting font size and color, adding images, and changing background colors.

⦁ Description: font size, font color, background color are available in the content description.

⦁ In the Image annotation plugin, you have the option of editing annotation area or marks, as well as deleting unnecessary annotation area or marks. Selected/annotated areas are draggable.

⦁ Custom CSS allowed for the design/customize the template.

⦁ Unlimited shortcodes along with 100% responsive for all types of mobile devices.

⦁ Image annotation plugin supports all the latest themes and page builders, any post, page, and widgets as well as the latest version of WordPress.

⦁ Options for video and map by embedded code are available in the image Annotation content.

⦁ No limitation to creating/selecting multiple areas/annotations in a Single Image. There can be select the areas as much as you want.

Usage:

1. The first thing you have to do is to upload the image. For instance, it can be a Product, Map, or any kind of Image. In the picture of the Product or Map, you can mark/select the area you want.

2. Now you have the chosen specific area, you need to do style such as color, border color, size, and box-shadow options, etc. There is a wide range of options to annotate/select the area of the image. Under the section of “Area Style”, you will find these options.

3. The next part of the customization is the content section. Under the content section, you will learn about the content view options. There are two types of content view as Tooltips and Modal.

4. In the tooltip and modal content you can use our built-in templates, or custom template from the number of custom template collections.

5. After selecting the templates, you will see an option named “Title” as the title of the selected area of the image, and “Add image” where you can add or upload more detailed images. As well as adding a description, you can also change those content font size, color, background color, etc.

6. Also, Custom code can be used in addition to the templates by styling your own way you’re like to use it. For this, you need to write or paste our HTML code in the HTML section and CSS in the CSS code section.

Wrap Up:

In Conclusion, Image annotation displays your content such as poll result’s comparable table or adding short explanations or notes can be accomplished by clicking on the selected area to show as a modal component or hovering your mouse over it to show as a tooltip.