Themify Pointers - WordPress Plugin

How to Set Up Themify Pointers for Interactive Image Hotspots

Themify Pointers becomes useful when a regular image on the page is no longer enough: you need to highlight important areas, explain product details, mark points on a diagram, guide visitors to extra information, or link them to the next step. This guide focuses not on the plugin listing itself, but on practical work with the module inside Themify Builder: preparing the image, adding pointers, configuring tooltips, checking the result, and troubleshooting common issues.

The core logic is simple: you choose an image, place glowing circular hotspots on it, and assign each one its own tooltip text, color, reveal direction, always-visible mode, and, if needed, a link. But the quality of the final result depends less on simply installing the plugin and more on whether the image was chosen carefully, the tooltips are concise, the coordinates were checked after resizing, and visitors can clearly tell the hotspots are interactive.

Below, you will find a complete working workflow, from checking compatibility to publishing the block on a page. The guide also covers limitations that are easy to miss: the module depends on Themify Builder, the pointers are tied to the image uploaded into the module, and after changing the image size, you need to manually recheck the hotspot coordinates.

This guide is intended for a site owner, content editor, or developer who already uses the Themify ecosystem or is looking for a way to create interactive annotations without manually building an image map. If you need a full editor for arbitrary polygons, stronger keyboard accessibility, or a Gutenberg block without Builder, the related solutions section includes alternatives worth comparing.

Where Themify Pointers Actually Helps

The plugin solves a narrow but very clear problem: it turns an image from a static illustration into an interactive area with points of focus. In practice, it works best when the user needs to examine an image and quickly understand what matters in it. That might be a product photo with highlighted details, an interface diagram, a floor plan, an infographic, a promotional banner, a technical illustration, a process snapshot, or a service image with several key benefits.

Unlike a standard image block with a caption underneath, Themify Pointers lets you place explanations directly on the image. The reader does not have to match list numbers to parts of the picture: the hotspot sits next to the relevant detail, and the tooltip appears in place. The module's real strength is the flow "visual object -> brief explanation -> action or link". When that flow is genuinely needed, an interactive image communicates faster than a long text list.

Typical Use Cases for a WordPress Site

On a product page, the module can work as a visual product tour. For example, one hotspot on a piece of equipment can explain the housing material, another can point out a connector, a third can highlight the control area, and a fourth can lead to the technical specifications section. On a service page, a different approach works well: use a process diagram as the background, and let the hotspots reveal the consultation, preparation, launch, and validation stages.

On real estate sites, Themify Pointers is a good fit for a floor plan when you do not need a complex reservation map, just a few explanatory notes for specific areas. On educational pages, the module helps break down a complex screenshot or diagram into understandable parts. On promotional banners, tooltips can explain benefits, but this is where restraint matters: the image should give visitors useful context, not feel like a collection of flashing calls to action.

Another strong use case is product or service documentation. A screenshot of an interface with 3 to 5 hotspots often explains a settings screen better than a dry paragraph. But there is an important nuance here: if the tooltip just repeats the visible label already shown in the screenshot, it adds little value. The tooltip should explain why the element matters, what changes when the setting is selected, and where to verify the result.

When an Interactive Hotspot Is Worse Than Regular Content

You should not use Themify Pointers on every image. If the image is decorative, if all the information is already explained nearby in plain text, if the hotspots will be too crowded on a mobile screen, or if important content is hidden only inside a tooltip, a regular text block is usually the better choice. Interactive tooltips work best as reinforcement, not as the sole carrier of critical information.

Accessibility matters too. W3C documentation on images emphasizes that an image should have a text alternative, and complex images need a clear text equivalent. That is why, when using Themify Pointers in production content, it is worth placing a short text explanation or a list of key details next to the image. That way, the content is still available to users who do not interact with tooltips, rely on assistive technology, or have some browser behavior disabled.

How the Pointers Module Works in Themify Builder

The official documentation describes Pointers as a Builder addon. That matters because the module does not exist independently from Themify Builder and does not appear as a standalone Gutenberg block. Once installed, the addon adds its module to the Themify Builder panel under Addons, and you can use it while editing from the admin dashboard or from the front end where Builder is enabled.

The module is built around a single image. You upload or select an image from the media library, define the alt text and size, then click the relevant areas inside the Image Display region. Each click creates a pointer. After selecting a specific pointer, its individual settings become available: text, tooltip direction, always-visible mode, pointer color, tooltip background, text color, and link.

Basic Image Fields

The Module Title field lets you define a module heading. Themify documentation notes that it appears at the top, centered, in uppercase, and as an H3. This is not just a cosmetic detail: if the page already has a well-structured heading hierarchy, an extra heading inside the module can disrupt the visual rhythm. For a promotional block, the heading may be useful, but inside an already finished explanatory section, it is often better to leave it empty or keep it very short.

The Image field controls the actual image that will receive the hotspots. Themify explicitly notes that pointers can only be placed on the image uploaded into this field. That means the module is not suitable for marking up an arbitrary theme background, a gallery image, or an image coming from another block. If you need interactivity specifically on an image managed elsewhere, first decide whether that image can be moved into the Pointers module without breaking the layout.

Image Alt is not just a formality. It becomes the value of the image alt attribute, helps describe the meaning of the image, and supports accessibility. For a complex diagram, do not try to squeeze all tooltip text into the alt field. It is better to write a short description of the image's purpose and put the detailed explanation in regular text next to the module. For example: "Landing page diagram with hotspots explaining the offer block, contact form, and testimonials."

Image Size and Pointer Coordinates

The Image Dimension field controls the width and height of the image. The documentation includes an important warning: if you change the image size after placing the hotspots, the hotspot positions need to be adjusted again. This is a common trap. A site owner places hotspots on a large image, then reduces the width for a better mobile layout or changes the proportions, and on the published page the hotspots are still nearby, but no longer aligned with the correct details.

The practical order is this: first prepare the final image in the right proportions, then set its size in the module, and only after that place the hotspots. If you still have to replace or recrop the image later, do not try to keep the old coordinates by eye. Open the page in Builder, select each pointer, and verify its placement directly on the image.

Settings for a Single Hotspot

Each pointer has its own text and visual settings. Text should explain a specific detail rather than repeat the section heading. Tooltip Direction controls where the tooltip opens: up, down, left, or right. This matters most near the edges of the image. If a hotspot is placed close to the right edge, a tooltip that opens to the right may run into the block boundary or look cramped.

Always Visible keeps the tooltip visible at all times. This can be useful for 1 or 2 key hotspots that should be seen immediately, but it is a poor fit for a dense image with many explanations. Pointer Color, Tooltip Background, and Tooltip Text Color help align the module with the site's design. Think beyond style here and focus on contrast too: if the hotspot blends into the image, users may not realize it is interactive.

Link To adds a link to the pointer. Use it carefully. A link makes sense when the hotspot leads to a product page, a documentation section, or a detailed service page. But if every hotspot sends the user somewhere different, the overall context can get lost. In most cases, it is better to keep most hotspots informational and add a link only where there is an obvious next step.

Who Themify Pointers Is For, and When Another Tool Makes More Sense

Themify Pointers is convenient for users who already work in Themify Builder and want to add interactive annotations without writing custom code. If the site uses Themify themes or the standalone Builder plugin, the addon fits naturally into the existing workflow: add the module, choose the image, place the hotspots, adjust the colors, save the page. For an editor who does not work with CSS or JavaScript, this is noticeably easier than building an image map by hand.

Good Fit For

• Sites running Themify Builder that need to enhance one or several key images.
• Product pages, landing pages, training materials, and documentation where short explanations tied to image details are important.
• Teams that need visual annotations with color, reveal direction, and a link, but do not need a complex editor for arbitrary areas.
• Content editors who want to work through the Builder interface instead of code or theme templates.

May Not Be a Good Fit

• Sites without Themify Builder, where the main editor is Gutenberg, Elementor, another page builder, or a fully custom theme.
• Projects that require clickable polygons, separate complex-shaped areas, keyboard navigation for each zone, or strict image map accessibility.
• Large catalogs where interactive hotspots need to be generated dynamically for dozens of products from meta fields or an external database.
• Pages where core information should not depend on hover behavior because the audience heavily uses mobile devices and assistive technology.

If what you need is specifically a module for Themify Builder, Pointers handles that focused use case well. If you need independence from Builder, large-scale image maps, a shape editor, or deeper WooCommerce integration, it is worth comparing the alternatives listed later in this guide.

What to Check Before Installation

Before you upload the ZIP file, do not start with the download itself. First, confirm that the site is actually a good fit for this kind of module. Themify states that Builder addons require Themify Builder, which can run either through a current Themify theme or through the standalone Builder plugin. If your site has neither, installing Pointers will not give you the workflow you expect.

Check Builder Availability and Editing Context

Open the page where the interactive image is planned and verify that Themify Builder is available there. In the admin area, that may be backend edit mode, while on the front end it may be frontend edit mode via the admin toolbar. The Builder documentation describes both modes: you can add the module into a row and then save changes through the Builder toolbar.

If Builder is disabled for the relevant post type, or if the page is an archive, the module may not appear where you expect to see it. For the homepage, it is also important to remember a general Builder limitation: it works with a regular static page, not with the latest posts archive. So if you want a full interactive section on the homepage, first create a page, publish it, and assign it as the static front page in WordPress reading settings.

Check the Image

An interactive hotspot starts with a good image. Prepare an image without unnecessary tiny details and with enough open space around the areas where the hotspots will appear. If the background is too busy, the hotspot will get lost. If all important elements sit at the edges, the tooltips will have nowhere natural to open. If the image contains tiny text, that will still be a weak point on mobile screens.

It is better to decide in advance whether the image will be horizontal, square, or elongated. For product pages, a horizontal or moderately square format is usually the easiest to work with: it fits naturally into the content and leaves room for tooltips on the left or right. Very narrow vertical images are harder to annotate because the hotspots end up too close together and the tooltip covers a significant portion of the image.

Check the Tooltip Content

Write the hotspot text before opening Builder. For each hotspot, answer three questions: what detail does it explain, what should the visitor understand, and is there a next step? If the text runs longer than two short sentences, it is usually better to move the details below the image or split the material into separate content blocks.

Practical check: if the user cannot understand one hotspot without hovering over all the others, the image is probably overloaded or the tooltips are too interdependent. Themify Pointers works best with self-contained micro-explanations.

Installing and Enabling the Addon for the First Time

The official Themify instructions describe Builder addon installation as a standard WordPress plugin install. You download the addon ZIP from the Member Area, then install it through Plugins -> Add New -> Upload Plugin. After selecting the ZIP file, WordPress installs the plugin, and the user activates it from the plugins list.

Do not unzip the archive before uploading it to WordPress unless your browser already extracted it automatically. Themify documentation specifically notes that some browsers may unpack ZIP files on their own. In that case, you need to save the file specifically as a ZIP archive. If you select a folder instead of the archive, WordPress will not install the plugin through the standard upload screen.

Installation Order

1. Make sure Themify Builder is already available on the site, either through a Themify theme or the standalone Builder plugin.
2. Download the addon ZIP file from your Themify account area without sharing access details with third parties or outside services.
3. Open WP Admin -> Plugins -> Add New and click Upload Plugin.
4. Select the ZIP file, click Install Now, wait for the installation to finish, and activate the plugin.
5. Open a test page, enable Themify Builder, and check whether the Pointers module appears under Addons.

If the module does not appear, first check not Pointers itself but its dependency: is Builder active, is Builder available on the target page, are there JavaScript errors in the admin area, and does the user's role have access to the Builder interface? Installing the addon alone does not guarantee that the editor will see the module in a specific page context.

Importing the Demo Layout

Themify documentation says that each addon ZIP file includes a sample Builder data file. You can import it to understand how the demo layout is assembled. To do that, unzip the addon locally, locate the sample folder, and inside it find the ZIP file containing the Builder layout. Then open Builder on the target page from the front end and choose Themify Builder -> Import / Export -> Import.

This is not a required step for a production page, but it is useful as a learning sandbox. Import the demo layout onto a test page, see how the hotspots are arranged and which settings are used, then delete the test page or reuse the relevant ideas in your own layout. Do not import the sample layout over an important live page unless you have a backup of the existing Builder layout, because the import may replace the current structure.

First Check After Activation

Create a separate draft page and add the Pointers module to an empty row. Upload a simple image, place one hotspot, enter a short text, save Builder, and open the page in incognito mode. Testing on a draft is not just a formality; it helps separate installation problems from issues caused by a specific layout. If one hotspot works on a clean page, the basic Builder + addon + theme combination is functioning correctly.

Detailed Configuration After Installation

It is best to configure Themify Pointers in a specific order. First choose the final image and its size, then add the hotspots, then adjust the text and direction, and only after that set colors, visibility, and links. If you start with colors and text and then replace the image or change its size, part of the work will need to be redone.

Step 1. Lock In the Image and Its Role

Choose an image that can function as a map of attention. Do not use a random attractive photo if it does not contain clear areas of meaning. Themify Pointers works best with images where each object can be named: a button, a product detail, a process step, a room zone, an interface block, or a package component. If you find yourself needing a long explanation just to clarify what a hotspot is pointing to, the image may not be a good fit.

After choosing the image, fill out Image Alt. Do not use alt as a keyword dump. It should briefly describe the informational role of the image. For SEO, the goal is not to repeat the product name ten times, but to help both the search engine and the user understand the image content. In its image guidelines, Google emphasizes useful page context and meaningful descriptions rather than mechanical keyword stuffing.

Step 2. Set the Size Before Placing Hotspots

In Image Dimension, define the size that will be used in the published block. If the page design is responsive, check the layout at least on desktop and mobile widths. The hotspots should still land on the correct areas when the container width changes. If the module sits inside a narrow column, do not try to place too many hotspots; they will feel cramped and be harder to interact with.

Always recheck the coordinates after resizing. This rule is worth formalizing as an internal team checklist: first size, then hotspots, and after any size change, recheck the hotspots. The documentation explicitly warns that pointer placement needs to be corrected after a resize.

Step 3. Place the Hotspots by Priority

Start with 3 to 5 hotspots. That is usually enough for a product image or diagram. If you need more, group the information and think about whether two images would work better: one for the overview and one for the details. Too many glowing hotspots reduce trust in the block and turn it into visual noise.

Click the image inside the Image Display area where the first hotspot should go. Then select the created pointer, scroll to its settings, and fill in the text. Repeat this for the remaining hotspots. If a hotspot is placed inaccurately, fix its position before you start polishing colors and links. Deleting a hotspot is done through the black x in the lower-right corner of the image display for the selected pointer.

Step 4. Choose the Right Tooltip Direction for Each Hotspot

Do not use one direction out of habit. For the top portion of an image, a downward tooltip is often more comfortable; for the bottom, upward; for the right edge, left; and for the left edge, right. The goal is to have the tooltip open into free space rather than covering the object it is meant to explain.

Do not test only on desktop. On narrow screens, the tooltip may behave differently because of the container width. If the text is long, the tooltip can take up too much room. In that case, it is better to shorten the text, change the direction, or move the detailed explanation into a normal paragraph below the image.

Step 5. Decide Which Tooltips Should Always Stay Visible

Always Visible can help show users that the image is interactive. But if you enable it for every hotspot, the image quickly becomes overloaded. A good compromise is to keep one primary tooltip visible at all times so it explains the value of the block, while the others remain available on hover or interaction.

For mobile users, always-visible mode can be more helpful than hover-based behavior because touch is less obvious than a mouse cursor. But moderation still matters: one persistent tooltip teaches the interaction pattern, while five persistent tooltips smother the image. Test on a real phone, not only in a browser width emulator.

Step 6. Adjust Colors Without Losing Contrast

For Pointer Color, choose a color that stands out on the actual image. If the image is warm and bright, a white or pale yellow hotspot may disappear. If the image is dark, an overly dark tooltip can look like a stain. Contrast matters more than a perfect match to the brand palette: the visitor should immediately see the active hotspot and be able to read its text.

Treat the tooltip background and text color as a pair. Do not use a red background with white text for ordinary tooltips if red already signals error or warning elsewhere on the site. For neutral information, calmer accents work better: dark text on a light background, white text on a strong brand color, or a translucent background with sufficient contrast.

Step 7. Add Links Only Where There Is an Obvious Action

Link To turns a pointer from an explanation into a navigation step. That works well for product details, related sections, instructions, or a service card. But the link should be checked as part of the flow: does it open the right page, does it pull the user away too early, and does the tooltip text make it clear where the click will lead?

Do not add external links unless there is a real need. If a link leads off-site, the user should be able to tell that from the surrounding context. If it leads to an internal section on the same page, make sure the anchor exists and does not conflict with other elements. In WordPress, link and HTML safety depends on proper output handling, so it is best not to paste unverified HTML or scripts into these fields. Use standard URLs and text that actually helps the visitor.

Image Scenarios: Product, Diagram, Interface, and Promotion

Themify Pointers supports several strong use cases that differ not in settings, but in communication strategy. If you use the same approach for a product photo, a process diagram, and a banner, the block may be technically interactive but not especially helpful. Below are four scenarios where the module delivers value in different ways.

Product Photo with Detailed Callouts

For a product image, choose a visual where each hotspot answers a specific buyer question. For example, one hotspot on the material explains why it was chosen, one on a button describes its function, and one on a component links to compatible accessories. The text should be short and concrete: "Matte finish reduces glare in direct sunlight," "USB-C port for charging and data transfer," "Removable lid makes cleaning easier."

Do not place hotspots on things the user can already see without explanation. If the visitor can clearly see the product color, a tooltip that says "black finish" adds nothing. It is better to explain properties that are invisible or not obvious: material, purpose, connection to another section, or the intended use case. That is what separates a useful interactive product photo from a decorative image covered in dots.

Room Layout or Process Diagram

On a floor plan, hotspots can identify zones such as the entrance, reception, workspace, waiting area, or storage. For a process diagram, the hotspots can follow the direction of movement: request, processing, approval, launch, verification. Here it is important that the visual reading order feels clear. If the hotspots appear scattered randomly, add a short sentence before the module explaining the order in which the visitor should review them.

For diagrams like these, it can make sense to enable Always Visible on key hotspots so visitors immediately see the structure. But the detailed descriptions are usually better revealed through interaction. If the diagram is large, split it into multiple blocks: an overview map and then a more detailed version of each area. Themify Pointers does not replace a full navigation system for a complex object.

Interface Screenshot in Documentation

For training materials, use hotspots as commentary for interface elements. One hotspot can explain the save button, another the color setting, and a third the preview area. Here it is especially important not to duplicate the text already visible in the screenshot. Instead of "Save," write something like "Saves Builder changes after you verify the page output."

If the screenshot contains personal data, tokens, customer email addresses, or internal URLs, create a safe version of the image before uploading it to the module. Do not assume the tooltip will hide anything. Everything visible in the image can be saved or indexed as part of the page.

Promotional Banner with Explanatory Notes

For promotional content, Pointers should be used gently. The hotspots should explain the value, not shout. A good banner presents 2 or 3 benefits and one path to more detail. A poor banner tries to make every part clickable, adds long tooltips, and distracts from the main action.

If the module is used near the top of the page, check the image loading speed. A large interactive image with a heavy file can weaken the first impression. Compress the image to a sensible size, preserve the clarity of important details, and do not use more pixels than the layout actually needs.

Practical Example: Interactive Product Diagram on a Service Page

Imagine a service page that already includes a standard description and a contact button. You need to add an interactive diagram showing how the service works: one image with the stages of preparation, launch, validation, and support. The goal is to help visitors quickly understand the process and move to a more detailed section if a specific stage catches their attention.

Goal

Create a single visual block: an image with four hotspots, where each hotspot explains one stage of the process. The first hotspot covers gathering input, the second setup, the third launch, and the fourth result verification. One hotspot includes a link to a section with more detail, while the others work as informational tooltips.

Preparation

Before you start, both Themify Builder and the Pointers addon should already be enabled. The service page should be a regular WordPress page that can be edited in Builder. It is best to prepare the image in advance: a horizontal diagram, four clearly distinguishable zones, no tiny text, and no overloaded background. It is also better to draft the tooltip text before opening Builder.

Example text:

• Preparation: "We collect project goals, materials, and constraints."
• Setup: "We build the working layout and review the key content blocks."
• Launch: "We publish the page after checking it on desktop and mobile."
• Monitoring: "We review leads, clicks, and user questions."

Steps in Builder

1. Open the service page and enable Themify Builder.
2. Add a new row where the interactive diagram should appear after the introductory text.
3. Open the modules panel, find Pointers under Addons, and drag it into the row.
4. Select the prepared image in the Image field and fill in Image Alt.
5. Set the image size, then save the Builder draft so the base layout is locked in.
6. Click the first zone in Image Display, select the created pointer, and fill in Text.
7. Adjust Tooltip Direction so the tooltip opens into free space.
8. Repeat the same process for the other three hotspots.
9. Enable Always Visible for the most important hotspot so the user immediately understands that the block is interactive.
10. Choose Pointer Color, Tooltip Background, and Tooltip Text Color with sufficient contrast.
11. For the "Launch" hotspot, add a Link To pointing to the page section with the validation checklist.
12. Save Builder and open the page outside editing mode.

Checking the Result

On the published page, the image should be visible, at least one hotspot should immediately demonstrate the interaction pattern, and the remaining hotspots should open tooltips on hover or tap. Check that the tooltip does not cover the detail it is explaining and does not extend beyond a comfortable reading area.

Then open the page on a mobile device. If the hotspots are too close together, reduce their number, make the image larger within the block, or split the diagram in two. If the tooltips are too long, trim the text down to the essential meaning and keep the detailed explanation below the image. A good result is one where the user understands the interactivity within the first few seconds, instead of having to hunt for where to tap.

A Detail That Often Breaks This Example

The most common mistake in this workflow is placing the hotspots perfectly, then replacing the image with another version at a different size. Visually the image may look almost the same, but the coordinates no longer match. After every file replacement, crop change, or edit to the Image Dimension field, return to Image Display and recheck every hotspot.

How to Verify the Result on the Site

Testing Themify Pointers should go beyond "is it visible or not." You need to confirm that the interactive block actually helps the user, does not break the layout, does not hide important details, and remains clear across devices. Run the check immediately after setup, and then again after any change to the image, text, colors, row width, or theme.

Check in Normal Viewing Mode

Exit Builder mode, or open the page in a separate window where editing is not active. Hover over each hotspot, read the tooltip, and check the opening direction. If there are links, click them and confirm they lead where the text says they should. If Always Visible is enabled, make sure the persistent tooltip does not cover an important part of the image.

Check on a Mobile Screen

On a phone, interactivity is perceived differently. The user does not see a hover state before touching the screen, and tap accuracy is lower. That means the hotspots need to be visible enough to notice, but not so dominant that they cover the entire image. If the image is narrow, the tooltip may take up most of the screen. In that case, it is better to shorten the text and keep only the most important hotspots on the image.

Check SEO and Accessibility

Fill in the image alt text and add regular text nearby that briefly explains the content of the interactive block. This is not duplication for the sake of length. It is a safety net for both users and search engines. W3C recommends text alternatives for images based on their function, and Google ties image usefulness to page context. For a complex interactive diagram, that context matters even more.

If the tooltips contain important product specifications or service terms, do not hide them only inside the tooltip. Repeat the key points in a paragraph or list below the module. That way the user still gets the meaning without interaction, while the interactivity remains a helpful enhancement.

Check After Caching and Optimization

If the site uses caching, script minification, or delayed loading, test the page after clearing the cache. With interactive modules, the problem is sometimes not the HTML itself, but the timing of script initialization. The symptoms are simple: the image is there, the hotspots appear in the wrong place, the tooltip does not open, or it starts working only after a second refresh. In those cases, first test the page without optimization, then turn the optimizations back on one at a time.

Working with Color, Text, and Links Without Overloading the Block

An interactive image can easily become noisy. Themify Pointers gives you enough controls to keep the module clean, but those controls do not protect you from weak content decisions. The most important thing is to keep tooltips short, hotspots visible, the color system simple, and links meaningful.

Tooltip Text

An effective tooltip answers one question. Do not start every tooltip with the same phrase, such as "This is where..." or "This element shows...". Write like an interface editor: "This filter helps narrow the list quickly," "The testimonials section strengthens trust," "This link opens the full specification." That kind of text is shorter and clearer.

If the tooltip includes a link, phrase it so the destination feels expected. For example, "Open size chart" is clearer than "Learn more." If the link points to an external resource, it is better to make that clear in the text near the image instead of hiding the surprise inside the tooltip.

Color System

Do not assign a random color to each hotspot. In most cases, one hotspot color and one tooltip color are enough. Multiple colors only make sense when they carry meaning: red for risk, green for done, blue for information. If the colors do not communicate status, they only distract.

On photos with mixed backgrounds, check the visibility of each hotspot individually. The same orange hotspot may read perfectly on a gray background and disappear on warm wood tones. If the image is visually busy, use a higher-contrast tooltip background and avoid placing the hotspot directly on an area with a similar color.

Links and Flow Safety

In the Link To field, enter only URLs that are actually useful to the visitor. Do not use a pointer as a way to hide affiliate links or unrelated destinations. If a hotspot leads to a file download, the conditions should be clear before the click. If it leads to a form, make sure the user understands why they are being sent there.

Do not add unverified HTML, scripts, or embedded code from outside sources into the module fields. Themify Pointers is designed as a visual Builder module, not as a place for arbitrary code. If you need a more complex interactive behavior, it is safer to move that logic into a separate, validated component than to try to force it through tooltip settings.

Common Problems and Troubleshooting

With Themify Pointers, the failure usually is not the installation itself, but the combination of the image, Builder mode, hotspot coordinates, responsiveness, and optimization settings. Below are practical symptoms to review in order. Start with a simple test page: if everything works there, the problem is almost certainly tied to the specific layout, cache, image size, or an optimization conflict.

The Pointers Module Does Not Appear in the Builder Panel

Symptom: the addon is active in the plugins list, but Pointers does not appear under Addons in the modules panel.

Possible cause: Themify Builder is not active, is unavailable for this page type, the user lacks the required permissions, or the page is open in a context where Builder does not run.

What to check: open a standard WordPress page, enable Builder, and look under Addons. Check whether Builder is available in both backend and frontend edit mode. If you are using a Themify theme, make sure Builder is not disabled in theme settings or for the specific post type.

How to fix it: activate Builder, verify the user role, and test the module on a new page. If the module appears on the new page, move the setup there or look for a restriction in the original layout. If it does not appear anywhere, reinstall the addon ZIP using the standard method and check for errors in the admin panel.

The Hotspots Shifted After the Image Was Resized

Symptom: the hotspots are visible, but they no longer point to the correct details, especially after replacing the image, changing the block width, or adjusting Image Dimension.

Possible cause: the coordinates were placed for the previous image size. Themify documentation explicitly warns that pointer placement must be adjusted after a resize.

What to check: compare the current image size with the size used when the hotspots were first placed. Open Image Display, select each pointer, and verify its position relative to the object it is meant to mark.

How to fix it: lock in the final size, then reposition the hotspots manually. If the image will change often, it is better to use an image with a more stable composition or create a separate version specifically for the interactive block.

The Tooltip Opens Outside a Comfortable Viewing Area

Symptom: the tooltip gets cut off, covers an important detail, or extends beyond the image edge on desktop or mobile.

Possible cause: the Tooltip Direction is wrong, the text is too long, the hotspot sits too close to the edge, or the column is too narrow.

What to check: open each hotspot at different screen widths. Pay close attention to hotspots near the edges and near the bottom of the image.

How to fix it: change the opening direction toward free space, shorten the text, move the hotspot slightly closer to the center, or move the detailed explanation into text below the image. If the tooltip is still awkward, do not rely on that hotspot as a required source of information.

The Hotspot Color Gets Lost Against the Image

Symptom: visitors do not notice the interactive hotspots or mistake them for part of the image.

Possible cause: Pointer Color matches the background, the hotspot sits on a busy area, or there is no persistent tooltip to signal that the image is interactive.

What to check: look at the block without reminding yourself where the hotspots are. If your eye does not catch them within the first few seconds, the color is too weak.

How to fix it: choose a high-contrast color, reduce the number of hotspots, enable Always Visible for one key tooltip, or add a short note before the image such as "Hover over the hotspots to see details."

Tooltips Stop Responding After Optimization Is Enabled

Symptom: the image and hotspots are visible, but the tooltip does not open, opens inconsistently, or starts working only after the cache is cleared.

Possible cause: a conflict with caching, minification, script combining, or delayed loading. This is a common symptom with interactive modules in general, even when the addon itself is installed correctly.

What to check: clear both site and browser cache, temporarily disable JavaScript optimization, and test the page in a clean window. If the issue disappears, turn the optimizations back on one by one.

How to fix it: exclude Themify Builder scripts or the page containing the interactive block from aggressive optimization, if your cache plugin allows it. If you are not sure, it is better to roll back the latest optimization setting than to leave broken tooltips on an important page.

The Link in a Pointer Goes to the Wrong Place or Breaks the Flow

Symptom: clicking sends the user to the wrong section, an unrelated external URL, or a page that does not match the tooltip text.

Possible cause: the link was copied from a draft, the anchor changed, or the pointer was given a link out of habit rather than necessity.

What to check: click each linked hotspot in normal viewing mode and inspect the destination. Compare the tooltip text to the result of the navigation.

How to fix it: keep the link only where it is genuinely needed, update the URL, or remove Link To. For internal anchors, verify that the target block actually exists on the same page.

SEO, Accessibility, and Speed: What Matters Most

Interactive tooltips should not replace a properly structured page. Both search engines and users should still be able to understand the content without hovering over hotspots. That is why it is worth keeping normal text next to the image: a short explanation, a list of key areas, or a takeaway from the diagram. This matters even more if the tooltips hide product specifications, service stages, or selection criteria.

Alt Text and Image Context

Fill out Image Alt as a description of the image's meaning. If the image shows a service diagram with interactive hotspots, the alt text should describe the diagram, not merely the fact that hotspots exist. Do not use alt as a place for a long instruction. For a complex diagram, it is better to provide a short alt and a full text explanation nearby.

W3C specifically calls out image maps and complex images: they need overall context and clear descriptions of what their areas mean. Themify Pointers does not automatically turn every tooltip into a perfectly accessible map. So the responsibility for clear supporting text still belongs to the page author.

Indexing and Search Usefulness

Google recommends working with images through useful context, high-quality pages, and meaningful attributes. For Themify Pointers, that means: do not hide important wording only inside the image, do not reuse the same alt text on every image, do not overload the page with heavy files, and do not use interactivity just for the sake of interactivity.

If the module appears on a product page, it is helpful to add a short text summary underneath: what the diagram shows, which elements can be expanded, and where the detailed information lives. That kind of block helps both the reader and the search crawler. It also gives mobile users a fallback if interacting with the tooltip turns out to be less convenient.

Loading Speed

The main performance factor here is the image itself. Optimize the file before uploading it: reduce the physical dimensions to the needed width, compress it without noticeably losing detail, and do not embed massive camera originals if the module will appear in a narrow page column. Themify Pointers adds interactivity on top of the image, but it does not change the basic rules of working with media.

If the page matters for conversions, test it after setup while logged out and with caching enabled. Compare the first image render, the moment the hotspots appear, and how quickly the tooltips respond. If your optimizer delays scripts too aggressively, the interactivity may show up later than the user starts reading the page.

How to Maintain the Interactive Block After Publishing

Once published, Themify Pointers should not be left unattended. The interactive image is tied to the page content, the image itself, the links, the dimensions, and the design. If the product, service, layout, or color scheme changes, the block should be checked just as carefully as a contact form or a primary action button.

After Replacing the Image

Any image replacement is a reason to reopen the module and recheck the coordinates. Even if the new image looks almost identical, its proportions, crop, and object placement may differ. Do not trust the old hotspots. Review each one and make sure it still points to the correct detail.

After Changing the Theme or Container Width

If you changed the theme, Builder row settings, column width, spacing, or responsive styling, test the tooltip on both desktop and mobile. A tooltip that used to open cleanly may now start covering a neighboring block or extending beyond a comfortable area.

After Updates and Optimization Changes

Updates to Themify Builder, the theme, the cache plugin, or JavaScript optimization tools can affect interactivity. That does not mean updates are harmful. But after updating, it is worth opening important pages and running a quick check: the image is there, the hotspots are in place, the tooltip opens, the links work, and the mobile view is not broken.

When It Is Better to Remove Extra Hotspots

If the block gradually grows, remove the weaker hotspots. Interactivity should strengthen the page, not turn it into a puzzle. Keep the tooltips that answer real user questions, improve understanding of the product, or lead to a genuinely useful next step.

When Themify Pointers Is the Right Choice

Themify Pointers is worth using if you already work in Themify Builder and want to add clear interactive explanations to an image without writing custom code. It works especially well for product details, service diagrams, training screenshots, and lightweight promotional blocks where circular hotspots, tooltips, color, reveal direction, and one or two useful links are enough.

Before publishing, verify three things: Builder can actually see the module, the image is locked in at its final size, and the hotspots still land in the right places on both desktop and mobile. Then evaluate the content itself: each tooltip should explain a specific detail, and important information should not be available only inside a floating tooltip.

If that workflow fits your needs, you can move to the download section and download the latest version of Themify Pointers, then safely test the module on a draft page. Do not start with an important live page. Build one small example first, verify how the tooltips behave, and only then move the interactive block into production content.

If the project needs a complex map with arbitrary-shaped regions, independence from Themify Builder, or deeper support for Gutenberg or WooCommerce workflows, it makes more sense to compare alternatives before implementation. The right choice here is not the most "powerful" plugin, but the one that best matches your editor, your content, and the way the site is maintained.