CodeCanyon Wiloke Hotspot - Плагин WordPress

Руководство по настройке CodeCanyon Wiloke Hotspot для интерактивных изображений в Elementor

CodeCanyon Wiloke Hotspot нужен не для того, чтобы просто поставить красивые точки поверх картинки. Его смысл раскрывается, когда изображение становится рабочей навигацией: посетитель видит товар, деталь услуги, фрагмент интерьера или медиа-материал, наводит курсор или нажимает на точку и получает контекст прямо на месте.

В этом руководстве разберём, как подойти к плагину как к инструменту для Elementor и WooCommerce: что проверить перед установкой, где искать виджет после активации, как подготовить изображение, как расставлять точки, когда использовать товарный tooltip, а когда лучше обойтись текстом, изображением или ссылкой на YouTube.

Материал не повторяет карточку продукта. Здесь важнее практическая логика: как собрать понятный hotspot-блок, как проверить его на публичной части сайта, почему точки могут съехать на мобильном экране, что делать с кешем, конфликтами темы и обрезанными всплывающими подсказками.

Как работает hotspot-блок и где он полезен

Hotspot - это интерактивная точка, закреплённая на определённой части изображения. В обычной галерее посетитель видит картинку целиком и сам пытается понять, что в ней важно. В hotspot-блоке автор страницы заранее отмечает значимые места: товар на фотографии, кнопку устройства, часть интерьера, элемент схемы, фрагмент карты или деталь услуги.

Wiloke Hotspot for Elementor, судя по официальной демо-странице и карточке CodeCanyon, делает эту механику через Elementor. Пользователь работает в визуальном редакторе, выбирает изображение и добавляет точки с разным типом содержимого. Подтверждённые типы включают иконку, изображение, текст, YouTube и товар WooCommerce. Для магазина это особенно полезно, потому что точка может не просто объяснить деталь на фотографии, а вести к карточке товара или показывать товарную информацию.

Главная выгода такого блока - не анимация сама по себе, а сокращение пути между визуальным интересом и действием. Посетитель смотрит на фотографию комнаты, комплекта одежды или набора аксессуаров и сразу понимает, какой товар где находится. Если товарный tooltip показывает изображение, название и цену, пользователь меньше переключается между страницами и быстрее принимает решение, стоит ли открыть карточку товара.

При этом hotspot не заменяет каталог, меню, фильтры и полноценные карточки товаров. Он работает как визуальный мост между вдохновляющей картинкой и конкретным объектом. Поэтому лучше всего плагин раскрывается в местах, где обычный список товаров выглядит сухо, а одно изображение без пояснений оставляет слишком много вопросов.

Типичные сценарии для магазина

Для WooCommerce-магазина hotspot-блок уместен на посадочной странице коллекции, в описании набора, в lookbook-разделе, на странице бренда или в статье с подборкой. Например, на фотографии рабочего места можно отметить монитор, лампу, кресло и аксессуары. На фотографии кухни - посуду, технику и декор. На изображении одежды - отдельные элементы комплекта.

В таком сценарии важно не перегружать изображение. Если на фотографии десять товаров, не всегда нужно ставить десять точек. Посетитель должен быстро понять, где находится главный объект, а не разгадывать интерактивную головоломку. Для первого блока обычно достаточно 3-5 точек, особенно если подсказки содержат цены или изображения.

Сценарии без WooCommerce

Плагин можно применять и на сайтах без магазина, если в вашей версии доступны текстовые, графические или YouTube-точки. Например, на странице услуги можно отметить этапы процесса на схеме, на странице объекта недвижимости - зоны помещения, на обучающей странице - детали интерфейса или оборудования, на портфолио - элементы реализованного проекта.

Здесь принцип тот же: каждая точка должна отвечать на конкретный вопрос. Если подпись не добавляет смысла, hotspot становится декоративным шумом. Хороший hotspot объясняет то, что невозможно удобно раскрыть одной подписью под изображением.

Кому подойдёт плагин и где лучше выбрать другой подход

CodeCanyon Wiloke Hotspot подойдёт владельцам сайтов на WordPress, которые уже используют Elementor и хотят сделать изображения более прикладными. Особенно логично смотреть в его сторону, если сайт связан с визуальным выбором: товары, интерьер, одежда, техника, обучение, схемы, карты, каталоги объектов, подборки материалов.

Для контент-менеджера плюс в том, что работа происходит в привычной логике Elementor: блок добавляется на страницу, настройки меняются визуально, результат можно сразу проверить в редакторе и на публичной части сайта. Для владельца магазина плюс в связке с WooCommerce: не нужно вручную переписывать название и цену товара в каждом tooltip, если товарная точка подтягивает эти данные из магазина.

Плагин может быть лишним, если ваш сайт не использует Elementor, если все изображения должны оставаться статичными, если вам нужна сложная карта с масштабированием и геоданными, или если важна полноценная система аннотаций с ролями, историей изменений и доступом по правам. Для таких задач лучше рассматривать специализированные карты, базы знаний или отдельные интерактивные конструкторы.

Также стоит осторожно подходить к hotspot-блокам на страницах, где уже много анимаций, слайдеров и тяжёлых виджетов. Elementor сам по себе может требовать больше ресурсов, а интерактивные подсказки добавляют CSS и JavaScript. Это не означает, что плагин обязательно замедлит сайт, но каждый новый интерактивный блок нужно проверять на реальной странице, а не только в редакторе.

Когда Wiloke удобнее стандартного hotspot-виджета Elementor Pro

Если на сайте уже есть Elementor Pro, у вас может быть доступ к собственному hotspot-виджету Elementor. В этом случае Wiloke имеет смысл рассматривать не как обязательную замену, а как альтернативный виджет с акцентом на WooCommerce и медиа-точки. По официальной демо-странице Wiloke видно, что продукт делает упор на товарные подсказки, текстовые/графические точки и YouTube-ссылки.

Если же вам хватает стандартного виджета Elementor Pro, у вас нет WooCommerce и не нужны отдельные варианты медиа-точек, дополнительный плагин может оказаться избыточным. Чем меньше сторонних расширений у страницы, тем проще поддерживать её после обновлений.

Что проверить перед установкой на WordPress-сайте

Перед установкой интерактивного Elementor-виджета полезно не торопиться. Hotspot-блок зависит сразу от нескольких слоёв: WordPress, Elementor, активной темы, WooCommerce, скриптов оптимизации, кеша и качества исходного изображения. Если любой слой ведёт себя нестабильно, проблема может проявиться не в админ-панели, а на публичной странице.

Начните с проверки совместимости. Карточка CodeCanyon содержит исторические значения по версиям WordPress, Elementor и WooCommerce, но такие данные быстро устаревают. Поэтому перед установкой сравните текущую версию сайта с карточкой продукта, демо-страницей и документацией разработчика. Если сайт работает на сильно более новой версии Elementor или WooCommerce, сначала проверьте плагин на копии сайта.

• Убедитесь, что Elementor установлен, активирован и открывает редактор без ошибок.
• Если планируете товарные точки, проверьте, что WooCommerce активен, товары опубликованы, у товаров есть изображения, названия и корректные цены.
• Проверьте лимиты сервера для Elementor: нехватка памяти часто проявляется как зависание редактора или ошибка сохранения.
• Отключите агрессивную оптимизацию JavaScript на тестовой странице, если раньше на сайте уже ломались всплывающие элементы или виджеты Elementor.
• Подготовьте исходное изображение в стабильном размере, без автоматической обрезки, которая меняет важные области кадра.

Отдельно проверьте тему. Hotspot-блок часто находится внутри секции Elementor, а секция может наследовать стили темы: обрезку содержимого, z-index, transform, overflow, анимации входа. Если тема агрессивно управляет контейнерами, tooltip может оказаться под соседним блоком или обрезаться по краю.

Практическая проверка перед установкой: создайте тестовую страницу, добавьте одну обычную секцию Elementor, поместите туда простое изображение и только один hotspot. Если один элемент работает стабильно, расширяйте блок. Не начинайте с большой витрины на десять точек.

Установка и первичная проверка виджета

Установка коммерческого WordPress-плагина обычно выполняется через загрузку ZIP-архива в админ-панели. Не меняйте файлы архива вручную и не распаковывайте его в папки WordPress, если обычный способ установки работает. Для большинства сайтов достаточно пройти путь Plugins - Add New - Upload Plugin, выбрать ZIP-файл, нажать Install Now и затем Activate.

После активации не переходите сразу к рабочей странице. Сначала откройте Elementor на черновике или тестовой странице и найдите виджет Wiloke Hotspot в панели виджетов. Название может отличаться в зависимости от версии и группировки Elementor, поэтому используйте поиск по слову Hotspot или Wiloke. Если виджет не находится, очистите кеш Elementor, обновите список элементов и проверьте, что сам плагин активен.

Минимальный тест после активации

Первичная проверка должна быть простой, потому что её задача - отделить системную проблему от ошибки настройки. Создайте пустую тестовую страницу, добавьте одну секцию, вставьте виджет Wiloke Hotspot, выберите изображение из медиатеки и добавьте одну точку с коротким текстом. Сохраните страницу и откройте её в обычном браузере, желательно в режиме без авторизации.

1. Проверьте, что изображение загружается на публичной части сайта.
2. Наведите курсор или нажмите на точку, в зависимости от выбранного trigger-режима.
3. Убедитесь, что tooltip появляется не только в редакторе Elementor, но и на опубликованной странице.
4. Откройте страницу на планшетной и мобильной ширине через режим адаптивности браузера.
5. Сохраните страницу ещё раз и проверьте, что точка не изменила позицию после повторного открытия редактора.

Если такой минимальный тест работает, можно переходить к настоящему блоку. Если не работает, не добавляйте новые точки и не меняйте десятки параметров одновременно. Сначала решите базовую проблему: виджет не найден, tooltip не открывается, скрипты не загружаются или результат отличается от редактора.

Настройка изображения, точек и всплывающих подсказок

Подробная настройка начинается не с выбора красивой анимации, а с ответа на вопрос: что посетитель должен понять после взаимодействия с изображением. Для Wiloke Hotspot это особенно важно, потому что плагин поддерживает несколько типов точек. Одна и та же фотография может работать как товарная витрина, медиа-гид, схема услуги или учебная аннотация.

Сначала настройте основу: изображение, количество точек, тип содержимого и способ открытия tooltip. Только после этого переходите к цветам, пульсации, размерам и декоративным эффектам. Такой порядок снижает риск, что вы потратите время на оформление блока, который потом окажется неудобным на мобильных экранах.

Исходное изображение

Изображение должно быть достаточно крупным, но не чрезмерно тяжёлым. Для страницы магазина или посадочной страницы обычно важнее стабильная ширина и чёткие области, чем максимальное разрешение. Если картинка автоматически обрезается темой или контейнером Elementor, координаты точек могут визуально съехать. Поэтому лучше выбирать изображение с предсказуемым соотношением сторон и не ставить важные объекты слишком близко к краям.

Если изображение показывает товары, подготовьте его как витрину: объекты не должны перекрывать друг друга, между ними должно быть достаточно воздуха для точек, а фон не должен спорить с marker-иконками. На фото с большим количеством мелких предметов tooltip будет работать хуже, потому что посетитель не сразу поймёт, какая точка к чему относится.

Позиции точек

Точку лучше ставить не точно в центр объекта, а в область, где она не закрывает важную деталь. Например, если отмечаете товар, marker можно сместить к краю предмета, а tooltip вывести в свободную часть изображения. На мобильном экране это особенно заметно: точка, которая на большом мониторе выглядит аккуратно, может закрывать лицо, цену, кнопку или ключевой фрагмент.

После расстановки точек обязательно проверьте адаптивные режимы Elementor. У Elementor и многих hotspot-виджетов позиционирование часто задаётся в процентах относительно изображения. Это удобно, но результат зависит от того, сохраняется ли пропорция изображения. Если контейнер на мобильном экране меняет высоту или кадрируется, точка может остаться математически правильной, но визуально попасть не туда.

Trigger: hover или click

Официальная демо-страница Wiloke указывает поддержку hover и click trigger. Hover удобен для desktop-сценариев, где пользователь водит курсором по изображению. Click лучше подходит для мобильных устройств и для tooltip, внутри которого есть ссылка, картинка или товарная информация. Если вы не уверены, выбирайте click для блоков, где взаимодействие должно работать одинаково на разных устройствах.

Смешивать hover и click в одном сложном блоке стоит осторожно. Посетитель не должен гадать, почему одна точка открывается при наведении, а другая требует нажатия. Исключение - когда разные типы точек явно отличаются визуально: например, товарные точки открываются по клику, а короткие информационные метки показываются при наведении.

Оформление marker и tooltip

Пульсация помогает привлечь внимание, но её не стоит превращать в постоянный визуальный шум. Если точек много, лучше сделать один общий стиль marker и выделить только главные точки. Цвет выбирайте с учётом фотографии: marker должен быть заметен на тёмных и светлых участках, но не должен выглядеть как аварийный сигнал, если это не связано со смыслом блока.

Tooltip должен быть короче обычной карточки товара или описания услуги. Его задача - дать быстрый контекст и направить дальше. Если tooltip превращается в длинный текст, пользователь теряет фокус на изображении. В таком случае лучше дать краткую подсказку и ссылку на отдельную страницу, карточку товара или развёрнутый раздел ниже.

После каждой группы изменений сохраняйте страницу и проверяйте публичную часть. Elementor-редактор часто показывает виджет в более благоприятной среде, чем реальная страница с кешем, минификацией, темой и сторонними скриптами.

Товарные точки WooCommerce: как связать изображение с покупкой

Товарные точки - самый предметный сценарий Wiloke Hotspot. По официальным источникам плагин позволяет закреплять WooCommerce-продукты на изображении, а tooltip может показывать товарную информацию. Это превращает обычное lifestyle-фото в навигацию по товарам: посетитель видит готовый комплект и может быстро перейти к интересующему объекту.

Перед настройкой такого блока подготовьте товары. У каждого товара должны быть опубликованный статус, основное изображение, понятное название, цена или другой ожидаемый коммерческий контекст. Если товар скрыт из каталога, не опубликован или не имеет картинки, tooltip может выглядеть неполным, даже если сам hotspot настроен правильно.

Как выбрать товары для hotspot-изображения

Не каждую карточку стоит выносить в hotspot. Лучше выбирать товары, которые визуально считываются на изображении. Если предмет маленький, похож на другие элементы или частично закрыт, точка может запутать посетителя. Для сложных фото используйте меньше точек и группируйте похожие товары в обычный список под изображением.

Хороший товарный hotspot отвечает на три вопроса: что это за предмет, сколько он стоит или почему он важен, куда перейти дальше. Если tooltip показывает только название без контекста, он мало чем отличается от обычной подписи. Если tooltip перегружен описанием, он начинает конкурировать с карточкой товара.

Проверка товарной подсказки

После выбора товара наведите курсор или нажмите на точку, откройте tooltip и проверьте, что в нём отображается ожидаемая информация. Затем нажмите на ссылку, если она предусмотрена, и убедитесь, что переход ведёт к правильной карточке. Не проверяйте только первую точку: если в блоке несколько товаров, ошибка часто появляется в одном из них из-за черновика, отсутствующего изображения или неверно выбранного товара.

На публичной части дополнительно проверьте, как tooltip выглядит рядом с ценой, скидкой и длинным названием товара. Если название переносится в 3-4 строки, уменьшите текст в товаре, задайте более широкую подсказку, выберите другую позицию tooltip или оставьте в подсказке только самый нужный контекст.

Медиа-точки, текстовые подсказки и YouTube-ссылки

Не все hotspot-блоки должны вести к товару. Официальные источники Wiloke упоминают поддержку Image, Text и YouTube, поэтому плагин можно использовать как компактный визуальный справочник. Это удобно для страниц услуг, портфолио, обучающих материалов, обзоров объектов и лендингов, где одно изображение содержит несколько смысловых зон.

Текстовая точка хороша для короткого объяснения. Например, на схеме установки можно отметить блок питания, соединение, датчик и кнопку. На странице агентства можно отметить этапы работы на инфографике. На странице интерьера можно подписать материалы, зоны хранения, световые сценарии. Текст не должен дублировать длинный абзац рядом с изображением. Его задача - дать мгновенную подсказку в контексте конкретного места.

Когда использовать изображение внутри подсказки

Графическая подсказка полезна, если нужно показать увеличенную деталь, альтернативный ракурс или пример результата. Например, на общей фотографии можно отметить материал, а в tooltip показать крупный фрагмент фактуры. Важно следить за весом медиа: несколько больших изображений внутри подсказок могут замедлить страницу сильнее, чем один основной блок.

Для изображений внутри tooltip используйте понятные миниатюры. Если посетитель открывает подсказку, он должен сразу увидеть разницу между основным фото и дополнительным фрагментом. Не вставляйте туда случайную декоративную картинку, которая не объясняет точку.

YouTube как точка перехода

YouTube-точка подходит, если видео действительно расширяет смысл отмеченной области. Например, на изображении товара можно отметить механизм и дать видео-демонстрацию, на фотографии услуги - короткий ролик процесса, на схеме обучения - объясняющий фрагмент. Но не стоит делать YouTube-точки ради самого факта видео. Если ролик общий и не связан с отмеченной зоной, лучше разместить его отдельным блоком ниже.

Проверьте, как ссылка или встроенный переход ведёт себя на мобильном экране. Если пользователь нажимает на точку, но не понимает, что открылось, добавьте короткий текст в tooltip: что он увидит в видео и зачем ему переходить дальше.

Практический пример: витрина комплекта с товарами и подсказками

Рассмотрим сценарий для WooCommerce-магазина, который продаёт товары для домашнего рабочего места. Есть фотография готового стола: монитор, лампа, кресло, клавиатура и настольный органайзер. Нужно превратить фото в интерактивную витрину, где посетитель сможет быстро открыть товарные подсказки и перейти к карточкам отдельных товаров.

Цель

Цель - получить один Elementor-блок, где изображение не просто вдохновляет, а связывает визуальную сцену с конкретными товарами. Посетитель должен понять, какие предметы доступны в магазине, какие из них важны для комплекта и куда перейти для подробностей.

Подготовка

Перед сборкой блока подготовьте опубликованные товары WooCommerce. У каждого товара должны быть название, цена, основное изображение и корректная карточка. Затем подготовьте основную фотографию рабочего места. Желательно, чтобы товары на ней были достаточно крупными, а между предметами оставалось место для точек и tooltip.

Шаги настройки

1. Создайте новую тестовую страницу или откройте нужную посадочную страницу через Edit with Elementor.
2. Добавьте секцию, в которой будет интерактивная витрина, и поместите туда виджет Wiloke Hotspot.
3. Выберите основное изображение рабочего места и проверьте, что оно не обрезается контейнером.
4. Добавьте первую точку на монитор и выберите тип содержимого, связанный с WooCommerce Product, если он доступен в вашей версии.
5. Выберите нужный товар, задайте позицию точки и проверьте, где откроется tooltip.
6. Добавьте ещё 2-4 точки для лампы, кресла и аксессуаров. Не отмечайте каждый мелкий объект, если он не нужен для решения пользователя.
7. Настройте общий стиль marker: заметный цвет, умеренный размер, мягкая пульсация или без пульсации, если фотография уже насыщенная.
8. Выберите click trigger, если блок должен удобно работать на мобильных устройствах.
9. Сохраните страницу и проверьте её в обычном браузере.

Ожидаемый результат

На публичной странице посетитель видит изображение рабочего места и несколько точек. При взаимодействии с каждой точкой появляется tooltip с товарным контекстом. Если пользователь заинтересовался предметом, он переходит к карточке товара, а не ищет его вручную в каталоге.

Нюанс, который часто мешает

Самая частая ошибка в таком сценарии - слишком много точек и слишком длинные подсказки. Фотография превращается в перегруженную карту, где посетитель видит анимацию, цены и текст, но теряет общий смысл. Для первого запуска оставьте только ключевые товары, а дополнительные ссылки вынесите в обычный блок ниже изображения.

Проверка результата: откройте страницу как новый посетитель и попробуйте найти один товар только по изображению. Если вы сразу понимаете, куда нажать и что произойдёт дальше, блок собран правильно.

Практичные идеи применения для разных типов сайтов

Hotspot-блок полезен не только на товарной витрине. Его можно адаптировать под разные роли: администратор собирает блок, редактор поддерживает контент, посетитель получает подсказку, специалист поддержки проверяет проблему. Ниже - идеи, которые опираются на подтверждённые типы содержимого Wiloke Hotspot и обычную практику Elementor-сайтов.

Магазин с готовыми образами

Для магазина одежды, мебели, техники или декора hotspot можно использовать как визуальный подборщик. Редактор готовит фотографию комплекта, выбирает 3-5 товаров и связывает их с точками. Посетитель видит готовое решение, открывает товарные подсказки и переходит только к интересующим карточкам. Проверка простая: каждый отмеченный товар должен быть виден на изображении и вести к правильной карточке.

Каталог объектов или услуг

Для каталога недвижимости, ремонта, оборудования или туристических объектов hotspot помогает объяснить сложную сцену. Текстовые и графические точки могут показывать зоны помещения, материалы, особенности объекта, этапы работы или важные детали. Здесь не обязательно вести пользователя к покупке. Достаточно, чтобы точка отвечала на вопрос, который возник бы при просмотре изображения.

Обучающая статья или база знаний

На обучающей странице hotspot может заменить длинное перечисление деталей под картинкой. Например, можно показать интерфейс, схему устройства, макет страницы или процесс настройки и отметить отдельные зоны. Пользователь читает основной текст ниже, но в изображении быстро видит, какая область за что отвечает.

Страница поддержки

Для поддержки полезен другой подход: hotspot не продаёт, а объясняет, что проверить. На изображении можно отметить кнопку, поле, индикатор или часть интерфейса, где пользователь чаще ошибается. В tooltip стоит давать короткую инструкцию: что должно быть видно, что означает неправильное состояние и куда перейти дальше.

Во всех сценариях важен один принцип: точка должна быть связана с действием или проверкой, а не просто украшать изображение. Если невозможно объяснить, зачем пользователь должен открыть tooltip, такую точку лучше убрать.

Проверка результата на публичной части сайта

После настройки не ограничивайтесь предпросмотром Elementor. Редактор показывает блок в режиме авторизованного пользователя и часто не отражает поведение кеша, минификации, lazy loading, прав доступа и оптимизаций темы. Публичная страница - единственное место, где можно понять, как блок увидит реальный посетитель.

Проверка на desktop

Откройте опубликованную страницу в браузере без режима редактирования. Проверьте загрузку изображения, видимость всех точек, открытие tooltip, кликабельность ссылок и отсутствие обрезки. Если tooltip должен показывать товар, убедитесь, что изображение, название и цена товара выглядят аккуратно. Если точка ведёт на YouTube или другую страницу, проверьте сам переход.

Проверка на мобильной ширине

На мобильной ширине важны не только размеры. Проверьте, попадает ли точка на тот же объект, не закрывает ли она важную область и удобно ли её нажимать. Если tooltip открывается по hover, мобильный сценарий может быть неочевидным. Поэтому для ключевых блоков лучше использовать click или другой режим, который понятен при касании.

Проверка после кеша и оптимизации

Если на сайте включены кеш, объединение CSS, отложенная загрузка JavaScript или оптимизация Elementor-ассетов, после сохранения очистите кеш и проверьте страницу заново. Если проблема появляется только после оптимизации, не обвиняйте сразу Wiloke. Сначала временно отключите спорную настройку оптимизатора на тестовой странице и сравните поведение.

Хорошая проверка результата всегда отвечает на два вопроса: видит ли посетитель правильную подсказку и может ли он выполнить ожидаемое действие без догадок.

Скорость, доступность и поддержка интерактивного блока

Hotspot-блок кажется небольшим элементом, но на странице он связан с несколькими ресурсами: основным изображением, стилями Elementor, скриптами виджета, tooltip-содержимым и, если используется товарная точка, данными WooCommerce. Поэтому после визуальной настройки полезно отдельно подумать о сопровождении блока. Это особенно важно для магазина, где товары меняются, цены обновляются, а страницы коллекций часто попадают в рекламу или рассылки.

Первое правило - не используйте hotspot как единственное место, где находится важная информация. Если товар, условие услуги или ключевой факт доступны только во всплывающей подсказке, часть посетителей может их не увидеть: кто-то не нажмёт на точку, кто-то откроет страницу на маленьком экране, кто-то использует ассистивные технологии или браузер с ограничениями. Лучше, когда hotspot даёт быстрый визуальный путь, а основной текст страницы всё равно содержит важную информацию в обычной HTML-структуре.

Как не утяжелить страницу

Начните с изображения. Одна тяжёлая lifestyle-фотография может замедлить первый экран сильнее, чем сам виджет. Подготовьте изображение заранее: сожмите его без заметной потери качества, удалите лишние области кадра, не загружайте оригинал с камеры, если на странице он всё равно показывается в ограниченной ширине. Если tooltip содержит дополнительные картинки, проверьте их размер отдельно.

Не добавляйте несколько hotspot-блоков подряд без причины. Если на странице есть большая витрина, интерактивная схема, слайдер, видео и ещё один hotspot, посетитель получает много конкурирующих действий. В таком случае лучше разделить страницу: один интерактивный блок оставить как главный, а остальные сведения раскрыть обычными карточками, таблицей или текстом.

Что учесть для доступности

Hotspot-элементы должны быть понятны без угадывания. Marker должен выглядеть как интерактивный объект, а не как случайная декоративная точка. Если tooltip открывается по клику, посетитель должен видеть, что после нажатия что-то изменилось. Если в tooltip есть ссылка, её текст должен объяснять действие: перейти к товару, открыть видео, посмотреть деталь, а не просто «подробнее».

Для важных изображений оставьте осмысленный alt у самой картинки и текстовое пояснение рядом с блоком. Не пытайтесь перенести весь смысл в картинку с точками. Поисковые системы, экранные дикторы и часть пользователей лучше воспринимают обычный текст. Интерактивность должна усиливать объяснение, а не прятать его от тех, кто не открыл tooltip.

Как поддерживать блок после публикации

Если hotspot связан с товарами WooCommerce, добавьте блок в регулярную редакторскую проверку. При снятии товара с продажи, смене изображения, изменении названия или цены hotspot может остаться на странице, но вести к устаревшему контексту. Особенно это заметно в lookbook-разделах и сезонных подборках, где старые товары часто остаются на красивых фотографиях.

Раз в несколько обновлений Elementor, WooCommerce, темы или оптимизатора открывайте страницу и проверяйте три вещи: точки стоят на своих местах, tooltip открывается на публичной части сайта, переходы ведут на актуальные страницы. Такая проверка занимает несколько минут, но помогает поймать конфликт до того, как его заметит покупатель или клиент.

Безопасная UX-правка, если tooltip обрезается темой

Иногда hotspot настроен правильно, но всплывающая подсказка обрезается контейнером. Это часто связано не с самим плагином, а со стилями секции, колонки, слайдера или темы. Если tooltip находится внутри блока с overflow: hidden, его видимая часть может пропасть за границей контейнера.

Самый безопасный путь - сначала попробовать настройки Elementor: изменить позицию tooltip, увеличить отступы секции, убрать лишнюю вложенность, отключить слайдер или протестировать блок в обычной секции. Если это не помогает, можно добавить маленькую CSS-правку через дочернюю тему, Customizer или безопасный менеджер snippets. Правка не меняет файлы плагина и легко откатывается.

Перед применением задайте секции с hotspot-блоком CSS-класс hotspot-showcase в настройках Elementor Advanced - CSS Classes. Затем добавьте CSS:

.hotspot-showcase {
  overflow: visible;
}

.hotspot-showcase .elementor-widget-container {
  overflow: visible;
}

.hotspot-showcase [class*="hotspot"],
.hotspot-showcase [class*="tooltip"] {
  z-index: 20;
}

Эта правка основана не на скрытом API Wiloke, а на обычной безопасной CSS-логике для Elementor-контейнера. Она применима только к секции, где вы явно указали класс hotspot-showcase. После вставки очистите кеш, откройте страницу и проверьте, не перекрывает ли tooltip меню, cookie-баннер, модальные окна или соседние блоки.

Если стало хуже, откат простой: удалите CSS и снимите класс с секции. Не увеличивайте z-index бесконечно и не добавляйте глобальные правила для всего сайта. Локальная правка лучше глобальной, потому что она не ломает другие Elementor-виджеты.

Диагностика: точки не открываются, съезжают или показывают пустые данные

Проблемы с hotspot-блоком обычно выглядят одинаково: в редакторе всё работает, а на публичной странице точка не открывается, tooltip уходит за край, товарная подсказка пустая или координаты отличаются на мобильном экране. Разбирать такие ошибки нужно по слоям, а не случайным перебором настроек.

Tooltip виден в редакторе, но не открывается на сайте

Симптом: в Elementor подсказка появляется, а после публикации точка не реагирует или реагирует только как обычная ссылка.

Возможная причина - кеш, отложенная загрузка JavaScript, конфликт оптимизатора или отсутствие нужных Elementor-ассетов на публичной странице. Сначала очистите кеш сайта и браузера, затем временно отключите объединение и задержку JavaScript для тестовой страницы. Если после этого tooltip заработал, возвращайте оптимизации по одной.

Что проверить

• Открывается ли tooltip в режиме без авторизации.
• Нет ли ошибок JavaScript в консоли браузера.
• Не отключены ли скрипты Elementor или WooCommerce оптимизатором.
• Не находится ли блок внутри слайдера, вкладки или скрытого контейнера, который инициализируется позже.

Если проблема появляется только в конкретной теме или конкретном контейнере, перенесите hotspot в обычную секцию и сравните результат. Это быстро покажет, виновата ли настройка блока или окружение.

Точка съехала после адаптации под мобильный экран

Симптом: на desktop marker стоит правильно, а на планшете или телефоне указывает на соседний объект.

Чаще всего причина в том, что изображение меняет пропорцию, обрезается контейнером или получает другую высоту. Проверьте настройки изображения в Elementor, ширину контейнера и поведение темы. Если важные предметы расположены у краёв, замените фото на более свободную композицию или уменьшите число точек.

Исправление начинайте с изображения, а не с ручной подгонки каждой точки. Если исходная картинка нестабильна, координаты будут снова съезжать после правок дизайна.

Товарная подсказка пустая или ведёт не туда

Симптом: tooltip открывается, но в нём нет ожидаемого товара, нет изображения, нет цены или ссылка ведёт к другой карточке.

Проверьте сам товар WooCommerce: опубликован ли он, есть ли основное изображение, корректна ли цена, не скрыт ли товар из каталога, не выбран ли черновик или вариация без нужных данных. Затем вернитесь в Elementor и заново выберите товар в настройке точки.

Если в блоке много товарных точек, полезно временно подписать их в редакторе понятными admin labels, если такая настройка есть в вашей версии. Это снижает риск перепутать похожие товары.

Tooltip обрезается или прячется под соседним блоком

Симптом: подсказка открывается, но видна только частично, перекрывается секцией, header, слайдером или краем контейнера.

Проверьте overflow и z-index родительских элементов. Сначала измените позицию tooltip и увеличьте пространство вокруг изображения. Если блок находится внутри carousel, tabs или sticky-секции, протестируйте его вне этого контейнера. Для локального исправления можно применить CSS из предыдущего раздела, но только после проверки, что проблема действительно связана с обрезкой.

Редактор Elementor зависает после добавления сложного блока

Симптом: после добавления hotspot-блока страница тяжело открывается в редакторе, сохранение занимает слишком много времени или появляется ошибка сервера.

Причина может быть в нехватке ресурсов, большом количестве сторонних Elementor-аддонов, тяжёлых изображениях или конфликте с другим плагином. Проверьте системную информацию Elementor, размер изображений, число точек и плагины оптимизации. Если блок нужен на важной странице, соберите его на копии сайта и переносите только после стабильной проверки.

Не лечите все проблемы одним глобальным отключением кеша. Найдите конкретный слой: данные товара, позиционирование изображения, скрипты Elementor, контейнер темы или серверные лимиты.

Когда CodeCanyon Wiloke Hotspot будет удачным выбором

Плагин стоит использовать, если вы уже работаете с Elementor, хотите превратить изображения в понятные интерактивные блоки и видите конкретный сценарий: товарная витрина WooCommerce, аннотированная фотография, медиа-подсказки, визуальный справочник или обучающая схема. В таких задачах Wiloke Hotspot помогает связать изображение, подсказку и действие посетителя.

Перед запуском проверьте совместимость, соберите минимальный тест, настройте одну страницу без лишней сложности, затем расширяйте блок. Не перегружайте фотографию точками, не прячьте важный текст только в tooltip и не забывайте про мобильную проверку. Лучший результат получается, когда hotspot дополняет контент страницы, а не пытается заменить структуру сайта.

Если после проверки продукт подходит вашему сценарию, можно получить версию для WordPress, установить его на тестовую копию сайта и пройти весь путь: одна точка, товарная подсказка, мобильная проверка, кеш, затем рабочая публикация.

Если же вам нужен только базовый hotspot без WooCommerce-акцента, на сайте уже есть Elementor Pro или другой пакет аддонов, сравните Wiloke с альтернативами из раздела выше. Это сэкономит время на поддержке и снизит риск лишних расширений в Elementor-страницах.