Некоторые изображения нуждаются в небольшом объяснении, как снимок продукта, план этажа, или карта.The Точка доступа к изображению виджет в Мастер-аддоны для Elementor привязывает кликабельные маркеры в любом месте изображения, и каждый из них показывает подсказку с текстом или ссылкой, когда посетитель зависает или нажимает на нее.
Вы загружаете изображение, опускаете точки доступа туда, где вы хотите их, добавляете текст подсказки, затем стилизуете маркеры и устанавливаете, как ведут себя подсказки. это руководство охватывает каждую настройку виджета.
Что делает виджет Image Hotspot #
Виджет помещает маркеры поверх одного изображения. у каждой точки доступа есть своя позиция, значок и подсказка, поэтому вы можете пометить части фотографии или связать их с другими страницами. Наведите курсор или щелкните маркер, и рядом с ним появится подсказка.
Три вкладки запускают его. Содержание содержит изображение, горячие точки и поведение подсказки. Стиль обрабатывает изображение, цвета маркеров и внешний вид подсказки. Продвинутый это обычное расстояние и видимость Элементора.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
- Изображение, а также метки или ссылки, которые вы хотите отобразить в каждой точке доступа.
Как добавить виджет Image Hotspot #
В редакторе Elementor откройте Элементы панель и поиск Точка доступа к изображению, или прокрутить в раздел Главные дополнения (виджеты несут фиолетовый значок МА). перетащите его на страницу, и он загружается образцом изображения и маркеров, которые вы можете редактировать.
Выберите изображение #
Открыть Содержание вкладка. Изображение раздел - это место, где вы загружаете базовое изображение, на котором расположены горячие точки.
- Выберите изображение: выберите картинку из медиатеки.
- Разрешение изображения: размер подается, например, большой или полный.
- Выравнивание: слева, в центре или справа внутри столбца.
Добавить точки доступа #
Открыть Горячие точки раздел. это ретранслятор, поэтому каждый маркер - это свой собственный элемент. используйте "Добавить элемент", чтобы добавить маркеры и перетащить их на место на изображении.
- Добавить товар: добавьте столько точек доступа, сколько нужно изображению.
- Отключить импульсный эффект: выключите пульсирующую анимацию на маркерах.
- Перетащите на позицию: переместите каждый маркер на изображении или установите точные координаты.
Настройте каждую точку доступа #
Нажмите на точку доступа, чтобы открыть ее настройки. The Содержание вкладка устанавливает тип маркера, текст подсказки и дополнительную ссылку.
- Тип: ничего не показывайте, значок или изображение внутри маркера.
- Текст и ссылка: короткая метка и URL-адрес маркера.
- Содержание подсказки: полный текст отображается на ховере, отредактированном в поле WYSIWYG.
Стиль каждой точки доступа #
The Стиль вкладка на горячей точке задает свои цвета. вы получаете цвет и фон для нормального состояния и отдельный набор для зависания, плюс ползунок непрозрачности.
- Цвет и фон по умолчанию: маркер в состоянии покоя.
- Цвет и фон наведения: как меняется при зависании.
- Непрозрачность: как солидно выглядит маркер.
Управляйте всплывающими подсказками #
Вернувшись на основную вкладку "Контент", Советы по инструментам раздел управляет тем, как ведет себя каждая подсказка: где она находится, как она анимируется и открывается ли она при наведении или щелчке.
- Показать положение и стрелку: на какой стороне открывается подсказка и есть ли на ней указатель.
- Анимация: эффект раскрытия, как и Shift-Toward.
- Триггер на Нажать: откройте всплывающие подсказки нажатием мыши вместо зависания, лучше на ощупь.
Стиль изображения и подсказок #
Открыть Стиль вкладка на виджете. The Изображение раздел задает непрозрачность картины, границу, фильтры, отделяет Горячие точки и Советы по инструментам в разделах стилизованы маркеры и ящики для подсказок.
- Изображение: непрозрачность, радиус границы, тень коробки и фильтры CSS.
- Горячие точки: глобальный размер и цвет маркеров.
- Советы по работе: фон подсказки, цвет текста и типографика.
Обычные случаи использования #
- Изображения продуктов прикрепление функций или характеристик к частям фотографии.
- Карты и планы этажей маркировка комнат, кабинок или мест.
- Инфографика добавление деталей без загромождения изображения.
- Фотографии команды или офиса маркировка людей или территорий.
- Учебники указание шагов или частей на скриншоте.
Советы по работе с виджетом Image Hotspot #
- Сохраняйте читаемость горячих точек. Распорте их, чтобы маркеры и подсказки не перекрывались на экранах меньшего размера.
- Используйте нажмите на мобильный. Включите триггер нажатием, чтобы пользователи могли открывать подсказки, поскольку на телефоне нет зависания.
- Сравните маркеры. Выберите цвет маркера, который выделяется на изображении позади него, иначе его проглотит занятая фотография.
- Сохраняйте текст подсказки коротким. Одна-две строки читаются лучше, чем абзац, засунутый в плавающий ящик.
- Установите точные позиции. Используйте вкладку "Положение" для точного размещения вместо того, чтобы смотреть на сопротивление.
Смотрите видеоурок #
Предпочитаете следовать на экране? Видеоурок ниже проходит через элемент точки доступа к изображениям от начала до конца, показывая, как изображение, точки доступа, всплывающие подсказки и стиль работают в редакторе Elementor.
Часто задаваемые вопросы #
Что такое виджет Image Hotspot в Master Addons?
Это виджет Elementor, который привязывает интерактивные маркеры к изображению. у каждой точки доступа есть своя позиция, значок и подсказка с текстом или ссылкой, отображаемая при наведении курсора или щелчке Все устанавливается с панели Elementor без кода.
Как добавить больше точек доступа к изображению?
Откройте раздел "Горячие точки" на вкладке "Содержимое" и используйте "Добавить элемент", чтобы создать еще один маркер. Каждая новая точка доступа получает свое собственное содержимое, стиль и положение, и вы можете перетащить ее на место на изображении или установить точные координаты на вкладке "Положение".
Могу ли я добавить ссылку на точку доступа?
Да. у каждой точки доступа есть поле "Ссылка" на вкладке "Содержимое", поэтому маркер может указывать на любой URL-адрес. Это позволяет изображению действовать как карта с возможностью клика, отправляя посетителей на страницу продукта, раздел или внешний сайт с помощью контакта на фотографии.
Работают ли точки доступа к изображениям на мобильных устройствах?
Да, но нажатие не существует на касание Включите триггер на Нажмите в разделе Советы по инструментам, чтобы мобильные пользователи могли нажать маркер, чтобы открыть его всплывающую подсказку Вы также можете скрыть всплывающие подсказки ниже точки останова и использовать ссылку маркера вместо этого.
Могу ли я использовать собственный значок или изображение в качестве маркера?
Да. у каждой точки доступа есть опция Тип на вкладке Содержимое, где вы можете показать значок или изображение внутри маркера вместо значения по умолчанию. таким образом, маркеры могут соответствовать вашему бренду или теме изображения.
Завершая #
Виджет Image Hotspot превращает плоское изображение в интерактивное: загрузите изображение, закрепите маркеры, добавьте всплывающие подсказки, затем создайте стиль маркеров и установите поведение всплывающей подсказки. Чтобы узнать о связанных виджетах, см Виджет сравнения изображений и Виджет эффектов наведения изображения, просмотр всего Виджеты и расширения Master Addgetsи проверьте страница ценообразования за то, что включает каждый план.
