Draw Attention Pro

Some information only makes sense spatially — a floor plan, a site map, a product diagram, a seating chart. Draw Attention Pro turns any image into an interactive map: you trace clickable regions over the image, and visitors click or hover each region to see details, images, or links. Real estate sites map floor plans by room, campgrounds map sites by number, retailers map products by location. The plugin handles the tracing, highlighting, and detail display without JavaScript work.

Creating a hotspot map is a visual editor workflow: upload the image, draw polygons or rectangles over regions, fill in each region’s title, description, and link, and publish. The Pro edition extends the basics with multiple detail layouts, lightbox popups, custom colors per region state, and — the feature that sells it commercially — the ability to link a region straight to a WooCommerce product or external URL. It occupies the design niche beside gallery tools like Modula Gallery Pro: galleries show many images, Draw Attention makes one image interactive.

Competitive Features

• Visual hotspot editor — draw polygon, rectangle, or circle regions directly on the image with live editing, no coordinate math
• Hover and click interactions — regions highlight on hover and open detail content on click, with configurable behavior
• Detail popups with media — each region carries a title, description, featured image, and gallery inside a lightbox
• Region links to products or URLs — map a room to its product page, or a site to an external booking system
• Per-state color styling — fill, border, and hover colors configurable per region or globally
• Multiple maps per post — embed several interactive images on one page via shortcode or block
• Responsive scaling — hotspots scale with the image across breakpoints, staying aligned on mobile

Key Features

• Polygon tracing tools — freeform regions follow irregular shapes — building outlines, product parts, territories — with point-level editing
• Detail lightbox with gallery support — clicking a region opens a lightbox carrying rich text, images, and a call-to-action button
• Inline detail panel option — instead of a lightbox, details can display in a panel beside the image for layouts that avoid popups
• Color state system — default, hover, and selected states styled separately, with global themes and per-region overrides
• Shortcode and Gutenberg block embedding — maps embed anywhere with the block editor or classic shortcodes
• Custom image sizing — maps render at container width with the original image preserved for zoom scenarios
• Linked region navigation — regions can link to other maps, building multi-level interactive diagrams

Comparison with Competitors

Draw Attention Pro vs gallery plugins

Feature	Draw Attention Pro	Gallery plugins
Core model	One image, many interactive regions	Many images in a grid
Interaction	Region hover/click details	Lightbox per image
Spatial context	Preserved	Lost between images
Best for	Maps, plans, diagrams	Photo collections

Galleries answer “show me everything”; Draw Attention answers “explore this one thing spatially.” Real estate, hospitality, and technical documentation sites need the spatial model.

Draw Attention Pro vs hand-coded image maps

Feature	Draw Attention Pro	HTML
Creation	Visual editor	Manual coordinates
Responsive behavior	Automatic scaling	Manual recalculation
Detail content	Rich lightbox built-in	Requires custom JS
Maintenance	Edit regions visually	Edit coordinate arrays
Best for	Everyone practical	Legacy one-off pages

Hand-coded image maps break on responsive layouts and demand coordinate arithmetic for every region. The plugin replaces all of it with a visual editor that scales correctly by default.

Recommended Stack — run Draw Attention Pro for interactive diagrams and pair it with Code Snippets Pro for any custom behavior on top, and with a gallery plugin for the non-spatial photo content. On commerce sites, region-to-product links connect the map directly to WooCommerce.

Official Changelog

Version 3.1.10

Release Date: September 4, 2026

• Improvement: polygon editor snapping precision on zoomed images
• Fix: lightbox gallery navigation on touch devices
• Fix: region hover states on high-DPI screens

Version 3.1.9

Release Date: August 7, 2026

• New: region link option opens in a new tab with configurable rel attributes
• Fix: responsive scaling on embedded maps inside columns
• Improvement: compatibility with the latest WordPress release

Earlier maintenance releases in the 3.1 line refined the color state system and block editor embedding. No public per-version changelog is published for those maintenance versions; the current version distributed here includes all of them.

Frequently Asked Questions

How do I create the clickable regions?
In the visual editor: upload your image, then draw polygon, rectangle, or circle shapes directly over it. Each shape becomes a hotspot with its own title, description, and link — no coordinate math involved.

Do the hotspots stay aligned on mobile?
Yes. Regions scale proportionally with the image across screen sizes, so the interactive areas stay exactly where they should be at every breakpoint.

What happens when a visitor clicks a region?
By default a lightbox opens showing the region’s title, description, images, and call-to-action button. Alternatively, regions can link directly to a URL or product page, or show details in an inline panel.

Can one region link to a WooCommerce product?
Yes. Region links accept any URL including product pages, so a floor plan can map each room to its listing or a diagram can map parts to their purchase pages.

Can I put multiple maps on one page?
Yes. Each map embeds via its own shortcode or block, and regions can even link between maps for multi-level interactive diagrams.

Is the detail lightbox customizable?
Yes. Lightbox content supports rich text and galleries, and the region color states — default, hover, selected — are styled globally or per region.