Фотография продукта с абзацем спецификаций ниже редко читается План этажа с легендой сбоку игнорируется Проблема всегда одна и та же: изображение и информация живут в двух разных местах, и большинство посетителей никогда не прокручивают достаточно далеко, чтобы соединить их.
Ан точка доступа изображения исправляет что. вы прикрепите маленькие маркеры прямо на фото, и каждый показывает короткую метку, когда кто-то зависает или постукивает.The Виджет точки доступа изображения из Мастер Аддоны делает это внутри редактора Элементор Загрузить изображение, сбросить маркеры, где вы хотите их, написать метку для каждого, и вы закончили. нет CSS, нет пользовательского кода.
Что такое точка доступа к изображениям в Elementor?
Точка доступа к изображению - это небольшой интерактивный маркер, закрепленный в определенной позиции на изображении. Каждый маркер имеет свою метку, значок или ссылку. На рабочем столе при наведении на маркер отображается плавающая панель с содержимым. На мобильном телефоне при нажатии на него делается то же самое.
Фото продукта может иметь маркер на каждой функции. план этажа может отметить отдельные комнаты. скриншот может указать кнопки или настройки с кратким объяснением. изображение само по себе не меняется. маркеры просто дают посетителям возможность изучить его.
Элементор не имеет встроенного виджета точки доступа Версия Master Addons обрабатывает все, что находится на панели виджетов: размещение маркеров, содержимое этикеток, значки, анимации и стиль. вы настраиваете каждую точку доступа индивидуально через ретранслятор, и виджет заботится о позиционировании и отзывчивости.
Зачем использовать точки доступа к изображениям на своем веб-сайте?
Статические изображения создают разрыв между тем, что видит посетитель, и тем, что ему нужно знать. горячие точки закрывают этот разрыв.
На фотографии продукта закрепите маркер на каждой функции, чтобы посетители видели характеристики, не прокручивая их в отдельный список. На плане этажа отметьте комнаты или кабинки, чтобы каждое место открывалось своим названием и деталями. На инфографике держите визуальное чисто и позвольте маркерам переносить дополнительный контекст. На скриншоте укажите конкретные кнопки или настройки учебного или адаптационного потока. На фотографии команды назовите людей или отделы.
Структура всегда одна: одно изображение, несколько маркеров, каждый из которых раскрывает контент при взаимодействии с. Посетитель остается на изображении вместо того, чтобы подпрыгивать между изображением и текстовым блоком под ним.
Как добавить точку доступа к изображению в Elementor (шаг за шагом)
Вся установка занимает около пяти минут.
Шаг 1: Установите главные дополнения и активируйте Pro
Перейти к плагинам, Добавить новое в вашей панели управления WordPress и искать “Master Addons.” Установить и активировать бесплатный плагин. Если у вас есть Лицензия Proвведите его в разделе "Мастер-аддоны", лицензия. Виджет "Горячая точка изображения" появляется только после того, как Pro активен.
Шаг 2. Перетащите виджет точки доступа изображения на свою страницу
Откройте любую страницу в редакторе Elementor.На панели Элементы слева найдите точку доступа к изображениям или прокрутите в раздел Главные дополнения (виджеты несут фиолетовый значок MA).Перетащите его на страницу. Он загружается образцом изображения и несколькими маркерами-заполнителями, которые вы можете редактировать.
Шаг 3: Загрузите изображение
Во вкладке Содержимое откройте раздел Изображение Нажмите Выбрать изображение и выберите изображение из медиатеки Установите разрешение изображения на полное или большое для резкого рендеринга Опция Выравнивание позиционирует изображение в своем столбце: слева, в центре или справа.
Шаг 4: Добавьте точки доступа к изображению
Откройте раздел "Горячие точки" Каждый элемент в ретрансляторе - один маркер. нажмите "Добавить элемент", чтобы создать новый. Вы можете добавить столько, сколько нужно изображению. Откройте вкладку "Положение" каждого маркера и установите ползунки горизонтального и вертикального положения в процентах, чтобы разместить его на изображении.
Если вам нужны статические маркеры вместо импульсной анимации по умолчанию, существует переключатель "Отключить импульсный эффект".
Шаг 5: Установите тип маркера и содержимое метки
Щелкните элемент точки доступа, чтобы открыть его настройки.Под Вводом выберите то, что появляется внутри маркера: ничего (просто точка), короткий текст (знак плюс по умолчанию), значок или небольшое изображение. Текстовое поле - это текст, показанный внутри маркера. Поле Ссылка добавляет URL-адрес, который работает, когда метки открываются при наведении или выключаются для этого размера экрана.
Редактор Содержимого всплывающей подсказки - это поле WYSIWYG для текста метки, но сама метка показывает обычный текст Форматирование, изображения и ссылки убираются, поэтому напишите одну короткую строку.
Шаг 6: Настройте поведение маркера
Вернувшись на основную вкладку "Содержимое", раздел "Советы инструментов" управляет поведением меток на всех маркерах:
- Показать позицию: на какой стороне маркера открывается этикетка (сверху, снизу, слева, справа).
- Стрелка: переключить указатель между маркером и меткой.
- Анимация: эффект раскрытия при появлении метки, например Shift-Toward.
- Триггер на Нажать: переключается с hover-to-reveal на click-to-reveal Это тот, который вы хотите для мобильных, так как сенсорные экраны не имеют hover.
Параметры стиля маркера
В каждой точке доступа есть своя вкладка Стиль внешнего вида маркера:
- Цвет по умолчанию и Фон по умолчанию: маркер в состоянии покоя.
- Цвет наведения и Фон наведения: как это меняется при зависании.
- Непрозрачность: насколько твердо маркер выглядит на фоне изображения. более низкие значения делают его более тонким.
Выберите цвет маркера, который выделяется на изображении позади него. занятая фотография проглотит низкоконтрастный маркер, и посетители не заметят горячие точки.
Стиль изображения и этикеток
Основная вкладка виджета Style состоит из трех разделов.
Панель изображений
Управляет самим изображением: непрозрачность, радиус границы, тень коробки и фильтры CSS. Радиус границы или тень помогает изображению сидеть внутри макета в стиле карты. CSS-фильтры позволяют настраивать яркость, контрастность или насыщенность без реэкспорта изображения.
Панель Маркеров
Глобальные настройки для всех маркеров: размер, заполнение текста, радиус границы, типографика, переход, а также цвет, фон, граница, непрозрачность и тень поля для определения по умолчанию и наведения. Отдельные цвета точки доступа переопределяют их.
Панель этикеток
Управляет плавающей панелью, которая появляется при взаимодействии маркера с: цветом фона, цветом текста, типографикой, заполнением, радиусом границы и тенью.
Отзывчивое поведение на мобильном телефоне
Маркеры используют позиционирование на основе процента, поэтому они остаются прикрепленными к одному и тому же месту на изображении независимо от размера экрана. Метки изменяют размер и положение, чтобы оставаться в пределах окна просмотра.
Сенсорные устройства не имеют hover, поэтому триггер на Нажмите переключатель в разделе Советы по инструментам переключает весь виджет на tap-to-reveal Посетители нажимают на маркер, чтобы открыть метку и нажимать в другом месте, чтобы закрыть его Если ваша аудитория в основном на мобильном, включите это с самого начала.
На очень маленьких экранах, где метки начинают перекрываться, вы можете установить "Отключить на мобильный телефон" или "Планшет и мобильный телефон" и вместо этого позволить ссылкам маркеров выполнять работу. Каждый маркер по-прежнему переходит к своему URL-адресу при нажатии.
Виджет "Горячая точка изображения" и "Подсказка: в чем разница?"?
У Master Addons есть две функции, которые создают этикетки для наведения, и люди их смешивают:
| Особенность | Что это делает | Лучший Для |
|---|---|---|
| Виджет точки доступа изображения | Закрепляет интерактивные маркеры в определенных положениях x/y на изображении. каждый маркер открывает метку при наведении или щелчке. | Аннотированные фотографии, вызовы продуктов, планы этажей, интерактивные карты. |
| Виджет подсказок и расширение подсказок | Виджет Tooltip - это автономный подсказка с собственным триггером Расширение Tooltips прикрепляет метку наведения на существующий элемент Elementor, например кнопку, значок, текстовый блок или раздел. | Наведите подсказки на кнопки, текст справки на поля формы, дополнительный контекст на любом элементе страницы. |
Изображение Hotspot построен для изображений и размещает маркеры по позициям Если вам нужны маркеры на фотографии, используйте Image Hotspot. для наведения метки на кнопке или текстовом блоке, которые уже существуют, используйте Расширение ToolTips. Если вместо этого вам нужен отдельный намек, Виджет подсказки делает это.
Точка доступа изображений и расширение Tooltips нуждаются в Master Addons Pro, в то время как виджет Tooltip находится в бесплатном плагине Они не делятся селекторами или обработчиками событий, поэтому вы можете использовать их на одной странице.
Советы по работе с точками доступа к изображениям
- Космические маркеры наружу. Перекрывающиеся маркеры делают изображение трудным для использования Если две горячие точки расположены близко друг к другу, отодвиньте их метки на противоположные стороны или опустите одну из них.
- Держите этикетки короткими. Одна или две строки читаются лучше, чем абзац внутри плавающей панели. Используйте этикетку для быстрого резюме и ссылки для получения полной информации.
- Включите триггер на Нажмите для мобильного телефона. Даже если наведение работает на рабочем столе, пользователям touch нужен тап-цель. виджет обрабатывает оба режима одновременно.
- Тест на разных экранах. Маркеры, которые хорошо расположены на рабочем столе, могут группироваться на телефоне. перед публикацией проверьте телефон, планшет и широкий монитор.
- Сравните маркеры с изображением. Яркий маркер на темной фотографии работает Приглушенный маркер на занятом фоне исчезает Используйте состояние "Наведение", чтобы добавить акцента, когда кто-то фокусируется на маркере.
- Используйте вкладку "Положение", когда выравнивание имеет значение. Перетаскивание быстро для грубого размещения. вкладка Позиция с точными процентными значениями лучше, когда вам нужны маркеры для совмещения с определенными частями диаграммы или скриншота.
Бесплатно против профессионала: что вы получаете
| План | Точка доступа к изображению | Другие виджеты |
|---|---|---|
| Бесплатно | Не входит | Десятки бесплатных виджетов, таких как Dual Heading, Creative Button, Infobox, Advanced Accordion и виджет Tooltip. |
| Про | Включено | Все бесплатные виджеты, а также точка доступа к изображениям, расширение всплывающих подсказок, условия отображения и остальные более 80 виджетов и расширений. |
Базовый плагин можно установить бесплатно Репозиторий WordPress. Виджет точки доступа к изображениям специально требует Лицензия Pro.
Что такое точка доступа к изображениям в Elementor?
Точка доступа к изображению - это небольшой интерактивный маркер, размещенный поверх изображения. когда посетитель наводит или нажимает на него, появляется метка с текстом, описанием или ссылкой для этой конкретной области фотографии. Elementor Pro имеет свой собственный виджет Hotspot, а Master Addons Pro добавляет виджет Image Hotspot, который также может использовать небольшие изображения в качестве маркеров.
Сколько точек доступа я могу добавить к одному изображению?
Нет жесткого ограничения. на практике, от 5 до 7 точек доступа на изображение сохраняет вещи читаемыми. помимо этого, маркеры начинают перекрываться. если вам нужно аннотировать больше областей, разделите контент на несколько изображений.
Работают ли точки доступа к изображениям на мобильных устройствах?
Да. сенсорные экраны не имеют зависания, поэтому включите триггер нажатием, и мобильные посетители коснутся маркера, чтобы открыть его метку. Процентное позиционирование позволяет правильно закреплять точки доступа на разных размерах экрана.
Могу ли я связать точку доступа с другой страницей?
Да. у каждой точки доступа есть поле Ссылка работает, когда метки открываются на ховере, или на экранах, где метки выключены, поэтому маркер может показать свою метку на ховере и отвести посетителя на страницу продукта или внешний URL-адрес нажать. с Триггером на Нажмите на, щелчок вместо этого открывает метку.
Виджет Image Hotspot бесплатный или Pro?
Виджет Image Hotspot - это функция Pro. Плагин базовых главных аддонов бесплатен, но виджету горячей точки требуется a Лицензия Pro.
В чем разница между виджетом Image Hotspot и виджетом Tooltip?
Виджет "Горячая точка изображения" закрепляет интерактивные маркеры в определенных положениях изображения, каждый из которых показывает метку при наведении или щелчке. The Виджет подсказки является самостоятельным подсказкой с собственным триггером, а расширение Tooltips прикрепляет метку наведения на существующий элемент, такой как кнопка, текст или значок.Используйте точку доступа к изображениям для аннотированных фотографий и параметры всплывающей подсказки для подсказок на наведение на другие элементы страницы.
Завершение
Виджет Image Hotspot принимает плоское изображение и добавляет маркеры, которые раскрывают информацию при наведении или нажатии. Загрузите изображение, опустите маркеры на области, которые нуждаются в объяснении, напишите короткую метку для каждой и создайте стиль маркеров, чтобы они соответствовали вашему дизайну. Все происходит внутри редактора Elementor.
Дополнительные сведения об изображениях в Elementor см. в разделе Виджет сравнения изображений и Виджет эффектов наведения изображения. Если вам нужны этикетки на кнопках или тексте вместо изображений, Учебник виджетов подсказок охватывает это. И полный список Виджеты и расширения Master Addgets стоит просмотреть, если вы хотите увидеть, что еще доступно.
Получите Master Addons Pro чтобы разблокировать виджет "Горячая точка изображения" и остальные более 80 виджетов и расширений Elementor.
