Ключевые выводы
- Точка доступа к изображению Elementor - это маркер, закрепленный на фотографии, который открывает короткую метку при наведении или нажатии, а виджет точки доступа к изображению Master Addons добавляет один маркер для каждого элемента в своем списке точек доступа.
- Виджет Image Hotspot нуждается в Elementor и Master Addons Pro, поскольку бесплатный Elementor не имеет виджета точки доступа, а Elementor Pro поставляет свой собственный отдельный виджет точки доступа.
- Каждый маркер точки доступа к изображению помещается с помощью ползунков горизонтального и вертикального положения в процентах от изображения, и это одно положение применяется на рабочем столе, планшете и телефоне.
- Советы по подсказкам "Горячая точка изображения" отображают только обычный текст, поскольку жирный текст, ссылки, изображения и короткие коды, введенные в поле "Содержимое подсказки", удаляются при рендеринге страницы.
- Триггер на Нажмите в разделе Советы по работе с точками изображения заставляет маркеры работать на телефонах, но ссылка маркера отслеживается только тогда, когда всплывающие подсказки открываются при наведении курсора.
- Виджет Image Hotspot может служить простой картой изображений со связанными маркерами точек, хотя он не может рисовать кликабельные фигуры или контуры комнат так, как это может сделать плагин карты изображений SVG.
Точка доступа к изображению Элементора - это небольшой маркер, закрепленный на фотографии, на которой изображена короткая метка, когда посетитель зависает или нажимает на нее. У Free Elementor нет виджета для этого, поэтому в этом руководстве используется Виджет точки доступа к изображениям Master Addons, который добавляет маркеры к любому изображению с панели Элементор без пользовательского кода, Вам нужны Master Addons Pro для него.
Приведенные ниже шаги переносят вас из пустого контейнера в опубликованное интерактивное изображение: размещение маркеров по процентам, написание метки для каждого из них и стилизация маркеров для рабочего стола и телефонов. Более поздние разделы охватывают ограничения, которые необходимо знать перед сборкой, как использовать точки доступа в качестве простой карты изображений и как виджет сравнивается с виджетом Hotspot в Elementor Pro.
Оглавление
Что такое точка доступа к изображениям в Elementor
Точка доступа к изображению - это маркер, помещенный в заданную точку изображения. Каждый маркер имеет свою короткую метку и, если хотите, ссылку. на рабочем столе метка отображается на hover. на телефоне посетитель нажимает на маркер.
Фотография продукта может иметь маркер на каждой функции. план этажа может отмечать комнаты или парты. скриншот может указывать на кнопки, необходимые новому пользователю. изображение остается прежним, и маркеры позволяют посетителям исследовать его, не прокручивая вниз к отдельному списку характеристик или легенде.
Свободный Элементор не имеет виджета точки доступа.У Элементора Про есть один под названием Hotspot, а Master Addons Pro добавляет точку доступа к изображениям, которая также может использовать маленькое изображение в качестве маркера.Это руководство охватывает виджет Главные Аддоны.
Если вам нужен только подсказка о наведении на кнопку или заголовок, точка доступа - неправильный инструмент. The Виджет подсказки справляется с этим без Master Addons Pro и Расширение ToolTips (Pro) добавляет подсказку к элементу, который уже находится на странице.
Хотите увидеть, как он работает, прежде чем строить? выше Страница виджета точки доступа изображения имеет живые демо, полный список настроек и бок о бок с Elementor Pro Hotspot.
Как добавить точку доступа к изображению в Elementor
Настройка занимает около пяти минут для изображения с четырьмя или пятью маркерами.
Шаг 1: Установите главные дополнения и активируйте Pro
В вашей панели управления WordPress перейдите в Плагины, Добавить новое и найдите “Master Addons”.Установите и активируйте его, затем введите свой Лицензия Pro в разделе "Мастер-аддоны", лицензия. точка доступа к изображениям появляется на панели "Элементор" только после того, как Pro активен. Он работает со свободным Элементором.
Шаг 2: Перетащите виджет точки доступа изображения на страницу
Откройте страницу в редакторе Elementor и выполните поиск на панели Elements для “hotspot” Результат со значком MA - Image Hotspot Если вы также видите виджет Hotspot с блокировкой рядом с ним, то он принадлежит Elementor Pro. Перетащите точку доступа к изображению в контейнер.
Шаг 3: Выберите свое изображение
На вкладке Содержимое откройте раздел Изображение и нажмите Выбрать изображение Установите разрешение изображения на полное или большое, если фотография имеет мелкие детали, потому что маркеры сидят на визуализированном изображении, а уменьшенная копия делает каждый вывод приблизительным. выравнивание помещает изображение влево, в центр или вправо в его колонку.
Шаг 4: Добавьте точки доступа и установите их положение
Откройте раздел "Горячие точки" Каждый элемент в списке - один маркер, поэтому нажмите "Добавить элемент" один раз для каждого места, которое вы хотите отметить. Ограничения на количество элементов нет.
Каждый элемент имеет вкладки Содержимое, Стиль и Позиция На вкладке Позиция переместите ползунки Горизонтальное положение (%) и Вертикальное положение (%), чтобы разместить маркер Значения составляют процент изображения, поэтому 50 и 50 помещают маркер в центр Вы не можете перетаскивать маркеры на холсте, и все новые элементы начинаются в верхнем левом углу, пока вы не переместите их, поэтому три свежих элемента могут выглядеть как один.
На каждом размере экрана применяется одна позиция. маркер на 22% поперек и 52% вниз сидит на той же части фотографии на ноутбуке и на телефоне.
В списке "Отключить импульсный эффект?" выключает пульсирующее кольцо вокруг каждого маркера виджета.
Шаг 5: Выберите тип маркера и напишите метку
На вкладке Содержимое каждого элемента Тип устанавливает то, что появляется внутри маркера: Нет (простая точка), Текст (знак плюс по умолчанию или число или слово, которое вы вводите), Значок (любой значок "Шрифт потрясающий") или Изображение (маленькая картинка).Смешивание типов на одном изображении работает нормально.
Поле Ссылка отправляет посетителя на другую страницу, когда он щелкает маркер. за ним следуют, когда всплывающие подсказки открываются при наведении курсора. при включении Триггера на Нажмите (шаг 6) щелчок открывает всплывающую подсказку, и ссылка игнорируется.
Содержимое всплывающей подсказки - это строка, которая появляется в всплывающей подсказке. поле выглядит как полнотекстовый редактор, но всплывающая подсказка показывает простой текст: жирный шрифт, курсив, ссылки, изображения и короткие коды - все это удаляется при рендеринге страницы.Напишите одну короткую строку.
Шаг 6: Выберите, как открываются маркеры
Вернувшись на вкладку "Содержимое", раздел "Советы по инструментам" управляет каждым маркером виджета одновременно.
- Показать позицию выбирает сторону, на которой открывается подсказка: сверху, снизу, слева или справа. Маркер может переопределить его с помощью параметра "Показать" на вкладке "Положение".
- Анимация устанавливает эффект раскрытия: сдвиг в сторону, сдвиг в сторону, затухание, масштаб или перспектива.
- Стрелка добавляет указатель из подсказки к маркеру.
- Смещение и Расстояние перемещают всплывающую подсказку вдоль маркера и от него.
- Триггер на Нажмите открывает всплывающие подсказки на щелчке или нажатии Телефоны не имеют зависания, поэтому включите это, если многие посетители используют телефон.
Шаг 7: Предварительный просмотр и публикация
Нажмите Опубликовать и открыть страницу в новой вкладке Наведите указатель мыши на каждый маркер, чтобы проверить текст подсказки и сторону, затем измените размер окна на ширину телефона и проверьте, что маркеры не закрывают друг друга.
Стиль маркеров и изображения
Стайлинг происходит в двух местах: на вкладке "Стиль" каждого маркера и на основной вкладке "Стиль" виджета.
Стиль по маркеру
Вкладка Стиль внутри элемента точки доступа имеет настройки по умолчанию и наведение на цвет, фон и непрозрачность. Используйте его, чтобы придать одному маркеру другой цвет, например предмету продажи на фотографии продукта.
Выберите цвет маркера, который контрастирует с фотографией за ним Приглушенный маркер на оживленной фотографии теряется, и посетители не заметят, что есть что зависать.
Изображение
Раздел Изображение основной вкладки Стиль контролирует фото: непрозрачность, граница, радиус границы, тень коробки и CSS фильтры. радиус и мягкая тень помогают изображению сидеть внутри макета карты.
Горячие точки
В разделе "Горячие точки" каждый маркер стилизуется одновременно: размер, заполнение, радиус границы, непрозрачность, цвет и фон, каждый с версией наведения курсора. Настройки на индивидуальном маркере выигрывают у них.
Советы по инструментам
В разделе "Советы по работе с инструментами" используется всплывающая подсказка: выравнивание текста, заполнение, радиус границы, фон, цвет текста, цвет стрелок и типографика.
Создайте интерактивное изображение в Elementor
Интерактивное изображение - это фотография, которая отвечает на вопросы, когда посетитель указывает на нее. В Elementor вы создаете его с помощью точки доступа к изображениям, выполнив описанные выше шаги: один маркер на место, однострочная подсказка на каждом и триггер на щелчке, если ваш трафик в основном мобильный.
Сочетание изображения с коротким списком рядом с ним работает хорошо Посетитель может навести маркер или прочитать список, и оба указывают на одни и те же пункты.The купите демо-версию этого номера использует пронумерованные маркеры на фотографии в гостиной с прайс-листом рядом с ней.
Другие макеты, подходящие для интерактивного изображения, включают часы или гаджет с маркером на каждой части, список автомобилей с маркерами на фонарях и колесах, фотографию объекта недвижимости с этикетками на каждой функции и командную фотографию с именем на каждом человеке.
Используйте точки доступа к изображениям в качестве простой карты изображений
Карта изображений делает части изображения кликабельными. Image Hotspot охватывает общий случай: маркер на каждом месте со Ссылкой на другую страницу, за которым следуют, когда всплывающие подсказки открываются при наведении курсора. он размещает только маркеры точек. он не рисует кликабельные фигуры, поэтому план этажа, где каждый контур комнаты должен быть кликабельным, нуждается в специальном плагине карты изображений, таком как Карта изображений Pro, который рисует векторные фигуры на изображении (по состоянию на ноябрь 2026 г.).
Для значков на карте кампуса, планировке магазина или полу спортзала достаточно и быстрее установить маркеры. The демо-версия карты зоны тренажерного зала отмечает на фото пять зон, и каждый маркер ссылается на страницу бронирования этой зоны.
Точки доступа к изображениям на телефонах и планшетах
Позиции маркера - это процент изображения, поэтому каждый маркер остается на одной и той же части фотографии при каждом размере экрана. для планшета или телефона отдельной позиции нет.
Маркеры сохраняют свой размер по мере сокращения изображения, примерно 40px по умолчанию. на телефоне изображение со многими маркерами становится переполненным.Использовать меньше маркеров, уменьшить размер под Стиль, точки доступа или дать посетителям телефона более простое изображение.
Телефоны не имеют hover, поэтому включите Trigger on Нажмите в разделе Советы по инструментам Посетители коснуться маркера, чтобы открыть его всплывающую подсказку Имейте в виду, что при включении режима нажатия кнопка открывает всплывающую подсказку и ссылка маркера не выполняется, поэтому если ссылки имеют большее значение, чем всплывающие подсказки, оставьте Триггер на Нажмите Выключить.
Что нужно использовать точки доступа изображений
| Настройка | Виджет горячей точки, который вы получаете |
|---|---|
| Свободный Элементор сам по себе | Нет. Core Elementor не имеет виджета точки доступа. |
| Элементор Про | Собственный виджет Hotspot от Elementor, с отформатированным содержимым всплывающих подсказок и собственной анимацией маркеров. |
| Мастер-аддоны без Pro | Нет точки доступа к изображениям. Включено множество других виджетов. |
| С Master Addons Pro | Точка доступа к изображениям, расширение Tooltips и остальные более 80 виджетов и расширений. |
Основные дополнения устанавливаются из Каталог плагинов WordPress. Точке доступа к изображениям нужен a Лицензия Master Addons Pro поверх него. Каждый элемент управления указан в Руководство по настройкам точки доступа к изображению.
Советы по работе с точками доступа к изображениям
- Маркеры пробела наружу Если двое сидят близко друг к другу, отправьте их подсказки на противоположные стороны с помощью параметра Показать на вкладке Положение каждого маркера или опустите один.
- Держите каждую метку в одной строке. подсказка отображается как обычный текст, поэтому поместите более длинные детали на страницу и используйте ссылку маркера.
- Проверьте ширину телефона перед публикацией. везде применяется одинаковый процент позиции, и маркеры не сжимаются, поэтому маркер, который хорошо выглядит на рабочем столе, может покрыть небольшую деталь на телефоне.
- Используйте цвет Hover на маркерах, чтобы посетители могли определить, на каком из них они находятся.
- Маркеры строки вверх с точными числами. ввод значений в процент поля быстрее, чем подталкивание ползунков, когда маркеры должны сидеть на небольших частях диаграммы или скриншота.
Часто задаваемые вопросы
Что такое точка доступа к изображениям в Elementor?
Точка доступа к изображению - это небольшой маркер, размещенный поверх изображения. когда посетитель зависает или нажимает на него, для этой части фотографии появляется короткая метка. Elementor Pro имеет собственный виджет Hotspot, а Master Addons Pro добавляет виджет Image Hotspot, который также может использовать небольшие изображения в качестве маркеров.
Сколько точек доступа я могу добавить к одному изображению?
Жесткого предела нет Пять-семь маркеров на изображение сохраняет вещи читаемыми, и меньше на изображениях, которые будут видны на телефонах, потому что маркеры не сжимаются с изображением Если вам нужно больше, разделите контент на два изображения.
Работают ли точки доступа к изображениям на мобильных устройствах?
Да. телефоны не имеют зависания, поэтому включите Триггер на Нажмите и посетители коснуться маркера, чтобы открыть его всплывающую подсказку. позиции - это процент изображения и одинаковые на каждом экране, поэтому проверьте, чтобы маркеры не толпились друг на друга на ширине телефона.
Могу ли я связать точку доступа с другой страницей?
Да. у каждого маркера есть поле Ссылка.Ссылка выполняется, когда всплывающие подсказки открываются при наведении, поэтому посетитель читает всплывающую подсказку при наведении и переходит на страницу при нажатии. с Триггером при нажатии вместо этого щелчок открывает всплывающую подсказку, и ссылка не выполняется.
Могу ли я поместить выделенный жирным шрифтом текст, ссылки или изображения в всплывающую подсказку?
Нет. поле Содержимое всплывающей подсказки - богатый редактор, но жирный текст, ссылки, изображения и короткие коды удаляются при рендеринге страницы, поэтому всплывающая подсказка показывает обычный текст. напишите одну короткую строку и используйте ссылку маркера для более длинного содержимого.
Нужны ли мне Master Addons Pro для точки доступа к изображениям?
Да. Image Hotspot - это виджет Master Addons Pro, и он работает со свободным Elementor. Он появляется на панели Elementor один раз a Лицензия Pro активен.
Чем Image Hotspot отличается от виджета Elementor Pro Hotspot?
Точка доступа Elementor Pro позволяет форматировать содержимое всплывающей подсказки, имеет анимацию маркеров Soft Beat, Expand и Overlay и открывается при наведении, щелчке или вообще не щелчке. Точка доступа к изображениям главных дополнений использует подсказки обычного текста, импульсный эффект на маркерах и пять анимаций всплывающих подсказок, а также может использовать маленькое изображение в качестве маркера.
Заключительные мысли
Точка доступа к изображениям превращает плоскую фотографию в интерактивное изображение: четыре типа маркеров, позиции, установленные в процентах, одна строка открытого текста на маркер и пять раскрывают анимацию, все с панели Элементор. Сохраняйте маркеры немного на изображениях, которые будут видеть телефоны, и включайте триггер на Нажмите, когда большая часть трафика мобильная.
Дополнительные виджеты изображений см Сравнение изображений и Эффекты наведения изображения. Если вам нужны подсказки по наведению курсора на кнопки или текст вместо изображений, Учебник виджетов подсказок охватывает это и полный список Виджеты и расширения Master Addgets показывает, что еще поставляется с плагином.
Получите Master Addons Pro чтобы добавить Image Hotspot и остальные более 80 виджетов и расширений в Elementor.
